Vibejar

A tool to track employee happyness

Vibejar is an app that helps track the happyness level of team members. The app sends an email at 5pm every weekday to ask a very simple question: How are you feeling today?.

It takes just one click on the 😊, 😐, and 😢 emojis within the email to provide a response.

Then, the response is recorded and the user is redirected to a success page. On this page, they can also provide more info about productivity, teamwork or general mood during the work day.

Responses are collected throughout the week and available for team members and managers to see on a dashboard:

This gives the team a transparent view of how everyone's feeling about their work day, and encourages team harmony.

A unique feature of this platform is time-zoned sending of emails. Using this feature, the emails are delivered at 5pm in the timezone of the team member. This is perfect for remote teams where members are distributed across different timezones.

An awesome tech stack for quickly building out ideas.

The frontend was built using React, using the Next.js framework. Next.js wants to be come the Ruby on Rails for the frontend world. It provides a lot of useful features out of the box like server-side rendering and app routing. It also comes with styled-jsx out of the box for scoped and component-based styling.

It is super easy to get a React app up and running with Next.js. Its even better if your app relies heavily on SEO (marketplace/b2c ideas) as Next.js is optimized for it via server-side rendering.

The frontend world is often confusing with many boilerplates like CRA, react-boilerplate, etc. My personal choice is Next.js as its got great documentation and support.

The backend consists of a GraphQL endpoint, and a cron job to send the daily emails. The GraphQL endpoint was built using Apollo Server, hosted as a serverless lambda on the awesome Zeit Now platform. . Serverless tech unlocks huge cost savings and Zeit's products have great documentation and developer experience.

GraphQL is an awesome query language invented by the guys at Facebook. It's role is to replace REST APIs. Unlike REST APIs, the clients (browsers and mobile apps) are given the power to ask for exactly what they need with GraphQL. The best part is that you get API docs for free:

I've also used Prisma as an ORM replacement for the backend (instead of Sequelize or TypeORM).


Quality assurance and automated tests

Because I am the solo developer on this project, I mainly only write integration (Jest) and end-to-end (Cypress) tests. Instead of mocks, I use a real db / prisma instance for testing.

Writing only integration and e2e tests enabled me to continue moving fast, while providing enough confidence that existing things did not break when I add a new feature.


Jest
Cypress

Conclusions

The modern tech stack of React, Next.js, GraphQL, and Prisma, along with serverless tech from Zeit allows me to build out a relatively complex app in a very short timeframe. Perfect for MVPs and first iteration of a product for testing.

Technology stack
React.jsNext.jsNode.jsApollo ServerGraphQLgraphql-shieldPrismaJestCypress
Services used
AWS FargateAWS RDSZeit Now (Serverless)EasycronPrisma CloudSendGridBasecamp (Project Management)

© John Kueh • Made in Sydney, Australia 😊