Clone the repository to your local machine.
git clone https://github.com/miiakivi/helsinki-city-bike-app.git
Before running the app you need to download the Helsinki city bicycle journeys and station data to the project. The data is owned by City Bike Finland.
cd server
npm run download-data
This app uses a local database to store the data. For that reason, you need to have MongoDB on your computer before you can run this app.
If you are not comfortable using the terminal you can download MongoDB Compass from here.
Install MongoDB by following these instructions:
- Install Homebrew
/bin/bash -c "$(curl -fsSL https://github.com/raw/Homebrew/install/HEAD/install.sh)"
- Find the MongoDB tap
brew tap mongodb/brew
- Install MongoDB
brew install mongodb-community
- Start MongoDB
brew services run mongodb-community
- Verify that MongoDB is running
brew services list
- When MongoDB is running, you should be able to access the Mongo shell with the
mongosh
command. - Now your local MongoDB should be running 🎉
- More info on installing MongoDB here.
Follow these instructions.
If you installed MongoDB via Homebrew, you are good to go 🎉!
If you installed MongoDB via Compass, you need to configure it.
- Open MongoDB Compass.
- Set
HostName
tolocalhost
andPort
to27017
.- These values are the default for all local MongoDB connections
- Press connect.
- Now you can browse the database hslBicycles and see the data after you first run the app.
Before running app, make sure you have downloaded the data to server/src/resources
folder and configured MongoDB.
cd server && npm install
npm run add-data
You should see messages telling how many documents are being validated and added to database. This should take few minutes to complete. After you see this messages all the data is added to database:
🎊 Stream ended!! All journeys added to db!
npm run start
cd client && npm install && npm start
After that you can access the app at http://localhost:3000
.
This project is a full-stack JavaScript application that showcases data from journeys made with Helsinki Region Transport’s (HSL) city bicycles between 1.5. - 31.7.2021, along with information about HSL bicycle stations.
The application utilizes the npm console command to download CSV files from the web and save them to the server/src/resources directory
. To ensure data integrity, the app includes a command that validates the downloaded data and adds it to a local MongoDB database. The database consists of two collections: journeys and stations.
Once the database is created and populated, the application can be accessed locally at http://localhost:3000
. The client-side of the application retrieves data from the database using GraphQL queries.
This project serves as my first major full-stack application, combining Node.js on the backend and React on the frontend. The primary objectives were to gain practical experience in developing a full-stack JavaScript project and to further my understanding of GraphQL, a powerful query language for APIs. To handle data storage and retrieval, a local MongoDB database was utilized.
One of the main focuses of this project was to practice validating and handling data, particularly data sourced from CSV files. By implementing data validation processes, the application ensures the integrity and accuracy of the information stored in the database.
Additionally, this project provided an opportunity to enhance my UI design skills by utilizing Figma, a popular design tool. The goal was to create a larger-scale application while maintaining a clean and organized codebase.
The client interface provides various data points related to the journeys and stations. Users can access the following information:
- List of all journeys: Displaying all recorded journeys.
- List of all stations: Showing information about every station, including:
- Total number of journeys starting from a specific station.
- Total number of journeys ending at a specific station.
- The average distance of a journey starting from the station.
- The average distance of a journey ending at the station.
- The top 5 most popular return stations for journeys starting from the station.
- The top 5 most popular departure stations for journeys ending at the station.
- Client
- Apollo Client
- React
- CSS3
- Bootstrap
- Figma
- Server
- MongoDB
- Mongoose
- MongoDB Compass (Local database)
- Apollo Server
- GraphQL
- JavaScript (ES6)
- Babel
- csv parser
- MongoDB
- add tests
- show top 5 stations with most journeys
- Journey list view
- Filter journeys distance
- longest to shortest
- shortest to longest
- Filter journeys duration
- longest to shortest
- shortest to longest
- Filter journeys distance
- Single station view
- show all journeys by month
- Filter all the calculations for the station by month
- create a search bar for stations and journeys
- create a filter for stations and journeys
- UI for adding journeys/stations