https://github.com/adityasharma7/trips-dashboard

https://github.com/adityasharma7/trips-dashboard

Last synced: about 21 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/adityasharma7/trips-dashboard
• Owner: adityasharma7
• License: apache-2.0
• Created: 2024-06-08T10:33:47.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-06-13T05:33:36.000Z (4 months ago)
• Last Synced: 2024-06-13T08:59:47.934Z (4 months ago)
• Language: JavaScript
• Size: 396 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Trips Dashboard

The trips dashboard show various trips which are going through various vendors like Gati, Bluedart etc.

## Screenshot

Dashboard:

![image](https://github.com/adityasharma7/trips-dashboard/assets/15027245/403d3d34-92e5-43ac-92e4-c51b516ec0b8)

Update status:

![image](https://github.com/adityasharma7/trips-dashboard/assets/15027245/7ec3148a-f973-40e8-bf89-ad3257c0311a)

Add Trip

![image](https://github.com/adityasharma7/trips-dashboard/assets/15027245/4004e4aa-2c52-4327-b87e-c062679525c0)

Add Trip with validations:

![image](https://github.com/adityasharma7/trips-dashboard/assets/15027245/359f0a21-cfd0-4495-9160-a58a643573a4)

## Walkthrough

[Link](https://youtu.be/RqgAm55FE3Y)

## Setup Instructions

1. Open a Terminal window

2. Clone app using the command: `git clone https://github.com/adityasharma7/trips-dashboard.git`

3. Go to the trips-dashboard directory using command: `cd trips-dashboard`

4. Run following command to download dependencies

    `npm i`

5. To run the app in browser use the command: `npm run start` (App will be available at http://localhost:3000/)

5. To build the app use the command: `npm run build`

## Dockerfile

`docker run -p 3000:3000 my-parcel-app`

## Docker compose

`docker-compose up --build`

## Libraries used

- [React](https://react.dev/)

- [Parcel](https://parceljs.org/) - Bundler

- [Redux](https://redux.js.org/) - State management

- [Tailwind CSS](https://tailwindcss.com/) - CSS Framework

- [Luxon](https://moment.github.io/luxon/#/) - Processing date time

- [React Date Picker](https://www.npmjs.com/package/react-date-picker) - Date time input

- [React Circular Progressbar](https://www.npmjs.com/package/react-circular-progressbar) - Progress bar - dashboard

- [React Hook Form](https://react-hook-form.com/) - Form Validations

- [React Modal](https://reactcommunity.org/react-modal/) - Modal

## Features

## TODO

- Sorting on all the columns (code is generic and supports sorting on multiple field, need to bind on UI)

- Fix the issue with the date time picker having UI issue with modal

- Add toast for success and error messages

- Add pagination or infinite scroll on the list page

- UI for the trip stats could be improved

- Unit test