How I Built This: Full-stack Travel Tech App

Let’s go!

Start with the problem

Think data structures and your MVP

Create User flows and wireframes

You can probably skip this step and be fine, but I took the time to think about how a user would flow through my app to achieve their goals — from homepage, to sign up, to leaving a review, and browsing different companies.

Project Management / Workflow

By now, you’ll likely already have a long list of things that you know you need to do to execute your idea. Good documentation and establishing a workflow you can follow will help you stay productive, disciplined, and moving forward.

Testing with Jest following Test Driven Development Principles

Finally opened my IDE (Visual Studio)! Because I’d planned my app, I knew which data would need to be manipulated and would be liable to breaking the rest of my app.

Down to business! Let’s set up our database.

I’m using MongoDB for the database. I created two versions — one for dev and one for production, and connected the dev one — and set up my Schemas in line with the data structures I’d outlined in the planning phase.

Start working through tasks — First up, Authentication/Authorisation

Once my core database functionality was working, I started work on my first mini-project/Epic — Authentication.

Core App Functionality — Leaving a Review — Forms

After auth, you’ll want to work on the core functionality of your app. For me, this was leaving and reading reviews.

Pass those Jest tests

Remember a few steps ago when I created some tests? Now’s the time to pass them! For you, this step will come in whenever you start working on the code that you want to test.

Build your front-end

At this stage, we’ll assume that you’ve got all of your server-side working, so let’s start styling. Tailwind templates were less helpful here, so I created the cards representing each company here myself. I’m using Handlebars as the templating engine to dynamically display the data from my database.

Deploy with Heroku!

Once the app’s front and back-end are built, you’re ready to deploy. Congrats! Heroku makes it easy (and free) to deploy full-stack projects.

OPTIONAL: User Testing and Additional Development/ Features

I finished my MVP with a bit of time to spare. Whilst building, I’d kept notes of ‘nice-to-have’ features that I’d implement if I had time. I also wanted to get it in the hands of real operators and get their feedback as quickly as possible so I could iterate and improve the product.

OPTIONAL: Prioritizing Additional Features

Coming up with ideas isn’t usually a problem for me, but getting distracted by a new idea is! To stay focused on the impact on Users, I use RICE Scoring to help quantify the impact I think additional features will have and work through the list from most impactful to least impactful. User Stories and Story Points would be another way to do this.

  • Prevent personal domains being used: to enhance trust in the reviews being left, I added validation to my form to prevent personal email addresses being used. Only professional operators should be leaving reviews. This is validated on the front-end and back-end.
  • Filters based on attribute score: I added filters to my homepage to help users find a company that matches their needs faster. This was all done using DOM Manipulation.
  • Built a Twitter bot 🤖: When a user leaves a review, it automatically gets tweeted out to a profile I created. I’m hoping it’ll attract more users and increase transparency about a companies performance. This was using the Twitter API v2.
  • Email verification: to prevent Users using reviews with a fake email, I used Nodemailer to issue a unique confirmation code to a User’s registered email address. When they click through, there’s a boolean in the Schema that switches their verified status from false to true. When there are enough reviews on the site, I’ll add in a filter to my database queries so that I only retrieve reviews left by verified users.
  • Implemented Google Analytics: This one was nice and easy — simply a script tag to add.
  • SEO Optimization by Purging Tailwind: I purged my unused classes from Tailwind, significantly reducing my CSS filesize. This improved the site’s Lighthouse score from mid 40s to mid 80s. Huge!

Conclusion

Overall, I’m proud of what I’ve built. A few months ago I wouldn’t have known where to start, and building my first true full-stack app has whet my appetite for more!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store