/uni-happy-face

Smileys project

Primary LanguageTypeScriptMIT LicenseMIT

Smileys App

Choose a GIF to represent how your week has been.

Sponsored

Table of contents

About the project

Smileys is a weekly session where team members share the ups and downs from the past week. This projects aims to complement this idea by adding GIFs in the mix!

It roughly works like this:

  1. Use the web app to find a suitable GIF that represents your week
  2. On Friday, gather your team and go through everyone's entries in the use the Apple TV app (separate repo)

Built with

Major components

The project can be divided into the following pieces:

  • REST API

    The shared backend for all clients. Connects to a MongoDB instance for persistance. It's implemented in Node.js/TypeScript using Next.js API routes.

  • Web app

    The web application is a React/Next.js/TypeScript application.

  • AppleTV app

    The AppleTV app is used to present all entries from the past week. It's part of a separate repo.

Deployment

Both the REST API and web app are deployed to a single domain using Next.js. I highly recommend Zeit Now which makes the process painless.

If you want to setup this project yourself - this is the part for you. You will need to sign up for a few services to get everything working, however, with basic usage you can stick to the free tiers.

The first thing you need to do is to clone the project.

git clone https://github.com/futurice/stockholm-happy-face
cd stockholm-happy-face

API and web app

The REST API and web app are deployed together. Before we start, let's sign up for some services:

  1. Go to MongoDB Atlas and sign up for an account

  2. Go to Zeit Now and sign up for an account

  3. Go to Giphy and generate an API key

  4. Next we need to install some dependencies - for this you need Node.js.

    # install the Zeit Now CLI
yarn global add now

# install local dependencies
yarn

  5. Now go to MongoDB Atlas and spin up a new instance and copy the connection string. You can get far just using the free tier.

  6. Configure Zeit Now to use our 3rd party service credentials

    now secret add giphy-api-key {GIPHY API KEY}
now secret add mongo-url {MONGODB CONNECTION STRING}
now secret add mongo-db-name {MONGODB DATABASE NAME}
now secret add ga-tracking-id {GOOGLE ANALYTICS ID}

  7. Finally, we are gonna use Zeit Now to deploy our services.

    You can test that everything works by testing it locally:

    now dev

    When you are ready to deploy, run:

    now

    This will give you a unique deployment URL that you can use to access the services over HTTP.

Documentation

REST API

See API documentation.