Miracle Flights Front End Application

Getting Started

Prerequisites

• Node.js
• npm
• Git
• TypeScript

Installation

1. Clone the repo

   git clone

2. Install NPM packages

   npm install

3. Run the application

   npm start

4. Open the application in a browser

   http://localhost:5173/

Other Scripts

1. Run the jest tests

   npm test

2. Auto format the code

   npm run prettier:format

3. Check the code for formatting issues

   npm run prettier:check

4. Check for linting errors in the code

   npm run lint

Project Structure

The project is split into the following folders:

📁 src
├── 📁 components
├── 📁 context
├── 📁 interfaces
├── 📁 layout
├── 📁 pages
└── 📁 utils

Current Project Flow Diagram:

---

Tech Stack and Details

React

This project uses React as the front end framework. React is a JavaScript library for building user interfaces. It is used to build the front end of the application. It is used to build the components and pages of the application.

TypeScript

This project uses TypeScript as the programming language. TypeScript is a superset of JavaScript that adds types to JavaScript. It is used to add types to the JavaScript code in the project. It is used to add types to the components, pages, and context in the project.

Clerk Authentication

This project uses Clerk for authentication. Clerk is a service that provides authentication for applications. It is used to authenticate users in the application. It is used to create accounts, log users in, and log users out.

React Router DOM

This project uses React Router DOM for routing. React Router DOM is a routing library for React. It is used to create routes for the application. It is used to navigate between pages in the application.

Jest

This project uses Jest for testing. Jest is a JavaScript testing framework. It is used to test the components, pages, and context in the project.

Cypress

This project uses Cypress for end to end testing. Cypress is a JavaScript end to end testing framework. It is used to test the application as a whole.

Husky

This project uses Husky for git hooks. Husky is a tool that allows you to run scripts when certain git events occur. It is used to run scripts when you commit code and push code. It is used to run the tests when you commit code and push code.

ESLint

This project uses ESLint for linting. ESLint is a tool that analyzes code for errors and style issues. It is used to analyze the code in the project for errors and style issues.

Prettier

This project uses Prettier for formatting. Prettier is a tool that formats code. It is used to format the code in the project.

Vite

This project uses Vite as the build tool. Vite is a build tool for JavaScript applications. It is used to build the application. It is used to run the application in development mode.

Vercel (deployment)

This project uses Vercel for deployment. Vercel is a service that provides hosting for applications. It is used to host the application.