- 🤖 Introduction
- ⚙️ Tech Stack
- 🤸 Quick Start
- 📸 Screenshots
- 👤 Author
A cutting-edge, fullstack open-source flight search application, developed using the MERN stack (MongoDB, Express, React, Node.js) with TypeScript for seamless performance and scalability.
If you find it helpful, don't forget to give it a ⭐️⭐️⭐️ to show your support. Fork this repo if you want to contribute ✨ and take this project to the next level!
This project was created using the following technologies.
- React.js ➛ JavaScript library that is used for building user interfaces specifically for single-page applications
- React Query ➛ A powerful data-fetching and state management library that simplifies server state management in React applications.
- Typescript ➛ A superset of JavaScript that adds static types, enhancing code quality, maintainability, and developer productivity by catching errors during development.
- Material UI ➛ A popular React UI framework that provides pre-designed components to help create responsive and accessible web applications.
- react-hot-toast ➛ A React library for displaying customizable, lightweight toast notifications, designed to improve user experience with non-intrusive feedback.
- axios ➛ A promise-based HTTP client that simplifies making requests to APIs and handling responses, with built-in support for interceptors, automatic JSON transformation, and error handling.
- react-icons ➛ A React library that provides a collection of customizable icons from popular icon sets, making it easy to include scalable, vector icons in your React applications.
- formik ➛ A popular library used for building forms in React, which simplifies form state management, validation, and error handling.
- yup ➛ A JavaScript schema validation library often used with Formik to provide validation schemas for form data.
- nprogress ➛ A lightweight JavaScript library that provides a progress bar effect for loading states, commonly used in navigation transitions.
- @mui/x-date-pickers ➛ A set of Material UI-based date and time pickers for React applications.
- express ➛ A minimal and flexible Node.js web application framework that provides robust features for web and mobile applications.
- express-async-handler ➛ A middleware wrapper for handling exceptions inside async express routes and passing them to the express error handlers.
- mongoose ➛ An Object Data Modeling (ODM) library for MongoDB and Node.js, providing a schema-based solution to model application data.
- dotenv ➛ A zero-dependency module that loads environment variables from a .env file into process.env, enabling secure configuration management.
- MongoDB - It provides a free cloud service to store MongoDB collections.
Follow these steps to set up the project locally on your machine.
Prerequisites
Make sure you have the following installed on your machine:
Cloning the Repository
In order to run this project locally, simply fork and clone the repository or download as zip and unzip on your machine.
- Open the project in your prefered code editor.
- Go to terminal -> New terminal (If you are using VS code)
- Split your terminal into two (run the client on one terminal and the server on the other terminal)
In the first terminal
$ cd client
$ npm install (to install client-side dependencies)
$ npm run start (to start the client)
In the second terminal
- cd server and set environment variables in config.env under ./config
- Create your mongoDB connection url, which you'll use as your MONGO_URI
- Supply the following credentials
# --- config.env ---
NODE_ENV = development
PORT = 5000
URI =http://localhost:3000
MONGO_URI =
FLIGHTS_API_URL = https://api.schiphol.nl/public-flights
FLIGHTS_APP_ID =
FLIGHTS_APP_KEY =
# --- Terminal ---
$ npm install (to install server-side dependencies)
$ npm run start (to start the server)
👤 Author
- Github: @Muhammet-Yildiz
- Linkedin: @muhammet-yildiz
- Email: [email protected]