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.
- Frontend Live URL: Veggify Recipe Frontend Live
- Backend Live URL: Veggify Recipe Backend Live
- Frontend Repository: Veggify Recipe Frontend GitHub
- Backend Repository: Veggify Recipe Backend GitHub
- 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.
- 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.
- Clone the repository:
git clone https://github.com/saagor16/Veggify-Recipe-Fontend
- Navigate to the project directory:
cd veggify-recipe-frontend - Install dependencies:
npm install
- Run the development server:
npm run dev
- Home Page:
- Displays the latest recipes and featured sections.
- Includes newsletter subscription.
- Category Page:
- Allows browsing recipes by categories.
- Single Recipe Page:
- Shows detailed recipe information, including preparation time, difficulty, and step-by-step instructions.
- Search Page:
- Enables users to search for recipes easily.
- About Page:
- Provides information about the website.
- Contact Page:
- Lets users send inquiries or feedback.
- 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.
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!