Flights Info

This is a flight management app built with React, MUI Joy, Jotai state management and 3 of TanStack tools. The app includes pages such as login, signup, landing page, and dashboard, and is designed to be fully mobile responsive with infinite scroll.

Features

• Authentication: Secure login and signup functionalities with form validation.
• URL synced Dashboard: A central hub to manage and view detailed flight information shown with TanStack React Table.
• Infinite Scroll & Responsive Design: Optimized for both desktop and mobile devices, ensuring a seamless experience across all screen sizes.
• State Management: Utilizes Jotai & TanStack Query for efficient and simple state management across the app.
• Form Handling: Implements TanStack React Form for robust form management, including image file uploads with previews.

Screenshots

Desktop View

• Landing page
  

• Signin Light Mode
  

• Signin Dark Mode
  

• Dashboard
  

• Dashboard Flight Selection
  

• Flight Form
  

• Image Preview
  

• Signup
  

Mobile View

• Mobile View
  

• Mobile Sidebar
  

• Signin Mobile Light
  

• Signin Mobile Dark
  

Getting Started

Follow these instructions to set up the project locally.

Prerequisites

• Node.js: v18 or later is recommended.
• Package Manager: npm or yarn. flights server does not work with yarn pnp or pnpm

Installation

1. Clone the repository:

   git clone https://github.com/YusefNsar/flights-info.git
   cd flights-info

2. Install dependencies:

   npm install
   # or
   yarn install

3. Start the flights server:

   npm run server
   # or
   yarn server

4. Start the development server:

   npm start
   # or
   yarn start

5. Access the app:

   Open your browser and navigate to http://localhost:5173 to start using the app.

Built With

• React - A JavaScript library for building user interfaces.
• Material UI Joy - A modern UI component library.
• Jotai - A state management library for React.
• TanStack Query (React Query) - Powerful data-fetching and caching tools for React.
• TanStack Table (React Table) - Headless UI for building tables and grids.
• TanStack Form (React Form) - Utilities for managing forms in React.
• Axios - A promise-based HTTP client for making API requests.