@jokosanyang - Scrum master
@tloth - UX/UI lead
@fweddi - Operational developer
@rohansss - Quality assurance lead
- git clone this repo
- in the terminal run
npm ito install all dependencies - you'll need to create a
.envfile in the root and add the environment variables for:- DATABASE_URL
- TEST_DATABASE_URL
- SECRET
- run
npm startand view on localhost:7000 in your browser
Note: You can run npm test to see our tests and npm run start:live to run the server with nodemon.
Note: You can run the file src/model/scraping/inserter.js to populate a locally hosted DATABASE_URL with data.
The problem we'd like to solve:
Drinking the recommended 2 litres of water a day means you need to use the toilet often. It can be especially inconvenient when you're out in the city and away from a toilet. It would be nice if you could track down the nearest public toilet, whether it be a McDonald's, a portapotty, or a free museum. An added bonus would be if the app could tell you how much the toilet costs if not free, and give it a cleanliness rating.
Features include: the ability to filter out paid, non-accessible or toilets without baby-changing facilities, map with directions, and a basic rating system.
Using Agile methodology, four developers worked on the app over three weeks consisting of a design week and a two week build sprint, involving user research and testing at each stage.
This project is hosted on Heroku: https://tinkl.herokuapp.com/
Main user journey: As a user, I want to find my closest suitable toilet ASAP when I'm out and about in London.
User stories: As a user, I want to see the main page of the app on load. As a user, I want to choose how I input my location. As a user, I want to select toilets that fit my needs. As a user, I don't want to select my filters every time. As a user, I want to be able to easily navigate between pages. As a user, I want to get a list of toilets. As a user, I want directions to a particular toilet.
Stretch goals: As a user, I want to be able to check a toilet's opening hours. As a user, I want to be able to add a new toilet to the app. As a user, I want to be able to edit incorrect toilet info. As a user, I want to see the nearby toilets in a map. As a user, I want to view reviews of each toilet to determine its cleanliness before visiting. As a user, I want to be able to leave a review of a toilet after visiting it.
User research and protopyping
For the first week of the project, we focused on:
- discovery and definition workshops on the problem and solutions
-
user research and testing
- User Research
- general anxiety about using customer toilets
- users strongly against paying for toilet use
- User Research
-
designed a prototype using Figma
Planning and design
For the first week of building, our goal was to finalise the design and complete a very minimal viable product(MVP). After planning, we broke the tasks down into front-end and back-end issues and tackled both ends simultaneously, switching pairs regularly to ensure every team member worked on every part of the code.
* set up server
* set up handlebars
* add functionality to pages
* basic CSS
* try and struggle with data scraping
Product completion and bug fixing
* manage to scrape data
* transfer data from .json to database
* make queries to database
* make it look :okay:
* PWA
* fix bugs
* scrape data again
* user testing
- using Promise All effectively
- making sure that all inputs and buttons were accessible
- scraping data from a hostile API
| Languages | Testing/CI | Frameworks/Libraries | Other |
|---|---|---|---|
| HTML | Tape | Node.js | Heroku |
| CSS | Supertest | Handlebars | PostgreSQL |
| JavaScript | Travis | Express | Nodemon |