Anson's Portfolio: Real-time Taxi App
Last update: Jun-2021
Project Background
This is a simple taxi ride-sharing app developed using React-bootstrap, Python Django Channels and PostgreSQL. The main purpose of this demo app is to strengthen my practical skills in these frameworks, especially real-time WebSocket communications through Django Channels. The application design and program code are based on the online course from testdriven.io.
Application Architecture
The app is running on Docker container on AWS EC2 VM. The following diagram illustrates its architecture.
App Features Highlight
(1) Real-time alerts on trip requests - After a successful login, driver will be automatically subscribed to drivers channel. When riders submitted trip requests, all drivers will receive real-time pop-up toasts (implemented using React Toastify).
(2) Showing requested route on map - to ease riders verify the entered pick up and drop off addresses, the requested route will be showing on Google Map. This feature is implemented using React Google Maps Api and Google Directions Service.
(3) Real-time alerts on trip updates - rider will receive real-time pop-up toasts (implemented using React Toastify) when a driver picked up the trip request, coming to the pick up address, or arrived at the drop off address, etc.
Authentication
JSON Web Token (JWT) is used as the authentication strategy of the app. The tokens are generated by using Django REST Framework (DRF) library. The following diagram illustrates the fundamental workflow.
Back End Test - pytest
A set of pytest scripts are developed for the automatic testing of back end API. The scripts cover both http and WebSocket channels.
Front End Test - cypress
The front end automatic testing is performed by cypress scripts. cypress is a front end testing tool that enables developers and QA engineers to write faster, easier and more reliable tests.
Technology Stack
Category
Details
Back end
Python 3.9.1-slim-buster
Django 3.1.4
Django Channels 3.0.2
Django Channels Redis 3.2.0
Django REST Framework 3.12.2
Django REST Framework simplejwt 4.6.0
Front end
Node.js 15.4.0-alpine
react 17.0.2
react-bootstrap 1.4.0
react-router-bootstrap 0.25.0
react-google-maps 2.0.2
react-scripts 4.0.3
react-toastify 7.0.4
Google Directions Service
bootstrap 4.5.3
bootswatch 4.5.3
formik 2.2.6
Testing
pytest-asyncio 0.14.0
pytest-django 4.1.0
cypress 6.2.0
cypress-file-upload 4.1.1
faker 5.1.0
Database
PostgreSQL 13.3
IDE
PyCharm 2020.1.3 (Community Edition)
Deployment platform
Docker for Ubuntu Bionic 18.04
AWS EC2 Ubuntu Server 18.04
| Category | Details |
|---|---|
| Back end |
Python 3.9.1-slim-buster Django 3.1.4 Django Channels 3.0.2 Django Channels Redis 3.2.0 Django REST Framework 3.12.2 Django REST Framework simplejwt 4.6.0 |
| Front end |
Node.js 15.4.0-alpine react 17.0.2 react-bootstrap 1.4.0 react-router-bootstrap 0.25.0 react-google-maps 2.0.2 react-scripts 4.0.3 react-toastify 7.0.4 Google Directions Service bootstrap 4.5.3 bootswatch 4.5.3 formik 2.2.6 |
| Testing |
pytest-asyncio 0.14.0 pytest-django 4.1.0 cypress 6.2.0 cypress-file-upload 4.1.1 faker 5.1.0 |
| Database | PostgreSQL 13.3 |
| IDE | PyCharm 2020.1.3 (Community Edition) |
| Deployment platform |
Docker for Ubuntu Bionic 18.04 AWS EC2 Ubuntu Server 18.04 |