{"id":15576222,"url":"https://github.com/ct83/surway","last_synced_at":"2025-09-16T18:31:27.586Z","repository":{"id":42244653,"uuid":"213110468","full_name":"CT83/SurWay","owner":"CT83","description":"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.","archived":false,"fork":false,"pushed_at":"2023-01-05T12:31:11.000Z","size":23007,"stargazers_count":12,"open_issues_count":37,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-03T19:11:04.911Z","etag":null,"topics":["charts","data-analysis","data-visualization","data-visualization-project","docker","docker-compose","express","node","nodeexpress","nodejs","react","react-chartjs-2","react-charts","react-project","react-projects","reactjs","reactjs-demo"],"latest_commit_sha":null,"homepage":"https://sur-way.herokuapp.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CT83.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-06T04:51:19.000Z","updated_at":"2024-09-09T01:14:34.000Z","dependencies_parsed_at":"2023-02-04T04:47:30.183Z","dependency_job_id":null,"html_url":"https://github.com/CT83/SurWay","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CT83/SurWay","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CT83%2FSurWay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CT83%2FSurWay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CT83%2FSurWay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CT83%2FSurWay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CT83","download_url":"https://codeload.github.com/CT83/SurWay/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CT83%2FSurWay/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275464770,"owners_count":25469881,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-16T02:00:10.229Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["charts","data-analysis","data-visualization","data-visualization-project","docker","docker-compose","express","node","nodeexpress","nodejs","react","react-chartjs-2","react-charts","react-project","react-projects","reactjs","reactjs-demo"],"created_at":"2024-10-02T18:43:53.800Z","updated_at":"2025-09-16T18:31:25.917Z","avatar_url":"https://github.com/CT83.png","language":"JavaScript","readme":"# [SurWay](sur-way.herokuapp.com)\n\n#### [View Live Version!](https://sur-way.herokuapp.com) - sur-way.herokuapp.com\n\nSurWay 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.\n\n* Frontend - [React](https://reactjs.org/), [Material-UI](https://material-ui.com/), [React ChartsJS 2](https://www.npmjs.com/package/react-chartjs-2)\n* Backend - [NodeJS Express](https://expressjs.com/)\n* Database - [MongoDB](https://www.mongodb.com/)\n* Hosting - [Heroku](https://www.heroku.com/) - Free Tier\n* Local Development - [Docker](https://www.docker.com/) and [Docker Compose](https://docs.docker.com/compose/)\n\n## Setup\n\n1. Database - MongoDB -  Docker Compose\n   * `docker-compose up --build`\n2. Backend - NodeJS Express\n   * `npm install`\n   * `node server.js`\n3. Frontend - React\n   * `cd react/sur-way-app \u0026\u0026 npm install`\n   * `npm start`\n\n\n\n\n\n\u003chr\u003e\n\n\u003chr\u003e\n\n\u003e Below is an excerpt from the Blog I wrote about the Making of SurWay, you can find the original post [here](https://www.linkedin.com/pulse/surway-survey-site-drivers-my-first-react-app-rohan-sawant/)\n\n#### SurWay\n\nI completed work on my first React App a few days ago, the App is called SurWay.\n\nThis is a survey 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.\n\n\u003e This took way longer than expected to complete. The general idea was to add several features like browser finger printing 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. \n\nI had been trying to make up time to learn JavaScript, specifically Node and React for the better part of the last year. I have gone through several learn in 4-hour courses and a million tutorials but, as always actually making a project with JS was something which helped me learn things even better. I even wrote about it here in - [The 'I think I have got the hang of it' Moment - React](https://dev.to/rohansawant/the-i-think-i-have-got-the-hang-of-it-moment-react-5025)\n\nThis is a general overview of how I went about building it, with some useful resources and some screenshots. \n\n#### Step 1 - Set up Node and React\n\nI 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.\n\n#### Step 2 - Node, React, Mongo - Making them all talk to each other.\n\nI first got a basic submit form working \n\n![screencapture-localhost-3000-2019-10-05-19_02_13](images/screencapture-localhost-3000-2019-10-05-19_02_13.png)\n\nThen I created the DB Schema in Node, added the required routes in [Express](https://expressjs.com/), tested them with [PostMan](https://www.getpostman.com/), I configured the frontend with React to ensure forms were submitted successfully.\n\n![postman](images/postman.png)\n\n![screencapture-localhost-3000-2019-10-06-10_26_48](images/screencapture-localhost-3000-2019-10-06-10_26_48.png)\n\nIf 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](https://medium.com/javascript-in-plain-english/full-stack-mongodb-react-node-js-express-js-in-one-simple-app-6cc8ed6de274)\n\n#### Step 3 - Displaying the into Charts.\n\n![screencapture-localhost-3001-thanks-2019-10-12-22_42_57](images/screencapture-localhost-3001-thanks-2019-10-12-22_42_57.png)\n\nAfter digging around for a way to implement charts in React I stumbled across [react-chartjs-2](https://www.npmjs.com/package/react-chartjs-2). I retrieved the data from my MongoDB using Express and Node and displayed the charts in React.  \n\n#### Step 4 - Making it pretty!\n\nI decided to use [material-ui](https://material-ui.com/) to make designing things easier. After digging around for a color pallet I found [this ](https://material-ui.com/system/palette/)right under my nose.  \n\nMy App now started to look like this. \n\n_Form Page_\n\n![home](images/home.png)\n\n_Results Page\n\n![report](images/report.png)\n\n\n\n### [View Live Version!](sur-way.herokuapp.com) \n\n\n\n#### Bonus!\n\nI built this app on one of my trips out of the city. \n\nHere’s a special _learning-coding-in-car-gif_ for you!\n\n![car-code](images/car-code.gif)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fct83%2Fsurway","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fct83%2Fsurway","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fct83%2Fsurway/lists"}