The Recipe Book App is a dynamic web application that allows users to share and explore recipes with a range of interactive features. Users can create an account and log in to add, edit, or delete their own recipes, as well as view a personal list of their submissions. The app supports liking functionality, ensuring users can like any number of recipes—except their own or the same recipe more than once. A search feature enables filtering recipes by cuisine type, making discovery easier. Additionally, the interface includes a theme toggle for switching between dark and light modes, offering a personalized user experience.
- React 19 – Frontend framework
- Vite – Fast development build tool
- Tailwind CSS + DaisyUI – Styling and UI components
- React Router v7 – Client-side routing
- Firebase – Authentication and backend services
- SweetAlert2 – Beautiful alert modals
- React Toastify – Toast notifications
- Embla Carousel – Responsive carousel for featured recipes
- Animate.css – CSS animations
- React Intersection Observer – Scroll-based interactions
- React Simple Typewriter – Typing text animation
- 📝 Add, edit, and delete your own recipes
- 👍 Like other users' recipes (once only, can't like your own)
- 🔍 Search recipes by cuisine type
- 👤 View your personal list of recipes
- 🌙 Toggle between dark and light UI themes
{
"@tailwindcss/vite": "^4.1.7",
"animate.css": "^4.1.1",
"daisyui": "^5.0.35",
"embla-carousel": "^8.6.0",
"embla-carousel-autoplay": "^8.6.0",
"embla-carousel-react": "^8.6.0",
"firebase": "^11.7.3",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-icons": "^5.5.0",
"react-intersection-observer": "^9.16.0",
"react-router": "^7.6.0",
"react-simple-typewriter": "^5.0.1",
"react-toastify": "^11.0.5",
"sweetalert2": "^11.21.2",
"tailwindcss": "^4.1.7"
}- Clone the repository
- Install dependencies: npm install
- Create a .env file in the root directory and add your Firebase configuration (replace placeholders)
- npm run dev