A Vue.js, Firebase, and CockroachDB app that makes mentorship accessible

The current mentorship model is broken. It requires you to have the privilege of belonging to an established network (like a renowned university) or ‘cold call’ potential mentors on a platform like LinkedIn. Even after you find a mentor, it’s difficult to sustain a mentor-mentee connection. This is the challenge a group of students from Lassonde School of Engineering at York University set out to resolve through their Hack the North 2020++ app: mntr.tech

mntr.tech is a CockroachDB Dedicated application built with Vue.js and Firebase that uses an advanced matching algorithm to get the best fit between mentors and mentees while letting them have the final say in the match.

We invited the team for a live-streamed chat with Jordan Lewis, Engineering Manager at Cockroach Labs. Here’s what we learned.

Meet the team

The DevOps and backend for the app were developed by Allen Kaplan, a fourth-year engineering student, and a full-stack developer. Amuleek Simak (a second-year engineering student) worked on the backend with Allen, helped implement the endpoints, and created a working backend using the valid requests. Aman Chhina (a third-year engineering student) and Harpreet Janday (a first-year engineering student) built the frontend with Vue.js and Nuxt.js.

The tech stack

• Frontend: Vue.js and Nuxt.js
• Backend: A Go program on Google Cloud Run
• Auth: Firebase
• Database: CockroachDB Dedicated

See source code at https://github.com/hackthenorth2020

How it works

The app’s front end is written in Vue.js on the Nuxt.js framework for routing and state management and is deployed on Firebase hosting. Firebase auth is used to manage user accounts. When a user interacts with the app, their token is sent in the request header as a JWT Bearer token. The backend Go program validates the incoming token using the Firebase Admin SDK and processes the business logic before sending requests to the CockroachDB Dedicated database.

Why Vue.js, Nuxt.js, Go, and Firebase

While selecting the tech stack, the team did an excellent job playing to their strengths and learning new tech.

Since Allen was teaching the team from scratch, he wanted to go with something he was already comfortable with. He finds Vue.js intuitive and can easily put together a frontend thanks to the many Vue.js libraries. Aman had experience with React and found it easy to transition to Vue.js. Harpreet found it easy to pick up Vue.js as well. Harpreet and Aman ran through Vue and Nuxt examples to get familiar with the syntax and not get bogged down with syntax errors during the hackathon.

They chose Nuxt.js for its state management features. They used server-side rendering for the SEO benefits it provides. Nuxt.js also has a Firebase package that integrates with Vuex right out of the box. 

The team chose Firebase for user authentication since it’s the easiest way to manage auth for beginners. 

Why CockroachDB Dedicated

CockroachDB Dedicated is the managed database-as-a-service offering of CockroachDB. The newly announced plug-and-play forever free CockroachDB Dedicated clusters made it an attractive choice for the team. The team took the Cockroach University Getting Started course in preparation for the hackathon.

As the team’s DevOps person, Allen found it quite easy to set up the CockroachDB Dedicated cluster and just share a link to the cluster with his team. To quote Allen,

“Cockroach really solves a lot of those pain points, especially on a small project where you don’t want to waste configuring your database.”

Things to look out for when using CockroachDB

• Make sure you are setting up certificates correctly

  Harpreet shared his experience of running into an auth issue with certificates.

  Editor’s note: Certificate setup can be a tripping point for folks new to CockroachDB Dedicated. A little trick here is to set sslmode=require in your connection string to avoid the certificate setup. For example, if your connection string is 

  postgres://<username>@<hostname>:<port>/<dbname>?sslmode=verify-full&sslrootcert=<your_certs_directory>/cc-ca.crt&options=—<clustername> 

  replace it with 

  postgres://<username>@<hostname>:<port>/<dbname>?sslmode=require&options=—<clustername> 

  Beware this makes your cluster susceptible to man-in-the-middle attacks. It might be okay for hackathon projects, but DO NOT use this option in production.

• Be careful when batch-inserting data 

  Harpreet also shared the incident when he tried to insert 70,000 rows into a table and crashed CockroachDB. 

  Editor’s note: Use multi-row INSERT statements for bulk inserts into existing tables

Tips for first-time SQL users

• For rapid SQL development, use tools like SQL Fiddle to test table creation, inserts, and updates.

  Editor’s note: You can use the interactive CockroachDB playground to test your schema and queries.

• Save the SQL Fiddle statements and queries in a separate file just in case you lose the SQL Fiddle ones.

• Run SHOW CREATE TABLE to understand what your table looks like, especially if you run ALTER TABLE statements to ensure the resultant table schema is as you expected.

• Allen prefers writing SQL without using ORMs. To quote Allen, “It definitely can help you with development speed but a lot of times at hackathons, what you’re doing isn’t complex enough to end up going through the difficulty of learning an ORM”.

Get a head start at your next hackathon

• Before the hackathon, figure out what tech stack you want to learn and run through some examples to get familiar with the syntax to avoid getting bogged down with syntax errors during the hackathon.

• Since all hackathons are now virtual, pre-hackathon workshops are the norm. Make the most of these workshops to prep for the hackathon.

  Editor’s note: Before your next hackathon, complete the Cockroach University Getting Started course and earn some cool swag!

• Curate a good mix of experience and expertise in your team. Consider pair-programming and live-sharing for peer-to-peer mentorship.

Editor’s note: Online hackathons are difficult (thanks, COVID). We know you want to push yourself and compete for the sponsor prizes, but remember to be kind to yourself. Hydrate, eat well, and get some sleep. We are rooting for you!

Check out the full discussion here: https://youtu.be/kKqWgDAnPLY

For more “How We Built It” streams, follow us on Twitch!