Workdrop — Initialization and Configuration

This post continues my series describing the setup for my #twiliohackathon project. Thanks for checking it out!

GitHub Repository (MIT Licensed)
Stackshare

---

Decisions, decisions

After some consideration, I've decided to go with Nuxt.js for creating this project. Nuxt leans much more towards dynamic applications, whereas Gridsome is more oriented towards static content.

Another primary reason I chose Nuxt is because of its middleware implementation, which definitely seems like it will ease route authentication setup.

Project Scope

Before I began the workspace setup, I felt like I really needed to narrow down what I wanted the app to do. After listing some of the requirements, I realized that it would probably take me more than 25 days to implement everything I wanted to do. So, for the hackathon, I'm focusing small on the application scope, and then once I nail down an MVA (minimum viable application) I'll expand from there.

The base features are:

• create a new homework assignment file request
• send requests to students via email/SMS
• download each individual file

I'm omitting user accounts for now, so each file request will generate a unique token and that token will be associated with that request only. Requests will expire after 7 days.

Initialization

Since this project is using yarn, creating the project was as easy as

yarn create nuxt-app

Then, Nuxt has an interactive prompt asking for packages you would like. I chose: the default backend framework, Tailwind for the UI framework, Jest for unit testing, ESlint and Prettier integration, and PWA capabilities.

Project Structuring

I prefer to have all my source files in an src/ directory, so Nuxt provides a configuration option in nuxt.config.js to do so:

// nuxt.config.js

export default {
  // ...
  srcDir: 'src/'
}

Then I just moved all my source directories into there.

Let's go ahead and try to deploy the default pages with

yarn serve

It's not much, but it's a start!

Modules/Plugins

node-sass/sass-loader

I'll be using Sass to do my styling whenver Tailwind isn't appropriate (which isn't often).

yarn add -D node-sass sass-loader

dotenv

I included dotenv when create-nuxt-app prompted for it, and so in my nuxt.config.js I was able to programatically set the development server host and port by requiring dotenv:

// nuxt.config.js

require('dotenv').config()

export default {
  // ...

  buildModules: [
    '@nuxtjs/dotenv'
    // ...
  ],

  dotenv: {
    // defaults to srcDir, but my .env file is
    // in the same directory as the nuxt config
    path: '.',
  },

  server: {
    host: process.env.DEV_HOST,
    port: process.env.DEV_PORT,
  }
}

.env

DEV_HOST=localhost
DEV_PORT=3000

MongoDB Stitch

MongoDB Stitch is a serverless platform for interacting with a MongoDB Atlas cluster via REST or GraphQL. It provides authentication, AWS integration, Twilio integration, triggers, functions, and more out-of-the-box with a great free plan.

In the Stitch UI, we can enable Anyonymous Authentication. In order to perform any database operation, the client must be authenticated in some way. Since we are not yet implementing user auth, we'll authenticate every client anonymously.

MongoDB provides a detailed guide on integrating Stitch with JavaScript.

To install the SDK:

yarn add mongodb-stitch-browser-sdk

I won't write any code yet, but I'll most likely be adding the auth via Nuxt middleware.

---

The next post will detail the UI design. Thanks for reading, and God bless!