/Flight-Management-Website

Project is developed using React.js

Primary LanguageJavaScript

Flight Management Website

In this project of flight management I've learnt how checkin of passengers can be done and inflight services can be added for them. The project involves 2 users-staff member or a admin.As a admin he can add passengers,update passenger details, add ancillary services for flights. what I've majorly learnt in this is:

  • Use of Material UI and Flex layout for designing the required layout.
  • Use of Scss/css while giving the css to html pages.
  • Maintaining proper folder structure for the better understanding.
  • Use of Containers,Class components, React hooks and functional components.
  • Use of enzyme and jest for unit testing of components.
  • Optional use of service workers for showing offline capability.
  • Proper use of redux for maintaining state across application.
  • Use of Lazy loading of components.
  • Use of proper routing and protecting routes using Higher order components.
  • Use of JSON server for serving backend.
  • Tech Stack used :
    • Frontend : HTML-5, CSS-3, JavaScript ES-6, Bootstrap-5, React.js, Redux, Material-UI, SCSS.
    • Backend : JSON-Holder.

Note for the project

  • Do npm start to run start the react application. Do json-server --watch db.json --port 3001 in seperate cmd to run json-server for backend.
  • If there is any package dependency failure in case of npm start do npm install
  • Once the App is running do login by clicking on the Login Button. Without Login You cant proceed further.Make sure your internet is working properly.
  • For unit testing run npm test. Unit Testing has been done for one component header.js as per the required criteria.
  • Please delete node_modules folder and package.json file from this in case an error occurs while compiling. After that do npm start which will automatically detect the packages used in this and install the same along with new package.json.
  • Do use Flow Language Support extension incase this file doesn't work. While Flow language support extension is active please disable the TypeScript and JavaScript Language Features extension.

Implementation video : https://drive.google.com/file/d/1LW5NUEBDpQJrdmrHsQSp15qkiCQLsKjK/view?usp=sharing