👩‍🍳 Cooking Club

The Cooking Club project was built as a fun and practical way for my coworkers to share food creations around a rotating weekly theme. Users could upload photos and view each other's dishes, encouraging community, creativity, and delicious inspiration.

This project also helped solidify key frontend and backend skills—particularly around deploying a real-world app with thoughtful data handling under Firebase’s free-tier limitations.

🧠 Key Concepts Applied

• ⚛️ React Components & Props
• 📦 Context API for lightweight state management
• 🔁 Routing with react-router-dom
• 🎨 Styling with SCSS Modules
• 🔐 User flow and conditional rendering
• 🔥 Firebase for hosting, authentication, and Firestore database
• 📊 Optimizing data access (read/write limits on free Firebase tier)
• 🚀 Deployment via GitHub Pages

🔗 Live Demo

Explore the live application here

🛠️ Tech Stack & Libraries

• React
• React Context API
• Firebase (Authentication, Firestore Database, Hosting)
• SCSS Modules
• JavaScript (ES6+)
• React Router
• GitHub Pages (Deployment)

📚 What I Learned

Through building this project, I deepened my understanding of:

• Efficient state management using React Context
• Structuring clean, maintainable components
• Setting up client-side routing for a multi-page app
• Managing user-generated content with Firebase
• Navigating and working within platform limitations (Firebase free-tier read limits)
• Deploying a static React app on GitHub Pages
• Balancing UX with backend efficiency in a real-world scenario

🧾 Source Code & Final Thoughts

You can explore the source code on GitHub to see how the project is structured. This project was both a technical and creative milestone—blending frontend engineering with a community-building concept that made tech more personal and fun.