Cook N' Plot

• 

• 

• 

Inspiration

Many students and young adults struggle with transitioning to independence, especially when it comes to managing food, budgeting, and meal planning. Cook N' Plot is designed to gamify this process—making cooking and gardening engaging while teaching users valuable life skills. Inspired by cozy simulation games like Stardew Valley, our web app encourages users to grow their own food, track ingredients, and discover budget-friendly recipes, all while creating a fun and interactive way to become self-sufficient.

What it does

Helps students and young adults learn basic cooking and gardening skills.

Enables budget-friendly meal planning based on available ingredients.

Introduces gamified elements (like interactive chickens and plants) that act as reminders of past meals—helping users build sustainable habits.

Encourages financial literacy by teaching users how to maximize ingredients and minimize waste.

How we built it

Front-end: React with Vite, using Tailwind CSS for styling.

Back-end: Node.js and Express with PostgreSQL for storing garden and recipe data from Kaggle, using SupaBase to host our data.

State Management: React hooks to handle animations and interactivity.

Animations & UI: Integrated sprite-based movement for interactive elements like the chicken and plant growth cycles.

Challenges we ran into

Aligning interactive elements like plants with garden plots required precise CSS tuning.

Managing real-time updates for ingredient tracking and garden progress.

Integrating animations smoothly within the React component structure.

Ensuring an intuitive user experience that balances fun game mechanics with practical cooking tools.

Accomplishments that we're proud of

Successfully implemented interactive gardening mechanics.

Designed an engaging UI with pixel-art aesthetics, keeping a fun and cozy feel.

Created dynamic elements like the animated chicken and plant cycle.

Built a functional ingredient-to-recipe system that personalizes recommendation

Creating a working user base system with Supabase, where users can be created and logged in using sates.

Working with a dataset of over 10000 rows.

What we learned

Fine-tuning animations and layout in React to create an immersive experience.

Managing a large-scale back-end with Supabase.

Handling complex UI interactions while maintaining performance.

Improving state management for tracking planted crops and ingredient availability.

Balancing game-like elements with practical cooking tools.

What's next for Cook N' Plot

Budgeting & Financial Planning:- We'd like to add a financial calculator that helps users track grocery spending.

Nutritional Education - A of way of providing nutritional insights for each recipe.

Community Support: Enable ingredient sharing and gardening tips among users.

Built With

• express.js
• kaggle
• node.js
• postgresql
• react.js
• supabase
• tailwind.css