Workdrop — Initialization and Configuration
Tags: twiliohackathon, webdev
Published: 2020-04-08 01:05:03

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

[GitHub Repository](https://github.com/Sergix/workdrop) (MIT Licensed)
[Stackshare](https://stackshare.io/Sergix/workdrop)

<hr />

## 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](https://nuxtjs.org/api/pages-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](https://nuxtjs.org/api/configuration-srcdir) in `nuxt.config.js` to do so:

```javascript
// 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`

![Workdrop localhost](https://dev-to-uploads.s3.amazonaws.com/i/j8256jhy2k43mm00mpm6.png)

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`:

```javascript
// 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.

![MongoDB Atlas Cluster UI](https://dev-to-uploads.s3.amazonaws.com/i/048um9kgis6z2he37zpx.png)

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](https://docs.mongodb.com/stitch-sdks/js/4/index.html) 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.

<hr/>

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