https://github.com/saikiran76/foodonline

Order your food online and your needs on your way at your doorstep. A Frontend application like Swiggy built with love using React.
https://github.com/saikiran76/foodonline

javascript react reactjs tailwindcss

Last synced: 3 days ago
JSON representation

Order your food online and your needs on your way at your doorstep. A Frontend application like Swiggy built with love using React.

• Host: GitHub
• URL: https://github.com/saikiran76/foodonline
• Owner: saikiran76
• License: mit
• Created: 2024-02-14T14:28:21.000Z (11 months ago)
• Default Branch: master
• Last Pushed: 2024-04-16T05:13:01.000Z (9 months ago)
• Last Synced: 2024-11-08T17:15:36.158Z (about 2 months ago)
• Topics: javascript, react, reactjs, tailwindcss
• Language: JavaScript
• Homepage:
• Size: 57.1 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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**

   ```javascript

   export default Component; 

   import Component from "path";

   ```

2. **Named Export/Import**

   ```javascript

   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**