Spoonful — Recipe App
Lightweight recipe & blog demo built with React, Vite and Tailwind CSS. The app demonstrates a responsive UI, client-side routing, animated components, and a static blog powered by JSON content in public/data.json.
Demo
Live demo: https://recipe-app-azure-gamma.vercel.app/
Table of Contents
- What it does
- Why it's useful
- Tech stack
- Getting started
- Project structure
- Data & content
- Development scripts
- Where to get help
- Maintainers & contributing
What it does
Spoonful is a front-end demo application for browsing recipes and reading short blog-style articles. Key behaviors:
- Client-side routing for pages and single-item views (
react-router-dom). - Responsive layout and UI components built with Tailwind CSS.
- Animation effects via
framer-motionfor smoother interactions. - Static blog data served from
public/data.jsonfor easy local editing.
Why its useful
- Fast, minimal starter for food/recipe-related UI prototypes.
- Demonstrates modern React patterns (Vite, hooks, context providers).
- Good example for learning Tailwind + component composition.
Tech stack
- React 19
- Vite (dev server + build)
- Tailwind CSS
- Framer Motion (animations)
- React Router DOM (routing)
- Lucide React (icons)
Getting started
Prerequisites:
- Node.js (recommended 18+)
- npm (or yarn)
Quick start (from repository root):
# install
npm install
# start dev server
npm run dev
# open the app in the browser (Vite prints the URL, usually http://localhost:5173)