Uber-like application for roadside assistance service, using React (create-react-app), Material-UI for frontend, and Typescript Node.js (NestJS) with PostgreSQL for backend.
When installing PostgreSQL, setup according to these configs:
Host: localhost
Port: 5432
Username: postgres
Password: postgres
Also, create a new database named test.
1. npm install
2. Create a .env file in /server
DB_HOST=localhost
DB_USERNAME=postgres
DB_PASSWORD=postgres
DB_PORT=5432
DB_NAME=test
3. Create a .env file in /client
REACT_APP_GOOGLE_MAPS_API=XXXXXXXXXXXXXXX
Substitute this with your Google Maps API key. Note that you must enable the Places API service. This is used when the user types in the address, Google Maps Places Autocomplete API will autocomplete / autosuggest the filled-in address.
4. Open 2 terminal. Navigate to /client in 1 terminal and /server in the other one.
5. npm start in 2 terminals.
Optional
- Populate test data:
Open a new terminal and navigate to /server. Run
psql -U postgres test < full_test.bak
This will populate the database with 100 customer and roadside professional accounts, 1000 roadside service requests and payment transactions.
- View admin dashboard:
First, make a POST request to localhost:3001/api/auth/register with this JSON object (body):
{
"email": "[email protected]",
"password": "123",
"userType": "admin"
}You can use Postman to do so. You can also choose any email and password combination so that a new admin account is created. (the credential above is used for the deployed version on Heroku). You can log in using this admin credentials afterwards and navigate to the Dashboard page to view Data tables related to the information in the database.
A web application which provides roadside assistance services. These services provide assistance to motorists whose vehicles have suffered a mechanical failure (e.g.flat batteries, flat tyres, towing, locked out or emergency fuel delivery) that leaves the driver stranded on the road. Customers can choose either:
- Membership subscription – customers will pay a fixed membership fee annually and are entitled to unlimited roadside assistance callouts. This is similar to NRMA services.
- Pay-on-demand – customers will pay per service use. When the need emerges (e.g. their car broke down), they will request assistance through the system. Prices are calculated and presented to customers up front. This is similar to Uber-style but for roadside assistance.
Once a customer makes a service request, it will be broadcasted to all the registered professionals who are available and capable to provide this service in nearby area. They will receive information about the problematic vehicle (e.g. location, plate number, model, etc.), instructions and payment via the system. They can then decide whether they accept the request. The customer can see how many responders are in the area via the system and which one accepts their request. The customer can then choose from the accepted responders (e.g. based on ratings, reviews and prices). Once the service is completed, the customer can rate and review it using the system. Payment will be deducted from their credit card and will be credited to the professional’s account.
Please refer to this document for more information about the functionality and the user interface of the web app.
- create-react-app - React user interface library.
- NestJS - A progressive Typescript Node.js framework for building efficient, reliable and scalable server-side applications.
- PostgreSQL - Database
- Material-UI - Material Design components for React
- downshift - React Autocomplete Dropdown
- axios - HTTP client
- moment - Formatting and displaying dates and times
- mui-datatables - Datatables for React using Material-UI
- TypeORM - ORM for Typescript and PostgreSQL
- Hieu Chu: Frontend
- Long Hung Nguyen: Backend
Distributed under the MIT License. See LICENSE for more information.