kbooz / cosi-exercise

Cosi test

This project was bootstrapped with Create React App for the Frontend Engineer exercise from COSI.

Development

Installation

In the project root, run the following command

yarn

or

npm i

.env file

Create a .env file in the root of the project with the following structure:

REACT_APP_API_URL=
REACT_APP_TOKEN=

The content will be sent to the recruiter's email

Configuring code editor

If you're using Visual Studio Code, please install the recommended extensions.

It is also enabled by default project-wise linting fix and formmating on save.

If you're using another editor, it's recommended to install any ESLint, Prettier and EditorConfig plugins on your preferable code editor for linting and formmating

Available Scripts

In the project directory, you can run:

yarn start or npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test or npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build or npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Basic Structure

.
├── README.md
├── package.json
├── public
├── src
│   ├── app
│   │   ├── index.tsx           - Main screen
│   │   ├── components          - Reusable components
│   │   ├── routes              - Internal routes
│   │   │   ├── SearchFlight
│   │   │   ├── Success
│   │   │   └── UserInfo
│   │   ├── services            - API Services
│   │   └── types               - Reusable Typings
│   └── index.tsx               - Root React file
└── .vscode                     - VSCode related configurations

Dependencies

As said before, the project was created using Create React App with Typescript, and utilizes the following dependencies:

• Material-Ui core and lab - components libraries
• Formik - for handling form states
• Yup - for providing schema validation for Formik
• Axios - for handling API requests
• React-Query - for handling the requests using Axios

For testing uses the out-of-the-box testing library React Testing Library with Jest, and uses axios-mock-adapter for mocking axios requests.

For code linting and formatting in the development, it utilizes the out-of-the-box dependency ESLint for linting, Prettier and Editorconfig for styling and formmating

Todo

• Implement Material-UI's Tree Shaking for reducing bundle size

Contact

Feel free to get in touch with me via Twitter or create an issue!