https://github.com/gabrielepre11/react-recipes-app

A modern and responsive Recipes App built with React, TypeScript, TailwindCSS, Zustand, and React Router. Users can explore a wide range of recipes, search and filter them, view detailed recipe pages, and manage their favorites list with ease.
https://github.com/gabrielepre11/react-recipes-app

react react-router tailwindcss typescript zustand zustand-persist zustand-state-management

Last synced: about 2 months ago
JSON representation

A modern and responsive Recipes App built with React, TypeScript, TailwindCSS, Zustand, and React Router. Users can explore a wide range of recipes, search and filter them, view detailed recipe pages, and manage their favorites list with ease.

• Host: GitHub
• URL: https://github.com/gabrielepre11/react-recipes-app
• Owner: GabrielePre11
• Created: 2025-06-27T21:01:01.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2025-06-27T21:21:16.000Z (4 months ago)
• Last Synced: 2025-06-27T22:30:50.021Z (4 months ago)
• Topics: react, react-router, tailwindcss, typescript, zustand, zustand-persist, zustand-state-management
• Language: TypeScript
• Homepage: https://react-recipes-app-umber.vercel.app/
• Size: 11.8 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🍽️ Recipes App

A modern and responsive Recipes App built with **React**, **TypeScript**, **TailwindCSS**, **Zustand**, and **React Router**.

Users can explore a wide range of recipes, search and filter them, view detailed recipe pages, and manage their favorites list with ease.

---

## 🚀 Features

- 🔍 **Search & Filter**: Quickly find recipes by keywords and categories.

- 📄 **Detailed Recipe View**: Click on any recipe to view ingredients, steps, and more.

- ❤️ **Favorites Management**: Add or remove recipes from your personal favorites list.

- 📱 **Responsive Design**: Looks great on all devices thanks to TailwindCSS.

- ⚡ **State Management**: Zustand is used for lightweight and scalable global state handling.

- 🌐 **Routing**: Navigate seamlessly using React Router.

---

## 🛠️ Tech Stack

- **React**

- **TypeScript**

- **TailwindCSS**

- **Zustand**

- **React Router**

[![React](https://img.shields.io/badge/React-%2320232a.svg?logo=react&logoColor=%2361DAFB)](#)

[![React Router](https://img.shields.io/badge/React_Router-CA4245?logo=react-router&logoColor=white)](#)

[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=fff)](#)

[![TailwindCSS](https://img.shields.io/badge/Tailwind%20CSS-%2338B2AC.svg?logo=tailwind-css&logoColor=white)](#)

[![Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=fff)](#)

---

## 📸 Screenshots

![App Screenshot](public/projectImage.png)