FoodOnline Application with Parcel Bundler

This is a description of the food application that I have built using Parcel bundler. The application includes features such as image optimization, minification, bundling, compressing, consistent hashing, code splitting, differential bundling for older browsers, error handling, HTTPS support, tree shaking to remove unused code, and more.

Technologies Used

• React Hooks
• Redux Toolkit
• React Testing Library
• Parcel Bundler
• Hot Module Replacement (HMR)
• Caching for faster builds

Features

• Header
• Logo
• Navigation Items
• Body
• Search function
• Restaurant Menu
  • Image
  • Name of Restaurant, Star Rating, Cuisine, Delivery Time
• Footer
• Links
• Address
• Contact

React Hooks

• useState() - Superpowerful State Variables in React
• useEffect()

Routing in Web Apps

1. Client Side Routing
2. Server Side Routing

Export/Import Types

1. Default Export/Import

   export default Component; 
   import Component from "path";

2. Named Export/Import

   export const Component; 
   import {Component} from "path";

Testing

• Types of Testing
  • Unit Testing
  • Integration Testing
  • End to End Testing (e2e testing)
• Setting up Testing in the App
  • Install React Testing Library
  • Install Jest
  • Configure Babel
  • Configure Parcel Config file to disable default Babel transpilation
  • Initialize Jest - npx jest --init
  • Install jsdom library
  • Install @babel/preset-react to make JSX work in test cases
  • Include @babel/preset-react in the Babel config
  • Install @testing-library/jest-dom

Development Environment

• Parcel Dev Build
• Local Server
• Code Splitting
• Diagnostic
• Different dev and prod bundles