Day 1
Alright! First day of the challenge is down.
First things first here’s my contract.
I, Dynamic_Gravity, will participate to the next Devember. My Devember will be developing a REST-ful API as a MEVN Stack, and then deploy to Heroku. I promise I will program for my Devember for at least an hour, every day of the next December. I will also write a daily public devlog and will make the produced code publicly available on the internet. No matter what, I will keep my promise.
<Nerd Stuff>
To elaborate on my goal:
A MERN stack refers to the development stack used:
- M ongo (Database)
- E xpress (Routing)
- V eact (Frontend)
- N odeJS (backend)
Heroku is a popular PaaS for external apps. My goal is to offload the backend REST API to the Heroku instance while having the frontend work on the local system. I want to accomplish this challenge to further learn how to develop REST API’s.
</Nerd Stuff>
Changelog
So for my first day of the Devember challenge, I set up my repository on gitlab, added my resources and set up my basic project structure. I then created my Heroku Dyno and got started with their Nodejs example as a starting point.
Nothing too fancy yet but a solid starting point to get my project started.
Some excellent tools to help me develop my REST-ful app which I’m sure some of you will also find useful are Postman and Robo3t.
So as this day concludes, and I get ready to go to work, I am left feeling highly optimistic.
Here is my Heroku dyno for this project, feel free to check it out at anytime.
Good luck to anyone else doing the challenge! 
Day2
Alright Day 2!
A very successful day. I spent a couple hours today removing the original boilerplate leftover from the kickstart process and set up a very basic API with CRUD operations. Then I tested the responses and worked on integrating them my mongo database.
Here’s an example of how my Create process works.
router.post('/p', function(req, res, next){
Post.create(req.body).then(function(post){
res.send(post);
}).catch(next);
});
So I am defining a route at my /api path to listen for POST requests, if a request is sent then it passes that request body (JSON) and returns a promise with fires a callback to return a response of the original data on success, and if for some reason the actions fails it is caught and passes the error object to the next piece of middle-ware.
The rest of the file is bellow if you want to look at it.
Entire file
const express = require('express');
const router = express.Router();
const Post = require('../models/post');
// CRUD for posts
// Create
router.post('/p', function(req, res, next){
Post.create(req.body).then(function(post){
res.send(post);
}).catch(next);
});
// Retrieve
router.get('/p', function(req, res, next){
Post.find({}).then(function(posts){
res.send(posts);
});
});
// Update
router.put('/p/:id', function(req, res, next){
Post.findByIdAndUpdate({_id: req.params.id}, req.body).then(function(post){
Post.findOne({_id: req.params.id}).then(function(post){
res.send(post);
});
});
});
// Delete
router.delete('/p/:id', function(req, res, next){
Post.findByIdAndRemove({_id: req.params.id}).then(function(post){
res.send(post);
});
});
module.exports = router;
Here is what testing my api looks like with postman.
As you can see, when going to api/p all the current documents (right now) in the post collection are returned as raw json.
Lets compare that to whats in the database
And what do you know, it is the same!
Now, lets try creating new documents by sending post requests as json data.
It failed?! Yes, of course it did. I set up a error handling middleware to catch bad requests and return a 422 (Unprocessable entity) and return the error message of the error object. Without this, we would get a status of 200, because it was processed correctly, but it wasn’t we wanted.
So now lets send it some correct data.
Much better. And as you can see, the new post object was successfully returned to us as a reply.
Lets check the database just to make sure…
Perfect. Our basic api is behaving correctly now.
Thanks for reading! 
Stay tuned for tomorrows update.
Day 3
Sorry about not blogging yesterday, I am currently in the woods in TN on a mini-vacation. I did do stuff yesterday while I was working overnight. I tried experimenting with different font ends but I don’t think what I did will it into the official repo. I originally wanted to use React, but after doing research the tooling and integration of Vue seems to fit better with how I want to structure my app. I mean come on just look at that sexu logo 
I came to this conclusion because I originally wanted to structure my app to be restful and serve pages as well, but most of the tutorials I could find either use an older version of react that is no longer viable or they didn’t accomplish what I want to do. I thought about how I could maybe use express but the proper method using it is to just serve static files. So after a quick google search I found what I need:
https://www.npmjs.com/package/express-vue
npm install --save express-vue
Now I just need to find out how to use this in my application. But I think for now I’ll tinker with my api a bit further since I’m really remote.
Day 3 - 9
While I may not have posted each day what I was doing I was still actively working on the code. I have some big updates. Sorry for not updating sooner, I came back from vacation in the mountains, to my full time night-shift IT job.
With that out of the way, lets take a look.
I decided to move to a MEVN stack, as it works better for what I want to do. I used vue-cli to bootstrap a vue project build in with webpack. As you can see, it hooks up nicely with my REST api backend and I use vue router with axios to handle async-await fetches to the api.
Currently I’m working on getting the delete requests to properly bind to the page. As of this moment, if you click the trash can it will delete the post but does not display to the user what has changed. Still getting the kinks worked out.
Edit: I recorded this GIF at 60 fps but it chokes when viewing in the browser. Weird. This is why it make appear like I’m typing crazy slow.
Day 10
Still hard at work, but I implemented a new feature; input validation. Right now it uses the vee-validator npm package and I’m only using it for required fields right now, but I plan to expand on this as needed in the future. For now, check out the implementation.
Day 11
Todays changelog:
- Added dynamic links for the breadcrumbs up at the top. What this means, is that I did not hard-code the URL’s, they are based off of what is stored in the vue-router, so internal links won’t break over time.
- Seems simple, but I fixed a bug in the validation. I made the submit button disabled if there were any errors in the form. Don’t know I missed this the first time
- fixed my delete issue. Deleting a post now asynchronous deletes the post from the page. No more refreshes, hurray!
Day 12
Today, I spent my hour reformatting/refactoring my code. I tried out a new plugin called prettier, broke my application, spent time figuring out why it broke, fixed it, and learned something new in the process. Now, I feel like I have a better understanding of how ESLint works and have this nifty badge on the readme page.
Days 13 - 19
Hey guy! Back for another update. Updates have been sparse, due to having to shoehorn Christmas shopping in to my schedule; but I got a lot of good time in today to make up for the lost hours.
Boy do I have some neat updates to share.
Changelog:
- Implemented polling of the api on a 30 second interval, which then asynchronously updates the content.
- Added a loading circle thingy while content is being fetched.
- Implemented error handling/feedback in the main posts template. Watch the video.
- if errors are detected, the user is made aware of them (such as a network connection error), then if they are resolved, the message is removed asynchronously.
- Implemented CSS grid to the project to handle dynamic sizing and position of relative content.
Take a look of it in action.
It’s beginning to take shape and feel like a real application. I’m quite proud.