Expense Tracker Series — Part 1: Setting Up the Angular Frontend & DRF

Sign In — Expense Tracker Application

If you enjoyed this, buy me a coffee! ☕💖

Welcome to the first part of our Expense Tracker series! In this tutorial, we’ll guide you through setting up the frontend for our expense tracker application using Angular. This article will cover creating a new Angular project, setting up the project structure, and preparing the environment for future development.

By the end of this article, you’ll have a solid foundation for building a robust, scalable Angular application. Let’s get started!

Introduction

Building a comprehensive expense tracker involves both backend and frontend development. While our backend will be powered by Django (as discussed in the upcoming parts of this series), the frontend will be created using Angular. Angular provides a powerful framework for building dynamic and responsive web applications.

In this tutorial, you’ll learn:

• How to set up a new Angular project.
• The basics of Angular project structure.
• How to integrate Angular Material for UI components.
• Setting up SCSS for styling.
• Version control best practices with Git.

Let’s dive in!

Step 1: Setting Up Your Angular Project

First, make sure you have Node.js and npm installed on your machine. If not, you can download and install them from Node.js official website.

Install Angular CLI

The Angular CLI (Command Line Interface) is a powerful tool for creating and managing Angular projects. To install Angular CLI, run the following command:

npm install -g @angular/cli

Create a New Angular Project

Next, create a new Angular project using the Angular CLI:

ng new expense-tracker

You’ll be prompted to choose options for your new project. Select SCSS for the styling format. Navigate into the project directory:

cd expense-tracker

Serve the Application

To make sure everything is set up correctly, serve the application:

ng serve

Open your browser and navigate to http://localhost:4200. You should see the default Angular welcome page.

Step 2: Project Structure Overview

Angular projects have a specific structure to help manage different parts of the application efficiently. We’ll modify the structure to fit our project’s needs:

src
├── app
│   ├── authentication
│   │   ├── components
│   │   ├── models
│   │   ├── services
│   ├── home
│   │   ├── components
│   │   ├── models
│   │   ├── services
│   ├── shared
│   │   ├── components
│   │   ├── models
│   │   ├── services
│   ├── app.component.scss
│   ├── app.component.html
│   ├── app.component.ts
|   ├── app.config.ts
│   ├── app.routes.ts

Step 3: Installing Angular Material

Angular Material is a UI component library that provides modern and responsive components. To install Angular Material, run the following command:

ng add @angular/material

You’ll be prompted to choose a theme and set up global typography and animations. Choose options that best fit your design preferences.

Step 4: Setting Up SCSS for Styling

We’ll be using SCSS for styling our Angular application. Ensure that your project is configured to use SCSS:

1. Change all .css files to .scss.
2. Update angular.json to reflect the changes.

"styles": [
  "src/styles.scss"
],

Create Core SCSS Files

Create a styles directory in src:

src
└── styles
    ├── _variables.scss
    ├── _mixins.scss
    ├── _base.scss
    └── main.scss

Import these files in main.scss:

@import 'variables';
@import 'mixins';
@import 'base';

Step 5: Creating Modules and Components

Let’s create the core modules and components for our application.

Generate Modules

ng generate module authentication
ng generate module home
ng generate module shared

Generate Components

For each module, generate the necessary components:

ng generate component authentication/components/account
ng generate component authentication/components/change-name-dialog
ng generate component authentication/components/password
ng generate component authentication/components/sign-in
ng generate component authentication/components/sign-up
ng generate component authentication/components/sign-in
ng generate component home/components/balance
ng generate component home/components/category
ng generate component home/components/charts
ng generate component home/components/confirmation-dialog
ng generate component home/components/expense
ng generate component home/components/home
ng generate component home/components/side-nav

Structure of Expense Tracker

Step 6: Setting Up Version Control with Git

To keep track of our project’s changes, we’ll use Git. Follow these steps:

1. Initialize Git:

git init

2. Create a .gitignore file:

node_modules
dist

3. Make the initial commit:

git add .
git commit -m "Initial commit"

Branching Strategy

Follow a branching strategy for better code management:

1. Push the initial code to the main branch:

git remote add origin <your-repository-url>
git push -u origin main

2. Create a develop branch:

git checkout -b develop
git push -u origin develop

3. Create feature branches for new features:

git checkout -b feature/your-feature-name

Conclusion

In this first part of our Expense Tracker series, we’ve set up the Angular frontend for our application. We created a new Angular project, set up the project structure, installed Angular Material, and configured SCSS for styling. We’ve also implemented a basic layout and established version control best practices. Stay tuned for the next part of this series, where we’ll dive deeper into building the core functionality of our expense tracker, including managing expenses and visualizing data. Don’t forget to check out the backend setup with Django in the following articles!

If you found this article helpful, don’t forget to share it with your friends and colleagues! 📤 Feel free to leave a comment below with your thoughts or questions 💬, and give it a like if you enjoyed it! 👍😊

To get exclusive posts and insights on full-stack projects, become a member on our Patreon page and support our work! 🚀💻

If you enjoyed this, consider buying me a Coffee! ☕💖