Recipe App Using Next Js

yashheda5

Recipe Explorer is built using Next.js, React, Tailwind CSS, and shadcn/ui. It allows users to explore recipes, view detailed info like ingredients and ratings, and navigate smoothly. Data is fetched from a public API, with skeleton loaders and error handling ensuring a seamless experience across all pages.

Demo Download

Recipe Explorer

Welcome to the Recipe Explorer! This project is a web application built using Next.js for server-side rendering and dynamic routing, combined with React for a scalable, component-based architecture. The design leverages Tailwind CSS for modern, responsive styling, and shadcn/ui for a set of pre-built, customizable UI components that enhance the user interface and experience. Data is fetched dynamically from a public API (https://dummyjson.com/recipes) using asynchronous JavaScript, with skeleton loading components to improve the user experience during data fetches. Error handling ensures smooth navigation, even when pages or recipes are unavailable.

🎯 Live Demo

Check out the live demo of the app hosted on Vercel:
Recipe Explorer Live Demo

📦 Direct Download

Download the latest version of the project as a ZIP file:
Download ZIP

🚀 Getting Started

To set up the project locally, follow these steps:

Clone the Repository
Clone the repository to your local machine:

git clone https://github.com/yashheda5/Recipe-App-Using-Next-js-.git

Navigate to the project directory:
```
cd Recipe App Using Nextjs
```
Install the required packages:
```
npm install
```
Start the development server:
```
npm run dev
```
Open the project in your browser at http://localhost:3000 to view your project.
To build the app for production, run:
```
npm run build
```

🤝 Contributing

We welcome contributions to this project! If you have suggestions, improvements, or find any issues, please open an issue or submit a pull request.

Top categories