Todo List App – Lesson 1 – Basic setup

by 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

Next lesson

Do you want to share?

Facebook Twitter Google +

Abut 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...

Leave a reply

WordPress database error: [Table 'mdbprd.wp_tutorialmeta' doesn't exist]
SELECT wp_tutorialmeta.tutorial, FROM wp_tutorialmeta WHERE wp_tutorialmeta.lesson = 0 AND = '2' ORDER BY wp_tutorialmeta.tutorial ASC

Subscribe to the newsletter and never miss new lesson again.

Do you want to be notified when the new angular lesson is published? Leave us your email.

I agree to receive the newsletter and commercial information regardin MDB Angular and Angular related tutorials from the administrator: StartupFlow s.c. Kijowska 7, Warsaw. Data is processed following the Privacy Policy.