SurWay is a survey/polling website for cab drivers where they can report their typical work hours and which company they work for, this data is then stored anonymously and used to generate charts and insights.
- Frontend - React, Material-UI, React ChartsJS 2
- Backend - NodeJS Express
- Database - MongoDB
- Hosting - Heroku - Free Tier
- Local Development - Docker and Docker Compose
This took way longer than expected to complete. The general idea was to add several features like browser fingerprinting and SSO to ensure that a single user could be allowed to cast a vote only once. But, I decided to postpone these features for a future release.
This is a general overview of how I went about building it, with some useful resources and some screenshots.
I used create-react-app and some other starter templates to create a boilerplate, then I used Docker and Docker-Compose to quickly spin up a local MongoDB instance for me to work on.
I first got a basic submit form working
If you want an in-depth tutorial about how I went about doing that follow this - Let’s build a full stack MongoDB, React, Node and Express (MERN) app
After digging around for a way to implement charts in React I stumbled across react-chartjs-2. I retrieved the data from my MongoDB using Express and Node and displayed the charts in React.
My App now started to look like this.
I built this app on one of my trips out of the city.
Here’s a special learning-coding-in-car-gif for you!