FleetLink

FleetLink is a personal project to handle a fleet of trucks.

This project is powered by React Router v7 and React Query.

How to run this project

You'll need:

• Git;
• NodeJS 22+;
• npm 10+;
• Firebase account;
• Mapbox account;

Step 1.

Clone this repo.

git clone [email protected]:AgtLucas/FL.git

Step 2.

Create a .env file and add your Firebase keys and Mapbox token, following the template below:

VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=
VITE_MAPBOX_TOKEN=

Step 3.

Make sure you are in the right directory and install the dependencies:

npm i

Step 4.

Run the project with:

npm run dev

Open the url on your browser: http://localhost:5173/

Since you aren't logged yet, you'll be redirected to the /login page. From there you can go to the /signup page, and create your account.

Or, if you prefer you can create an account directly on Firebase's dashboard, under the Authentication section.

Step 5.

Have fun! :)

You can start by adding a truck, then a driver, then a load.

Technical Decisions

Since React Router has an opinionated folder structure, I tried to follow that as much as possible.

This app contains 3 main models; trucks, drivers and loads. With that in mind, all the business logic related to them lives inside the app/models/[modelName]/. Inside each folder, you'll find:

• [modelName].firestore.ts - for all Firebase api related operation;
• [modelName].keys.ts - keys factory for React Query;
• [modelName].queries.ts - React queries hooks;
• [modelName].schema.ts - yup schema for validation form validation;
• [modelName].types.ts - well, types;

In some specific cases you will also find [modelName].helpers.ts.

I also created two extra models: relations and logistics.

The relations model is where I store some helpers that need to rely on all 3 main models.

And the logistics model is where all the Mapbox operations happen.

Besides the aforementioned React Router and React Query, this project uses Zustand for state management. I choose it over the other options available because I've never used it before, so I took the opportunity to learn something new. However, this application is not that complex in terms of state management, so I'm only using it for the Auth.

Regarding the business rules, I found some of them open to interpretation, so I took the liberty to, well, interprete them.

For instance:

• when creating a load, you are required to assign a truck to the load, and this truck must have a driver assigned to it, plus, the truck's capacity should be able to handle the load's weight.
• you can't delete a driver and/or a truck that's assigned to a load that has its status set to "In route" or "Planned".

For the styling, since Tailwind was a requirement, I decided to use its default theme. The icons are from the Lucide React icons library.