https://github.com/annuk123/qflows
✨ Qflow: A seamless tool for visualizing, learning, and exploring programming concepts with a sleek UI and modern design. 🚀 Perfect for developers and enthusiasts alike! 💻
https://github.com/annuk123/qflows
authjs materialui neondb nextjs15 prisma-client prisma-orm reactjs tailwindcss typescript zod-validation
Last synced: 5 months ago
JSON representation
✨ Qflow: A seamless tool for visualizing, learning, and exploring programming concepts with a sleek UI and modern design. 🚀 Perfect for developers and enthusiasts alike! 💻
- Host: GitHub
- URL: https://github.com/annuk123/qflows
- Owner: annuk123
- Created: 2024-12-03T23:58:01.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-04-12T22:11:43.000Z (6 months ago)
- Last Synced: 2025-04-12T22:31:45.492Z (6 months ago)
- Topics: authjs, materialui, neondb, nextjs15, prisma-client, prisma-orm, reactjs, tailwindcss, typescript, zod-validation
- Language: TypeScript
- Homepage: https://qflows-annukumari.vercel.app/
- Size: 1.73 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌟 **Qflow**
**An interactive tool to visualize and explore programming concepts with an elegant and modern user interface.**
## 🚀 **Overview**
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!
---
## ✨ **Features**
- 🌐 **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.
---
## 🛠 **Tech Stack**
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)
- **UI Enhancements**: Zod, GSAP, Three.js
---
## 🚧 **Setup and Installation**
Follow these steps to run Qflow locally:
### 1️⃣ Prerequisites
Ensure you have the following installed:
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)
### 2️⃣ Clone the Repository
```bash
git clone https://github.com/annuk123/Qflows.git
cd Qflows
```
### 3️⃣ Install Dependencies
```bash
npm install
# or
yarn install
```
### 4️⃣ Configure Environment Variables
Create a `.env.local` file in the root directory and add the following:
```env
DATABASE_URL=
NEXTAUTH_URL=
NEXTAUTH_SECRET=
NEXT_PUBLIC_API_BASE_URL=
NEXTAUTH_URL=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
```
### 5️⃣ Start the Development Server
```bash
npm run dev
# or
yarn dev
```
Your app will be running at [http://localhost:3000](http://localhost:3000).
---
## 🌐 **Deploying to Vercel**
You can deploy Qflow seamlessly on [Vercel](https://vercel.com/):
1. Push your code to GitHub.
2. Import the project into your Vercel dashboard.
3. Add the environment variables in the Vercel settings.
4. Deploy with one click!
---
## 📸 **Screenshots**
### 💻 Home Page
### 🎨 Visualizers
---
## 🤝 **Contributing**
Contributions are welcome! To get started:
1. Fork this repository.
2. Create a new branch: `git checkout -b feature-xyz`.
3. Commit your changes: `git commit -m "Add feature xyz"`.
4. Push to the branch: `git push origin feature-xyz`.
5. Open a pull request.
---
## 📜 **License**
This project is licensed under the [MIT License](./LICENSE).
---
## 🙌 **Acknowledgments**
A huge thanks to the open-source community and libraries that made this project possible!
---
**Happy Coding! 💻✨**