Todo List App – Lesson 1 – Basic setup

Author: Dawid Adach



Within this tutorial we will learn how to build a ToDo application which allows us to add/remove and complete tasks and organize time in handful lists. You can check a live demo of the app here.



In a previous lesson I've shown you how to create new empty project using Angular CLI. This time we will use our boilerplate - which is an empty project in terms of content, however it has already embed MDB package into it. Thanks we will save time on configuration.


If you want to learn how to add MDB into new or existing Angular project instead of downloading boilerplate you can follow our 5 min quick start.

1. Download a boilerplate

  1. Click here to download package.
  2. Unzip the package
  3. Optionally you can rename and move to location where you will be able to easily navigate (tip: avoid spaces in your path)
    I will be using /Users/Dawid/aworkspace/todo

Project structure

├── README.txt
├── changelog
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.e2e.json
├── font
├── gulpfile.js
├── img
├── karma.conf.js
├── license.pdf
├── package-lock.json
├── package.json
├── protractor.conf.js
├── scss
│   └── [...]
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   ├── environments
│   │   ├──
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.scss
│   ├── test.ts
│   ├──
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── tsconfig.json
├── tslint.json
└── yarn.lock

2. Open command line and install dependencies

  1. Open your terminal (if you want to learn how to open, check a previous tutorial)
  2. Navigate to your project directory: cd /Users/Dawid/aworkspace/todo
  3. Run command npm install

Once installation is complete you are are ready to open our repository and run our project.

3. Open project in a code editor and run project.

  1. Open your text editor (I am recommending Visual Studio Code)
  2. Click File->Open and choose your project directory (mine: /Users/Dawid/aworkspace/todo)
  3. Open terminal and type ng serve -o

Your browser should automatically open new site which address is: localhost:4200

Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding & in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...