Build a frontend to backend web application (Windows 95 style)
Tags: noob, database, elim5, backend
Published: 2018-11-14 02:19:14

---
title: Build a frontend to backend web application (Windows 95 style)
published: true
description: A simple introduction to design, development and deployment flow.
tags: 
- noob
- database
- elim5
- backend
---

{% youtube IDYRlkEoK4s %}

# Look ma, I'm fullstack.

Today I start to play with database. I found a gem at https://dev.to/aspittel/objection--knex--painless-postgresql-in-your-node-app--6n6. @AliSpittel, you are dah MVP.You should first head over to the [tutorial](https://dev.to/aspittel/objection--knex--painless-postgresql-in-your-node-app--6n6) which covers objection.js + knex pretty well.


## Objection.js + Express = Web App

### Disclaimer
This is a beginner's attempt to begin fullstack. I wanted to keep it freaking simple. No webpack no babel no nothing. As vanilla as possible.

I have selected `Postgres/Knex/Objection` for my database and `Express` for backend and just vanilla `HTML`, `CSS` and `JavaScript` for frontend. I'm a simple girl.

This project is like a random doodling process. Expect chaos in the code.

# Before we start,
Here's the [Demo](https://live-a-life-you-will-remember.herokuapp.com/) and [Code](https://github.com/linxea/life).

## User Requirement

As a human being, I need a place to jot down what I do everyday to remind myself how much time I have been wasting doing nothing but sleeping.

[Oh shit, I enjoy writing nonsense too much.]

# 1. Design

I don't want to care about frontend this time. I am looking for a MVP, a minimal viable product.

But we need to design the database schema. Since we want to document each day as an entity, we will create a model named `Day` with the fields below:

```
{
    "id": 1,
    "exercise": false,
    "achievement": "I started dev.to 🤗.",
    "demo_link": "http://dev.to/linxea",
    "mood": "Good vibes",
    "woke_up_at": null,
    "slept_at": null,
    "created_at": "2018-05-28T16:00:00.000Z"
}
```

# 2. Develop

### Setup
Download the [example code here.](https://github.com/linxea/life).

Install these in the terminal:

```
brew install psql
brew install knex
```

### Database
Create a database called `life` locally by running the command:

```
createdb life

```

Create .env in folder by running the command:

```
npm run create:env
```

Open `.env` file and update `DATABASE_URL` variable with your own username/password/database_name. It should look something like this:
```
PORT=8000
APP_ENV=local
DATABASE_URL=postgres://username:password@localhost:5432/life-database

```

Scheme is defined in the knex generated file in migration folder, which is created by the command `knex migrate:make create_days`. I've already created one named TIMESTAMP_create_days in `/deploy/db/migrations`. Migrate whatever inside the migrations folder by running the command:

```
knex migrate:latest
```

To feed the database with default information from `/deploy/db/seeds`, running the command:

```
knex seed:run
```

### Server / Client

Install the dependencies:

```
npm install
```

Run the freaking app:

```
npm run start
```

Yes I copied the content from my [README file](https://github.com/linxea/life).


## Optional
If your database screws up or if you want to reset the database content, you can delete the database and do everything again by running the commands:
```
dropdb life
createdb new-life
// Remember to update the `database_name` in .env file
knex seed:run
```

# 3. Deploy

You need to run server for this web app. [Heroku](https://dashboard.heroku.com/) provides a free and easy way to host node app. (I wish firebase hosting could do it too. T.T) However, free account means that the server will fall asleep after 30mins of non-activity. So the first load time for the lucky first person will always take reaaaaaaaaaaaaaaally long. It's not my app having really bad performance okay.

You can create a free AWS account to create a database over at [RDS](https://aws.amazon.com/rds/). ( I actually missed this part out in my video, README, everything. opps) I'm pretty new to RDS, the response time to connect to the database takes a while. Sometime I can't access the database as well due to long response time. :<


### Deploy to Heroku
You can also deploy to Heroku easily using these commands (Heroku is awesome!):

```
brew install heroku
heroku login
heroku create you-can-name-anything-you-want-here
git push heroku origin
heroku open
```











Follow me at https://twitter.com/linxea_
I intend to make a video a day like Casey Neistat and Nas Daily but I spent way too long on one video, waaaaaaaay too long. T_T