Pizza Shop

4/7 projects of Ignite React specialization by @rocketseat-education : An intermediate react project focusing on API integration with backend using React Query, unit testing and more

Available at (Vercel):

Requirements

• Orders Listing Page
  • Change profile
  • Filters: Users should be able to filter by "order id", "customer name" or "status"
  • Clear filters: Users should be able to clear/reset all filters
  • Orders table: Users should be able to view orders list (id, create time, status, customer, total)
  • Orders actions: Users should be able to change orders status (pending, canceled, processing, delivering, delivered)
  • Cancel order: Users should be able to cancel an order since as long as it does have the status "pending" or "process" only
  • Table pagination: Users should be able to navigate between pages.
  • Order details: Users should be able to view order details.
• Dashboard Page
  • Data cards: Users should be able to view cards with their bussiness metrics.
  • Data charts: Users should be able to view charts with their bussiness metrics.
  • Period filter: Users should be able to filter dashboard results by periodo with a datepicker.
• Sign in and Sign out: Users should be able to login and logout of their own account.
• Sign up: Users should be able to create an account.
• Not found page: Users should be able to see not found page when tries to access an unexistent page.

Technologies & Libraries used on this project

• Vite Frontend environment
• React Hook Form Forms support
• Zod Form validation
• Shadcn UI Ready ui components for your interface
• Radix UI Shadcn use radix components
• React Query Fetching, caching, synchronizing and updating server state
• Axios
• Lucide Icons library
• Recharts Charts
• Sonner Toasts
• Tailwind Shadcn use tailwind to style components
• PlayWright E2E tests
• Testing library Unit testing
• ESLint Code quality assurance
• Mock Service Worker API testing simulator
• Vitest JS/TS testing
• date-fns Utility library/date formatting

Issues and Discussions

• Pages and components

  • Shadcn theme customization
  • Adding Toast
  • Understanding theme context
  • Lists: filters
  • Lists: pagination
  • Chats with rechart library

• API Connection

  • Run API locally
  • Setup API client
  • HTTP state
  • Optimistic interface
  • As child trick

• Unit tests

  • Unit test setup
  • Testing overview
  • Spies
  • Wrappers
  • MemoryRouter
  • Main attributes of MemoryRouter
  • data-* attributes & tests with .dataset
  • Using "as" in tests

• Mocks

  • Mocking Service Worker (MSW)
  • How msw works

• End to End tests (e2e)

  • Playwright lib for end to end
  • Setup Playwright
  • Timeout