A sleek and modern web app to explore delicious recipes with beautiful images, ingredient details, and cooking instructions. Built using React, styled with CSS Modules, and powered by the Spoonacular API.
- 🧠 Search and display food recipes based on ingredients, name, or categories
- 📷 High-quality food images for every recipe
- 🍳 View ingredients and detailed cooking instructions
- 🔁 Flip card animation to toggle between recipe details
- 🔄 Refresh button to refetch recipe data
- 🧰 Uses Spoonacular API for enhanced flexibility
- 📱 Responsive design to work seamlessly on all screen sizes
| Tech | Purpose |
|---|---|
| Frontend: React, JavaScript | Core web framework and static typing |
| CSS Modules | Scoped and modular styling |
| Spoonacular API | Food recipe data source |
| React Router | Client-side routing |
You'll need an API key from Spoonacular to fetch recipes.
- Sign up at spoonacular.com
- Get your free API key
- In your project, create a
.envfile:
This app uses the Spoonacular API to retrieve food data.
- Clone the repo
git clone https://github.com/solan117/food-app.git
cd food-app- Install dependencies
npm install
# or
yarn install- Set up environment variables
Create a .env file in the root:
REACT_APP_SPOONACULAR_API_KEY=your_api_key_here🔐 Your API key is kept safe and out of version control via
.gitignore.
- Start development server
npm run devVisit http://localhost:5173 to view the app.
src/
├── components/ # UI components (RecipeCard, FavoriteList, etc.)
├── hooks/ # Custom hooks (useFetchRecipes, useLocalStorage)
├── utils/ # Utility functions
├── pages/ # Page views (e.g., Home.tsx)
├── services/ # API services (spoonacularAPI.ts)
├── App.tsx
└── index.tsx
npm run start # Start development server
npm run build # Create a production build
npm run lint # Run ESLint for code quality checks
MIT — Free to use, fork, and contribute.
Karan Solanki
Full-Stack Developer | ReactJS · Java · Spring Boot · AWS
“Built with ❤️ to blend beautiful design with reliable weather insights.”