{"id":26041776,"url":"https://github.com/cltxvz/snapquiz","last_synced_at":"2026-04-07T22:31:01.961Z","repository":{"id":278242200,"uuid":"934978471","full_name":"cltxvz/snapQuiz","owner":"cltxvz","description":"Test your memory with AI-generated quizzes based on random images!","archived":false,"fork":false,"pushed_at":"2025-02-28T18:09:31.000Z","size":230,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-28T22:26:22.290Z","etag":null,"topics":["ai","bootstrap","computer-vision","flask","full-stack","google-gemini-ai","heroku","image-processing","javascript","memory-game","nodejs","python","react","rest-api","web-scraping"],"latest_commit_sha":null,"homepage":"https://snapquiz-frontend-489546fcd686.herokuapp.com","language":"JavaScript","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/cltxvz.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}},"created_at":"2025-02-18T17:53:18.000Z","updated_at":"2025-02-28T18:09:34.000Z","dependencies_parsed_at":"2025-02-18T19:26:24.572Z","dependency_job_id":"f68d1e54-dc87-4c53-a745-494cac1aeb39","html_url":"https://github.com/cltxvz/snapQuiz","commit_stats":null,"previous_names":["cltxvz/snapquiz"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cltxvz%2FsnapQuiz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cltxvz%2FsnapQuiz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cltxvz%2FsnapQuiz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cltxvz%2FsnapQuiz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cltxvz","download_url":"https://codeload.github.com/cltxvz/snapQuiz/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242411227,"owners_count":20123645,"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":["ai","bootstrap","computer-vision","flask","full-stack","google-gemini-ai","heroku","image-processing","javascript","memory-game","nodejs","python","react","rest-api","web-scraping"],"created_at":"2025-03-07T14:48:41.143Z","updated_at":"2026-04-07T22:31:01.955Z","avatar_url":"https://github.com/cltxvz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **📸 SnapQuiz**  \n\n*\"Test your memory with AI-generated quizzes based on random images!\"*  \n\n---\n\n## **🚀 Description**  \n\n**SnapQuiz** is an interactive web application that challenges players to **memorize an image for a few seconds** and then answer **AI-generated multiple-choice questions** about it. This project leverages **Google Gemini AI Vision** to analyze images and create dynamic quizzes.  \n\n### **How It Works:**  \n1. **The app finds a random image online** (Wikimedia Commons).  \n2. **You have a few seconds to memorize it.**  \n3. **Answer multiple-choice questions** about the image.  \n4. **Get your score and see the correct answers!**  \n\nSnapQuiz is a fun and engaging way to test **visual memory, observation skills, and attention to detail!**  \n\n---\n\n## **🛠️ Technologies Used**  \n\n### **Frontend (React \u0026 UI)**  \n- **React.js** – Component-based UI development.\n- **React Router** – Navigation between pages.  \n- **Bootstrap 5** – Responsive UI and styling.  \n- **Axios** – API calls to the backend.  \n- **React Hooks** – (`useState`, `useEffect`) for state management.  \n\n### **Backend (Flask \u0026 AI Integration)**  \n- **Flask** – Lightweight Python backend.  \n- **Google Gemini AI Vision** – Image analysis \u0026 quiz generation.  \n- **BeautifulSoup** – Web scraping to find random images.  \n- **Pillow (PIL)** – Image processing and conversion.  \n- **Requests** – Fetching images from Wikimedia Commons.\n\n### **Deployment \u0026 Hosting**  \n- **Heroku (Frontend + Backend)** – Hosting the full application.  \n- **Git \u0026 GitHub** – Version control and collaboration.  \n\n---\n\n## **📚 Skills \u0026 Concepts Applied**  \n\n### **Full-Stack Development**  \n- **Frontend + Backend Integration** – Connecting React with Flask.  \n- **RESTful API Development** – Handling GET/POST requests for images \u0026 quizzes.  \n- **AI Integration** – Using **Google Gemini AI Vision** for custom quiz generation.  \n\n### **Software Engineering Best Practices**  \n- **Modular Code Structure** – Well-organized frontend \u0026 backend.  \n- **Error Handling \u0026 Debugging** – Handling invalid images, API failures, and retries.  \n- **Optimized API Calls** – Efficient **image fetching \u0026 quiz generation**.  \n- **Environment Variables (`.env`)** – Securing API keys \u0026 backend credentials.  \n\n### **AI \u0026 Data Processing**  \n- **Image Scraping \u0026 Filtering** – Using **BeautifulSoup** to select **valid images**.  \n- **Image Processing** – Resizing and converting images for AI compatibility.  \n- **AI Prompt Engineering** – Crafting effective prompts for **accurate quiz generation**.  \n\n### **UI/UX \u0026 Performance Optimization**  \n- **Responsive Design** – Mobile-friendly interface with **Bootstrap 5**.  \n- **Timers \u0026 Animations** – Countdown timers for memorization phase.  \n- **Loading States \u0026 Status Updates** – Improved user experience with dynamic loading messages.  \n\n---\n\n## **📖 Features \u0026 How to Play**  \n\n### **Game Flow:**  \n1. **Click \"Start Game\"** – The app finds a random image.  \n2. **Memorize the image** – You have **15 seconds** before it disappears!  \n3. **Answer the quiz** – AI-generated multiple-choice questions test your memory.  \n4. **See your final score** – Review answers and improve!  \n\n### **Game Modes:**  \n- **Basic Mode** – Memorize **1 image** and answer a quiz.  \n- **2-Images Mode** – Memorize **2 images**, then answer **combined** quiz questions.  \n- **4-Images Mode** – Memorize **4 images**, then answer **combined** quiz questions.  \n- **Timed Mode** – Complete the quiz before the timer runs out!  \n\n### **Game Enhancements:**  \n- **Dynamic AI Quizzes** – Each game is unique!  \n- **Auto-retry on invalid images** – Ensures AI can process the image.  \n- **Shuffled Answer Choices** – Prevents pattern-based guessing.  \n- **Live Timer** – Helps players track time.  \n\n---\n\n## **📈 Ideas for Future Improvements**  \n\n- **More Quiz Modes** – Difficulty levels, categories, etc.  \n- **Leaderboard \u0026 Score History** – Compete with friends!  \n- **User Accounts \u0026 Profiles** – Save scores and progress.  \n- **Multiplayer Mode** – Compete live with others!  \n\n---\n\n## **📜 How to Run SnapQuiz Locally**  \n\n### **1. Clone the Repository:**  \n```bash\ngit clone https://github.com/cltxvz/snapQuiz.git\n```\n\n### **2. Install Backend Dependencies:**  \n```bash\ncd backend\npip install -r requirements.txt\n```\n\n### **3. Set Up Environment Variables:**  \nCreate a `.env` file in the **backend** folder and add:  \n```env\nGOOGLE_API_KEY=your-google-gemini-api-key\n```\n\n### **4. Start the Backend Server:**  \n```bash\npython app.py\n```\nor  \n```bash\nflask run\n```\n\n### **5. Install \u0026 Run the Frontend:**  \n```bash\ncd frontend\nnpm install\nnpm start\n```\nThen, visit:  \n```\nhttp://localhost:3000\n```\n\n---\n\n## **🌎 Live Demo (Hosted on Heroku)**  \n**SnapQuiz:** [https://snapquiz-frontend-489546fcd686.herokuapp.com/](https://snapquiz-frontend-489546fcd686.herokuapp.com/)  \n\n---\n\n## **👤 Author**  \n**Carlos A. Cárdenas**  \n\n💡 **If you found this project useful or fun, please star the repo and contribute!** 🚀  \n\n---\n\n### **✅ Final Notes**  \nThis project was built to **demonstrate AI-powered quiz generation**, integrating **computer vision, web scraping, and game mechanics** into a **seamless full-stack experience**.  \n\nThank you for checking out **SnapQuiz**! 🎯🧠🚀  ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcltxvz%2Fsnapquiz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcltxvz%2Fsnapquiz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcltxvz%2Fsnapquiz/lists"}