Thank you very much for your interest in my work. It's the last project, a complete full stack project with Geekshubs Academy of the Full Stack Development Bootcamp 🚀. This is design of Mobility-API-Backend repository ( the ninth and last project of the course ).
The users hire a service to transport people from one place to another paying a price for it. The Users can register for the application, log in and access it. The next step is to create the mobility application for car drivers, to complete all the functions of the application. Relationships and migrations already exist in this database. The registered user can search for a destination, choose between different types of cars and make the trip. A driver responds to the request and picks up the passenger, once the trip is completed, they can rate the driver. Users must complete their profile and choose the method of payment. They can also access their travel history.
The rectangle with black font inside represent the moment after loggin / register The rectangle with red frame and shadow letter in red belong to Minimum Viable Product (MVP) At least the flow chart was completed totally. Several data were hard coded because the driver's side application is not yet ready.
To start writing code, several problems had to be solved. The design of the database, its relationships. The connection with the external api and how to get the necessary data to show in frontend. The frontend and backend stack.
The backend was built with Node, Express, TypeScript and MySQL database on a Docker container. In the frontend I had doubts whether to start with TypeScript or Javascript, but then I decided for Javascript always in React. React router dom to organize routes and Redux for global state management.
- Users
- Drivers
- Trips
- Cars
- Brands
- User
- Drivers
- Roles
Thats tables have relation between us.
Create three main tables, User, Driver and Trip. They are related to each other. The fields of the Trip table are: id, user id, car id, driver id, start location, destination, trip date, trip date start and trip date finish. The User table fields are: user name, email, password, role, phone, payment, address, work address, saved address, documents, message and location. The Driver table fields are: driver name, email, password, role, phone, score, car id, documents, driver message and location.
http://localhost:5174/register
http://localhost:5174/login
http://localhost:5174
http://localhost:5174/profile
http://localhost:5174
http://localhost:5174/managment
http://localhost:5174/managment
http://localhost:5174/managment
http://localhost:5174/register
http://localhost:5174/login
The whole project is designed with CSS without external libraries except the error managment external library. It is responsive on mobile, tablet or desktop and is very easy to configure in Dark 🌘 and Light ☀️ mode.
- Clone Repo
npm install -
Launch the project in your local device:
npm run dev
The app need google maps api key to work. Attach file .env.example
VITE_API_URL = http://localhost:XXXX/
VITE_GOOGLE_MAPS_API_KEY=XXXX
I decided to use google maps plataform libraries to get localization and routes.
https://www.npmjs.com/package/googleapis
I choose React-Toasty to show error messages
https://www.npmjs.com/package/react-toastify
Create Driver mobility app to pick up a trip from a user, edit driver profile, send a message to the passenger and monitor the benefits obtained from work. Continue to build components, buttons and inputs from the respective endpoints created in the backend and think about future functionality. Refactoring and testing. Add users & drivers image to database.
