Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/caner-yesiltas/boston-recipe-app
🥗 A modern recipe search application with authentication system and responsive design
https://github.com/caner-yesiltas/boston-recipe-app
axios protected-routes react-router sessionstorage styled-components
Last synced: about 1 month ago
JSON representation
🥗 A modern recipe search application with authentication system and responsive design
- Host: GitHub
- URL: https://github.com/caner-yesiltas/boston-recipe-app
- Owner: Caner-Yesiltas
- Created: 2024-11-20T20:02:14.000Z (2 months ago)
- Default Branch: master
- Last Pushed: 2024-12-09T02:36:11.000Z (about 1 month ago)
- Last Synced: 2024-12-09T03:28:18.116Z (about 1 month ago)
- Topics: axios, protected-routes, react-router, sessionstorage, styled-components
- Language: JavaScript
- Homepage:
- Size: 18.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 📌 About The Project
Recipe App is a modern web application built with React that allows users to search and discover recipes. With a beautiful user interface and authentication system, users can explore various meal types and view detailed recipe information.
### ✨ Key Features
- 🔍 Search recipes with keywords
- 🍳 Filter by meal types (Breakfast, Lunch, Dinner, Snack, Teatime)
- 🔒 User authentication system
- 💾 Session storage for user management
- 🎨 Styled-components for dynamic styling
- 🌈 Responsive design with hamburger menu
- 🎯 Protected routes for authenticated users
### 🛠️ Built With
- [React](https://reactjs.org/)
- [React Router](https://reactrouter.com/)
- [Styled Components](https://styled-components.com/)
- [Axios](https://axios-http.com/)
- [React Icons](https://react-icons.github.io/)
- [Edamam API](https://www.edamam.com/)
## 🚀 Getting Started
```bash
# Clone the repository
git clone https://github.com/caneryesiltas/recipe-app.git
# Navigate to project directory
cd recipe-app
# Install dependencies
yarn install
# Create .env file and add your Edamam API credentials
REACT_APP_APP_ID=your_app_id
REACT_APP_APP_KEY=your_app_key
# Start the development server
yarn start
```
## 💻 Project Structure
```
src/
├── components/
│ ├── cards/ # Recipe card components
│ ├── globalStyles/ # Global styling and theme
│ ├── header/ # Search and filter components
│ └── navbar/ # Navigation component
├── pages/
│ ├── about/ # About page
│ ├── detail/ # Recipe details page
│ ├── home/ # Main recipe search page
│ ├── login/ # Authentication page
│ └── register/ # User registration page
├── router/
│ ├── AppRouter.jsx # Route configurations
│ └── PrivateRouter.jsx # Protected route logic
└── App.js # Main application component
```
## 🔍 Core Functionality
- **Recipe Search**: Users can search recipes using keywords
- **Meal Type Filtering**: Filter recipes by different meal types
- **Authentication**: Login/Register system with session storage
- **Protected Routes**: Secure routes for authenticated users only
- **Responsive Design**: Mobile-friendly interface with hamburger menu
- **Recipe Details**: Detailed view for each recipe with ingredients
## 🎯 Component Details
### Navbar Component
- Responsive navigation with hamburger menu
- Dynamic styling based on theme
- Authentication-aware navigation links
### Cards Component
- Grid layout for recipe display
- Hover effects and shadows
- Image fallback handling
### Login Component
- Styled form with blur effect
- Session storage integration
- Protected route redirection
## 📱 Responsive Design
- Hamburger menu for mobile devices
- Fluid layouts with styled-components
- Breakpoint-based styling
- Flexible grid system for recipe cards
## 🤝 Contributing
Contributions make the open source community an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
## 📄 License
Distributed under the MIT License. See `LICENSE` for more information.
## 📫 Contact
Caner Yesiltas - [email protected]
Project Link: [https://boston-recipe-app-lm7t-2p6xccloj-caner-yesiltas-projects.vercel.app](https://boston-recipe-app-lm7t-2p6xccloj-caner-yesiltas-projects.vercel.app)
---
Made with ❤️ by Caner Yesiltas