React Mastery Project - COOK RECIPES

The project is a React-based application that requires collaboration from a team of developers. It involves the following elements:

GitHub Repository : Set up a GitHub repository to host the project. This will serve as the central location for collaboration, code versioning, and issue tracking.
Continuous Deployment : Implement a continuous deployment process to ensure that the application is always up to date and accessible. You can use platforms such as Netlify, Vercel, or GitHub Actions to automate the deployment process whenever changes are pushed to the main branch.
Testing : Implement a comprehensive testing strategy to ensure the reliability and stability of the application. Utilize frameworks like Jest and React Testing Library to write unit tests and integration tests. Cover critical functionality and edge cases with test cases. Consider using tools like Cypress for end-to-end testing.
Always Up : Implement measures to ensure the application is always up and running, with minimal downtime. Utilize monitoring tools, error tracking, and automated alerts to quickly identify and resolve any issues that may arise.

The project utilizes the following technologies and concepts:

React Hooks : Manage state and lifecycle within functional components. This enables a more modular and reusable code structure.
Context API : Manage global state and make data accessible to different components without the need for prop drilling.
Component Library : Leverage a component library, to streamline the UI development process and ensure consistency across the application.
Authentication : Implement authentication functionality using a suitable authentication library or framework.
API Integration: Integrate with external APIs to fetch and update data.

What we use :

Component Library : Shadcn-ui is not consideed like a library component but it allow to build your own. They use Tailwind-ccs, React Hook Form and on Radix UI, Lucide React build-in to create there components.
Authentication and database : Supabase is your choice, it's allows us to do all we need in purpose for this project.
API Integration: mealdb because it's about food and recipes.
Testing : Vitest, Testing-library, Cypress, msw, faker. All what we need for testing.
React : React Router, React Query for routing and manage data.
Not include in requirement :
- Typescript and Zod to get a safer application.
- Eslint / Prettier with Husky to handle rules/ formatter/ pre-commit for better continuous integration pipeline.

Pnpm : It's faster than regular npm. You need to do some step explain here.
Supabase : Create a account a follow step by step guidance here.
Gmail : An gmail account to disable supabase limitation for email validation.
.env : Don't forgot to filled up each variables!

Launch App : pnpm dev
Build App : pnpm build
Tests :
- unit/integration:
  - pnpm test (classic)
  - pnpm test:coverage (with coverage)
- End to End:
  - pnpm e2e:run (without browser)
  - pnpm e2e:open (with browser)