Recipe App

View Project
Project Details

Recipe Collection App is a minimalist full-stack web application that allows users to manage their personal recipes with ease. Built using Next.js 15 (App Router), Convex, and Tailwind CSS, the app features a dark-themed, responsive interface and supports adding, editing, and deleting recipes with optional image uploads and ratings. It is deployed using Vercel and Convex Cloud for a fully serverless experience.

Key Features
  • Full CRUD Recipe Management: Implements a clear create-read-update-delete flow using Convex mutations (createRecipe, updateRecipe, deleteRecipe) and queries (getRecipes) to manage recipe data.
  • Image Upload and Rendering: Users can upload recipe images using Convex storage. Images are served via URLs generated through ctx.storage.getUrl().
  • Dark Theme UI: Minimalist interface with the following color palette:
    • Gold (#FFD700) for highlights and ratings
    • Jet Black (#121212) background
    • Ivory (#F5F5F5) text
    • Chocolate Brown (#4E342E) accents
    • Burgundy (#8E3B46) for buttons and interactions
  • Responsive and Accessible Layout: Built with Tailwind CSS to ensure responsive design and accessible color contrast across all viewports.
  • Full Stack Integration: Frontend (Next.js 15) and backend (Convex) communicate seamlessly with Convex functions for queries and mutations.
  • Live Deployment: Frontend deployed on Vercel, backend managed by Convex Cloud.
Technologies Used
  • Frontend:
    • Next.js 15 (App Router)
    • Tailwind CSS
    • Vercel (Hosting)
  • Backend:
    • Convex (Database and File Storage)
  • Development Tools:
    • Visual Studio Code
    • Node.js / npm
My Takeaways
  • Learned to design a clean, schema-validated CRUD structure using Convex functions for full control over data operations.
  • Understood the importance of using Convex Id<_storage> and generating image URLs at query time with ctx.storage.getUrl() for secure and efficient image handling.
  • Gained experience debugging common issues in schema validation, especially around optional file fields and validator mismatches.
  • Practiced deploying a fully serverless application stack using Vercel for frontend and Convex Cloud for backend without managing infrastructure.
  • Strengthened UI development skills using Tailwind CSS to create an accessible, responsive, and aesthetically consistent interface.
Project Gallery