An interactive tool to visualize and explore programming concepts with an elegant and modern user interface.
Qflow is a powerful and intuitive platform designed for developers, students, and enthusiasts to:
- Visualize complex programming concepts in an easy-to-understand way.
- Learn interactively with dynamic tools and guides.
- Explore new technologies and understand their workflows visually.
Whether you’re a seasoned developer or a beginner, Qflow provides the perfect blend of simplicity and functionality to make learning and debugging enjoyable!
- 🌐 Interactive Visualizers: Navigate through real-time event loops, state management, and database flows.
- 🎨 Sleek Design: Minimalistic yet vibrant UI built with cutting-edge design frameworks.
- 🌗 Dark/Light Mode: Choose your theme for a personalized experience.
- 🔒 Secure Authentication: User-friendly login and sign-up system with OAuth support for Google and GitHub.
- 📚 Docs & Guides: Built-in documentation for effortless onboarding.
- 🛠️ Built for Developers: Open-source and customizable for various use cases.
Qflow is powered by a modern tech stack for scalability and performance:
- Frontend: ReactJS, TypeScript, NextJS, TailwindCSS, Material-UI
- Backend: NodeJS, ExpressJS, Prisma ORM
- Database: NeonDB (PostgreSQL)
- Authentication: Auth.js (OAuth 2.0)
- UI Enhancements: Zod, GSAP, Three.js
Follow these steps to run Qflow locally:
Ensure you have the following installed:
git clone https://github.com/annuk123/Qflows.git
cd Qflows npm install
# or
yarn install Create a .env.local file in the root directory and add the following:
DATABASE_URL=<Your Database Connection URL>
NEXTAUTH_URL=<Your App URL>
NEXTAUTH_SECRET=<Your Next Secret Key>
GOOGLE_CLIENT_ID=<Google OAuth Client ID>
GOOGLE_CLIENT_SECRET=<Google OAuth Client Secret>
GITHUB_CLIENT_ID=<GitHub OAuth Client ID>
GITHUB_CLIENT_SECRET=<GitHub OAuth Client Secret> npm run dev
# or
yarn dev Your app will be running at http://localhost:3000.
You can deploy Qflow seamlessly on Vercel:
- Push your code to GitHub.
- Import the project into your Vercel dashboard.
- Add the environment variables in the Vercel settings.
- Deploy with one click!
Contributions are welcome! To get started:
- Fork this repository.
- Create a new branch:
git checkout -b feature-xyz. - Commit your changes:
git commit -m "Add feature xyz". - Push to the branch:
git push origin feature-xyz. - Open a pull request.
This project is licensed under the MIT License.
A huge thanks to the open-source community and libraries that made this project possible!
Happy Coding! 💻✨