Tastebite Recipes App

React app with the ability to create accounts and manage custom recipes (CRUD). Auth and database from Google Firebase. Data fetching, form validation, and sanitization.

https://tastebite-app-sd.vercel.app

Main technologies

Stack

• Firebase - backend by Google, app development platform that helps you build and grow apps
• Flowbite - an open-source library of UI components based on the utility-first Tailwind CSS framework
• Formik - the world's most popular open source form library for React and React Native
• Heroicons - beautiful hand-crafted SVG icons, by the makers of Tailwind CSS
• React Router - a standard library for routing in React
• React Query - powerful asynchronous state management for TS/JS, React, Solid, Vue and Svelte
• Vite - a new breed of frontend build tooling that significantly improves the frontend development experience
• Zod - TypeScript-first schema validation with static type inference

Details

• created with React (Vite) and TypeScript
• CRUD - the ability to manage accounts and recipes
• data stored on Cloud Firestore
• data fetching and caching with Tanstack React Query
• authentication through Firebase Authentication
• context and reducer for managing context values
• suspense for data fetching with lazy loading
• Error Boundary component to catch errors in child components
• storing data in local storage using a custom hook
• routing with React Router
• forms created with the Formik
• form validation and sanitization (Zod)
• styling with Tailwind CSS and Flowbite components
• responsive website design
• light/dark mode prefers the system color scheme

Tutorial and project structure

Inside the project you'll see the following folders and files:

PROJECT_ROOT
├── public              # static assets
└── src
    ├── assets          # images and files
    ├── components      # React components
    ├── lib
    │   ├── context     # React context and reducer files
    │   ├── firebase    # firebase config and fetch functions
    │   ├── helpers     # helpful functions
    │   ├── hooks       # custom hooks
    │   ├── interfaces  # TypeScript interfaces
    │   └── schemas     # zod schemas
    └── pages           # page files

Download the repository to your local machine and run to download all missing dependencies (yarn required):

yarn install

After that you can run this project with:

yarn dev

To build your application use:

yarn build

To manage the content of the app, you need to create a new Firebase project. See the official documentation: https://firebase.google.com/docs

After you have created your own Firebase project, simply create the .env.local file with the following data in the main folder and restart your application:

VITE_FIREBASE_KEY = YOUR_FIREBASE_KEY
VITE_FIREBASE_AUTH_DOMAIN = YOUR_FIREBASE_AUTH_DOMAIN
VITE_FIREBASE_PROJECT_ID = YOUR_FIREBASE_PROJECT_ID
VITE_FIREBASE_STORAGE_BUCKET = YOUR_FIREBASE_STORAGE_BUCKET
VITE_FIREBASE_MESSAGING_SENDER_ID = YOUR_FIREBASE_MESSAGING_SENDER_ID
VITE_FIREBASE_APP_ID = YOUR_FIREBASE_APP_ID