https://github.com/saagor16/veggify-recipe-fontend
This repository contains the frontend code for the Veggify Recipe application. Veggify Recipe is a modern and responsive recipe website where users can explore recipes, search for specific dishes, and view details about ingredients, preparation steps, and more.
https://github.com/saagor16/veggify-recipe-fontend
axios firebase reactjs telwind-css
Last synced: about 2 months ago
JSON representation
This repository contains the frontend code for the Veggify Recipe application. Veggify Recipe is a modern and responsive recipe website where users can explore recipes, search for specific dishes, and view details about ingredients, preparation steps, and more.
- Host: GitHub
- URL: https://github.com/saagor16/veggify-recipe-fontend
- Owner: saagor16
- Created: 2024-12-03T04:53:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-20T05:25:52.000Z (over 1 year ago)
- Last Synced: 2025-02-05T14:17:57.076Z (over 1 year ago)
- Topics: axios, firebase, reactjs, telwind-css
- Language: JavaScript
- Homepage: https://veggify-recipe-fontend.vercel.app
- Size: 1.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Veggify Recipe - Frontend
This repository contains the frontend code for the **Veggify Recipe** application. Veggify Recipe is a modern and responsive recipe website where users can explore recipes, search for specific dishes, and view details about ingredients, preparation steps, and more.
---
## Live Links
- **Frontend Live URL**: [Veggify Recipe Frontend Live](https://veggify-recipe-fontend.vercel.app/)
- **Backend Live URL**: [Veggify Recipe Backend Live](https://veggify-recipe-backend.vercel.app/)
---
## GitHub Repositories
- **Frontend Repository**: [Veggify Recipe Frontend GitHub](https://github.com/saagor16/Veggify-Recipe-Fontend)
- **Backend Repository**: [Veggify Recipe Backend GitHub](https://github.com/saagor16/Veggify-Recipe-Backend)
---
## Features of Veggify Recipe
- **User Authentication**:
- Login, Signup, and Logout functionality.
- Fully responsive design for all devices.
- **Recipe Exploration**:
- View the latest recipes.
- Search for recipes by name or category.
- Explore featured sections and categories.
- **Single Item View**:
- Detailed view of each recipe, including preparation time, difficulty, and instructions.
- **Newsletter Subscription**:
- Stay updated with the latest recipes by subscribing to the newsletter.
- **About Us and Contact Pages**:
- Learn more about Veggify and get in touch.
- **Responsive Design**:
- Fully optimized for mobile, tablet, and desktop devices.
---
## Frontend Technologies Used
- **React.js**: For building the user interface.
- **Tailwind CSS**: For responsive and modern styling.
- **React Router DOM**: For routing and navigation.
- **Axios**: For API integration.
- **React Icons**: For adding beautiful icons.
- **Vercel**: For deploying the frontend application.
---
## Installation and Setup
1. Clone the repository:
```bash
git clone https://github.com/saagor16/Veggify-Recipe-Fontend
```
2. Navigate to the project directory:
```bash
cd veggify-recipe-frontend
```
3. Install dependencies:
```bash
npm install
```
4. Run the development server:
```bash
npm run dev
```
---
## Pages and Functionalities
1. **Home Page**:
- Displays the latest recipes and featured sections.
- Includes newsletter subscription.
2. **Category Page**:
- Allows browsing recipes by categories.
3. **Single Recipe Page**:
- Shows detailed recipe information, including preparation time, difficulty, and step-by-step instructions.
4. **Search Page**:
- Enables users to search for recipes easily.
5. **About Page**:
- Provides information about the website.
6. **Contact Page**:
- Lets users send inquiries or feedback.
---
## Backend Technologies Used
- **Express.js**: For server-side logic.
- **MongoDB**: For database management.
- **Mongoose**: For interacting with the database.
- **CORS**: For handling cross-origin requests.
- **dotenv**: For managing environment variables.
- **Nodemon**: For automatic server restarts during development.
---
## Notes
This frontend interacts seamlessly with the backend to provide dynamic content, user authentication, and smooth operations. It demonstrates modern web development techniques and a polished UI.
Feel free to explore and contribute to the project!
---
## Author
- **Sagor**
- [GitHub](https://github.com/saagor16)
- [LinkedIn](https://www.linkedin.com/in/saagor/)