Project overview

Photo by Craig Cameron on Unsplash

This project will be a minimized, mocked version of a typical colossal enterprise app. It’s quite common to use Blog as a dummy project, and I’m going to follow this tradition.

Our Blog will naturally have Articles that users can read and Comments they can leave. It will consist of only two pages: Home page (contains a short version of and links to all articles) and Article page (full content of one singular article, comments that people already posted and form for posting a new comment)

Working demo is at your service (please pardon Heroku’s long warmup)

Source code

“Talks are cheap, show me the code” Linus Torvalds.

Absolutely agree, so if you don’t want to spend time reading any further, feel free to jump right into the code

How to use this tutorial

The repo contains a few branches, each one for every chapter of the tutorial. Feel free to jump between them to see how source code slowly evolves with time. At the beginning of each episode, I’ll support you with the link to the specific branch for the section so you can follow examples step-by-step.

We’ll analyze the requirements we have to fulfill in this chapter. Then we’ll write a few tests to cover these requirements followed by actual code. And finally, we’ll wrap up with more tests or will fix the old ones if it is necessary: utilizing good old TDD.

First, check out the source code of the repo if you haven’t done it yet. Then, switch to the branch named “init”. It will put repo in the initial state, with almost empty project. Let’s take a look at the folder structure first.

“entities”, “services”, and “store” will hold respective elements of the app; they are empty for now.

“ui” folder contains things that usually are boldly put directly into the src: Vue components, router pages (or views), and Vue plugins. We know that UI is not important, so it feels right to place them under a dedicated subfolder.

I build this app on the shoulders of the vue-cli project. So, if you check package.json, you can see familiar commands like “vue-cli-service serve”.

To run dev server, simply use “npm run serve”. To run tests: “npm t”, in watch mode: “npm run test:watch”.

Please note, that I use quite strict ESLint rules for TypeScript: I enforce explicit function return type (except for expressions and Higher-Order Functions), prefix “I” for interfaces. I also forbid non-used variables and useless constructors, semicolons, and double-quotes. It is my personal (partially subjective) recommendation. It is up to you to follow or ignore it in your real-life projects.

Each step in each chapter will provide code snippets. You can copy-paste them and then run the project. But I would recommend to type them in instead. That will help you understand and memorize this code better and increase the efficiency of the tutorial.

Good luck!