https://github.com/d33paks1ngh/foodiez

Foodiez is a modern food delivery application built using React. It allows users to browse a variety of restaurants, explore detailed menus, and place orders seamlessly
https://github.com/d33paks1ngh/foodiez

javascript jest-tests jsx netlify react react-router redux reduxtoolkit tailwind

Last synced: 29 days ago
JSON representation

Foodiez is a modern food delivery application built using React. It allows users to browse a variety of restaurants, explore detailed menus, and place orders seamlessly

• Host: GitHub
• URL: https://github.com/d33paks1ngh/foodiez
• Owner: d33paks1ngh
• Created: 2024-12-16T04:05:40.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-12-16T05:55:27.000Z (about 1 month ago)
• Last Synced: 2024-12-16T06:20:51.235Z (about 1 month ago)
• Topics: javascript, jest-tests, jsx, netlify, react, react-router, redux, reduxtoolkit, tailwind
• Language: JavaScript
• Homepage: https://foodiez-nine.vercel.app
• Size: 2.2 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Parcel

- Dev Build

- Local Server

- HMR = Hot Module Replacement

  (Hot Module Replacement (HMR) exchanges, adds, or removes modules

  while an application is running, without a full reload)

- Uses File Watching Algorithm - written in C++

- Caching - Faster Builds

- Image Optimization

- Minification of file

- Bundling - It bundles all files into one file

- Compressing

- Consistent Hashing

- Code Splitting

- Differential Bundling - support older browsers

- Host on HTTPS

- Tree Shaking - Remove Unused code

- Different dev and production bundles

- Chunking | Code Splitting | Lazy Loading | Dynamic Bundling | On Demand Loading - Break down apps into smaller logical chunks

# Foodiez

Header

- Logo

- Nav Items

  Body

- Search

- Restaurant Container - Restaurant Card - Img - Name - Star Rating, Delivery Time - Cuisines

  Footer

- Copyright

- Links

- Address

- Contact

# React Hooks

(Normal JS Utility Functions)

- useState()

- useEffect()

# Redux Toolkit

- Install @reduxjs/toolkit and react-redux

- Build our store

- Connext our store to our app

- Slice (cartSlice)

- dispatch(action)

- Selector

# Types of Testing (Developer)

- Unit Testing

- Integration Testing

- End to End Testing - e2e Testing

# Setting up Testing in our App

- Install React Testing Library

- Installed Jest

- Installed Babel Dependencies

- Configure Babel

- Configure Parcel Config file to disable default Babel Transpilation

- Jest - npx jest --init

- npm install --save-dev jest-environment-jsdom

- Install @babel/preset-react to make JSX work in test cases

- Include @babel/preset-react inside my babel config

- Install @testing-library/jest-dom