{"id":23140960,"url":"https://github.com/annuk123/qflows","last_synced_at":"2025-05-07T18:24:25.304Z","repository":{"id":266861128,"uuid":"898183448","full_name":"annuk123/Qflows","owner":"annuk123","description":"✨ Qflow: A seamless tool for visualizing, learning, and exploring programming concepts with a sleek UI and modern design. 🚀 Perfect for developers and enthusiasts alike! 💻","archived":false,"fork":false,"pushed_at":"2025-04-12T22:11:43.000Z","size":1811,"stargazers_count":3,"open_issues_count":13,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T22:31:45.492Z","etag":null,"topics":["authjs","materialui","neondb","nextjs15","prisma-client","prisma-orm","reactjs","tailwindcss","typescript","zod-validation"],"latest_commit_sha":null,"homepage":"https://qflows-annukumari.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/annuk123.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-12-03T23:58:01.000Z","updated_at":"2025-04-12T22:11:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"98beb3c0-7c52-4064-9b78-cb55f271121c","html_url":"https://github.com/annuk123/Qflows","commit_stats":null,"previous_names":["annuk123/qflows"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/annuk123%2FQflows","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/annuk123%2FQflows/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/annuk123%2FQflows/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/annuk123%2FQflows/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/annuk123","download_url":"https://codeload.github.com/annuk123/Qflows/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252932516,"owners_count":21827319,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authjs","materialui","neondb","nextjs15","prisma-client","prisma-orm","reactjs","tailwindcss","typescript","zod-validation"],"created_at":"2024-12-17T14:12:05.256Z","updated_at":"2025-05-07T18:24:25.275Z","avatar_url":"https://github.com/annuk123.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌟 **Qflow**  \n\n**An interactive tool to visualize and explore programming concepts with an elegant and modern user interface.**  \n\n\n## 🚀 **Overview**  \n\nQflow is a **powerful and intuitive platform** designed for developers, students, and enthusiasts to:  \n- **Visualize** complex programming concepts in an easy-to-understand way.  \n- **Learn** interactively with dynamic tools and guides.  \n- **Explore** new technologies and understand their workflows visually.  \n\nWhether you’re a seasoned developer or a beginner, Qflow provides the perfect blend of simplicity and functionality to make learning and debugging enjoyable!  \n\n---\n\n## ✨ **Features**  \n\n- 🌐 **Interactive Visualizers**: Navigate through real-time event loops, state management, and database flows.  \n- 🎨 **Sleek Design**: Minimalistic yet vibrant UI built with cutting-edge design frameworks.  \n- 🌗 **Dark/Light Mode**: Choose your theme for a personalized experience.  \n- 🔒 **Secure Authentication**: User-friendly login and sign-up system with OAuth support for Google and GitHub.  \n- 📚 **Docs \u0026 Guides**: Built-in documentation for effortless onboarding.  \n- 🛠️ **Built for Developers**: Open-source and customizable for various use cases.  \n\n---\n\n## 🛠 **Tech Stack**  \n\nQflow is powered by a modern tech stack for scalability and performance:  \n\n- **Frontend**: ReactJS, TypeScript, NextJS, TailwindCSS, Material-UI  \n- **Backend**: NodeJS, ExpressJS, Prisma ORM  \n- **Database**: NeonDB (PostgreSQL)   \n- **UI Enhancements**: Zod, GSAP, Three.js  \n\n---\n\n## 🚧 **Setup and Installation**  \n\nFollow these steps to run Qflow locally:  \n\n### 1️⃣ Prerequisites  \nEnsure you have the following installed:  \n- [Node.js](https://nodejs.org/)  \n- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)  \n\n### 2️⃣ Clone the Repository  \n```bash  \ngit clone https://github.com/annuk123/Qflows.git  \ncd Qflows  \n```  \n\n### 3️⃣ Install Dependencies  \n```bash  \nnpm install  \n# or  \nyarn install  \n```  \n\n### 4️⃣ Configure Environment Variables  \nCreate a `.env.local` file in the root directory and add the following:  \n```env  \nDATABASE_URL=\u003cYour Database Connection URL\u003e  \nNEXTAUTH_URL=\u003cYour App URL\u003e\nNEXTAUTH_SECRET=\u003cYour Next Secret Key\u003e\nNEXT_PUBLIC_API_BASE_URL=\u003chttp://localhost:3000\u003e\nNEXTAUTH_URL=\u003chttp://localhost:3000\u003e\nCLOUDINARY_CLOUD_NAME=\u003cyour cloudinary cloud name\u003e\nCLOUDINARY_API_KEY=\u003cYour Cloudinary API Key\u003e\nCLOUDINARY_API_SECRET=\u003cYour Cloudinary API SECRET\u003e\n```  \n\n### 5️⃣ Start the Development Server  \n```bash  \nnpm run dev  \n# or  \nyarn dev  \n```  \nYour app will be running at [http://localhost:3000](http://localhost:3000).  \n\n---\n\n## 🌐 **Deploying to Vercel**  \n\nYou can deploy Qflow seamlessly on [Vercel](https://vercel.com/):  \n1. Push your code to GitHub.  \n2. Import the project into your Vercel dashboard.  \n3. Add the environment variables in the Vercel settings.  \n4. Deploy with one click!  \n\n---\n\n## 📸 **Screenshots**  \n\n### 💻 Home Page  \n![Home Page](public/image.png)  \n\n### 🎨 Visualizers  \n![Visualizer](public/image-1.png)  \n![Mobile view](public/image-2.png)\n![Mobile view](public/image-3.png)\n---\n\n## 🤝 **Contributing**  \n\nContributions are welcome! To get started:  \n1. Fork this repository.  \n2. Create a new branch: `git checkout -b feature-xyz`.  \n3. Commit your changes: `git commit -m \"Add feature xyz\"`.  \n4. Push to the branch: `git push origin feature-xyz`.  \n5. Open a pull request.  \n\n---\n\n## 📜 **License**  \n\nThis project is licensed under the [MIT License](./LICENSE).  \n\n---\n\n## 🙌 **Acknowledgments**  \n\nA huge thanks to the open-source community and libraries that made this project possible!  \n\n--- \n\n**Happy Coding! 💻✨**  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fannuk123%2Fqflows","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fannuk123%2Fqflows","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fannuk123%2Fqflows/lists"}