Tastebite Recipes App - Web application
React app with the ability to create accounts and manage custom recipes (CRUD). Auth and database from Google Firebase.
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 featuring dark mode support, a Figma design system, and more.
- 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