Thuta Learning
Search
ProjectsWeb Developmentintermediate

Mini Project: Task Tracker (Part 1 - Setup & Structure)

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

  • Apply Mini Project: Task Tracker (Part 1 - Setup & Structure) in a real project
  • Write the code yourself and run it
  • Build out an entire project step by step

Let's think about this for a moment

In this project, we'll build a Task Tracker app from scratch using the Angular CLI. Component-based architecture, TypeScript interfaces, and routing setup are the foundation of every Angular app, so in Part 1 we'll prepare the folder structure, root component, task model interface, and two routes (list/detail). Since Part 2 and Part 3 will keep building features on top of this structure, it's important to get this stage right. Here we'll bring together, in a practical way, the concepts you learned in the components, modules, and routing lessons.

Let's build it for real

In the terminal, create a new project with `ng new task-tracker --routing --style=css`. Under `src/app`, create a `task.model.ts` file and define a `Task` interface (id, title, description, completed). Build two components, `TaskListComponent` and `TaskDetailComponent`, using `ng generate component`, then in `app-routing.module.ts` route path `''` to TaskListComponent and path `task/:id` to TaskDetailComponent. Add `<router-outlet>` in the AppComponent template and show a header title.

Code Example

typescript
// src/app/task.model.ts
export interface Task {
  id: number;
  title: string;
  description: string;
  completed: boolean;
}

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TaskListComponent } from './task-list/task-list.component';
import { TaskDetailComponent } from './task-detail/task-detail.component';

const routes: Routes = [
  { path: '', component: TaskListComponent },
  { path: 'task/:id', component: TaskDetailComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
You should see
With ng serve running, the root path '/' shows TaskListComponent (empty list), and you'll see the header title in the browser.

5-Minute Try-It

Within 5 minutes, inject ActivatedRoute in TaskDetailComponent and console.log the route param `id`.

A Quick Word of Caution

Carefully organizing your project structure from the start means less refactoring when new features get added later.

Easy traps

  • Forgetting to add app-routing.module.ts to AppModule's imports array (if RouterModule isn't imported, router-outlet won't work)
  • Not keeping the Task interface's id type (string vs number) consistent throughout the project

Now Try It Yourself

Within 5 minutes, inject ActivatedRoute in TaskDetailComponent and console.log the route param `id`.

You'll know it worked when: With ng serve running, the root path '/' shows TaskListComponent (empty list), and you'll see the header title in the browser.

Mini Project: Task Tracker (Part 1 - Setup & Structure) | Thuta Learning