Backtrails: Project Overview

In Month 2 of the Praxis program, we’re encouraged to create a project that demonstrates our skillset and teaches us some new concepts along the way. After quite a bit of thought, I decided to combine my love of offroading and web development and create a platform for offroaders to post their favorite trails, discover new locations, and keep a log of their missions. I decided to do so using React, as I have traditionally worked with Angular in the past. I knew learning a few framework with such a large project in such a short time was a challenge, but I was up for it.

After extensive research, I decided to go with the MERN stack - the main reason I went this route was that I typically work with the MEAN stack, meaning the backend is the same as I usually work with, but I swapped Angular for React. For the interface I went with Reactstrap to save time on CSS styling while still keeping things clean.

Once I got my framework in order, it was time to lay out some basic features… here’s what I ultimately decided on:

  • Local authentication (email & password)

  • Draw trails on map

  • Flag trails’ popularity & difficulty

  • Easily explore trails on a global map

As they say, easier said than done. Doing this with a new framework (especially in regards to map interactions) proved to be a challenge, but I had a great time learning the ins and outs of React in the process.

Here’s a few screenshots of various pages… the source will also be available on my GitHub.

Home page

New Trail page

View trail page