x

We use the latest technologies to provide the best experience!

Please download a newer version of your browser. Click to close

play icon

Cycle Mate 🚴 Enjoying our love for cycling together

Nina van Es, graduate of Class 42 presents her portfolio project made during the Codaisseur Academy.
Nina Petrouska Van Es
Student of Class 42 @ Codaisseur Full Stack Academy
08 September 2020

Cycle Mate 🚴 Enjoying our love for cycling together

🚀Check out the deployed version!🚀

What Cycle Mate is about

Cycle Mate is the perfect platform for cycle lovers who enjoy practising their favourite sport together with other people. Ever wanted to organize a cycle trip and make it possible for anyone to join, just for the fun of riding together? Cycle Mate is your new best mate! Organize cycle trips, join other people's trips, take part in the Cycle Mate community and ask questions or share your experiences on the message board... Anything to spread the love for cycling!

Table of contents

A little preview

Goals for this project

Cycle Mate is my portfolio project for the Codaisseur Academy, a bootcamp to become a fullstack developer. The goal was, in two weeks time, to:

  • Think of a concept that I would like to transform into an app
  • Build a backend and frontend for this app
  • Apply technologies I've learned in the previous months
  • But also apply new technologies that I have to explore on my own
  • Make clear documentation to present my app (wireframe, DB diagram, user stories, project board, clear Git version control)
  • Present it to my fellow students

Technologies used

Newly explored technology

Backend

  • Postgres Database
  • Sequelize (✨Many-to-many & ✨Multiple associations)
  • Express JS
  • Authorization with JSON Web Token
  • ✨Nodemailer
  • ✨Geocoding with LocationIQ API

Frontend

  • React
  • React-Redux
  • Axios
  • ✨MapBox for React
  • ✨Styled Components (CSS in JS library)
  • ✨Firebase storage for image upload

User stories

  • As a visitor I want to feel welcome and know what Cycle Mate is about, and be able to sign up as a user
  • As a user I want to see a list of cycle trips and be able to filter them
  • As a user interested in a particular trip, I want to see the details of that trip
  • As a user, I want to be able to join a trip that seems interesting to me, or undo this action if I change my mind
  • As a user, I want to be able to ask questions and have conversations with other users
  • As a user, I want to be able to create a topic on the message board
  • As a user, I want to be able to manage my account, organize a new trip and view my personal cycle agenda (all the trips I will participate in)

Wireframe

Go to wireframe

Project board

Go to project board

Database model

Go to database model

Git strategies

To make my work as transparent and correctable as possible, I:

  • Write clear commit messages
  • Make a new branch for each new feature and name them accordingly

Backend repository

Go to backend repo

Interested in joining the Academy?