Savings Sage

Savings Sage is a budgeting webapp, that lets you track your finances via creating and customizing bank accounts, transactions and categories. This application was created as a part of Codecool's Fullstack Web Developer course and is still under development by the two team members. There are many more features planned for the near future (see more about these below).

Created by

Table Of Contents

• Used technologies
• Features
• Installation
• Usage

Used technologies

Features

Deployed features:

• Account creation and overview
• Transaction creation

Planned features:

• Transaction overview
• Statistics page
• Cutomizable categories
• Customizable homepage with widgets
• Saving goals creation
• Budget threshold creation for categories

Installation

If you'd like to take the 'easy' way, we have a deployed version you can reach here. This is a free render.com page, so you should experience slow responses from the server.

If you'd like to install and run the development version, you're going to need to take the following steps:

1. Prerequisites:
   • Backend software and package versions:
     • .NET 8.0 SDK
     • Currencyapi ^1.0.2
     • DotNetEnv ^3.0.0
     • Microsoft.AspNetCore.Authentication.JwtBearer ^8.0.7
     • Microsoft.AspNetCore.Identity.EntityFrameworkCore ^8.0.7
     • Microsoft.AspNetCore.OpenApi ^8.0.2
     • Microsoft.EntityFrameworkCore ^8.0.7
     • Microsoft.EntityFrameworkCore.Design ^8.0.7
     • Microsoft.EntityFrameworkCore.InMemory ^8.0.7
     • Npgsql ^8.0.3
     • Npgsql.EntityFrameworkCore.PostgreSQL ^8.0.4
     • Swashbuckle.AspNetCore ^6.4.0
     • System.Text.Json ^9.0.0-preview.5.24306.7
   • Frontend software and package versions:
     • Node.js ^22.2.0
     • Npm ^10.7.0
     • Axios ^1.7.2
     • React ^18.2.0
     • React-dom ^18.2.0
     • React-router-dom ^6.25.1
     • Styled-components ^6.1.12

Clone the repository and download the above packages.

You're gonna need to setup an appsettings.Development.json on the backend to set your variables for the db connection and the jwt token settings. It should have the following structure, so the code can interpret it the right way:

 "frontend_url": "here comes localhost and the port where your frontend is running",
  "ConnectionStrings": {
    "Default": "here comes your local postgres server connection string"
  },
  "Jwt": {
    "ValidIssuer": "here comes the valid issuer you'd like to set for the jwt token generation",
    "ValidAudience": "here comes the valid audience you'd like to set for the jwt token generation",
    "IssuerSigningKey": "here comes the issuer signing key you'd like to set for the jwt token generation"
  },
  "Roles": {
    "Admin": "here comes the name you'd like to use for admin roles",
    "User": "here comes the name you'd like to use for user roles"
  },
  "Secret": {
    "AdminPW": "here comes the admin password you'd like to use for the admin created with AuthenticationSeeder.cs"

After that, you can start the application two different ways:

1. With docker-compose:
   • Find the docker-compose-pattern.yml file and change the placeholder variables to your own configuration strings
   • From the root folder: cd savings-sage
   • In the terminal: docker compose up
2. Running separately the frontend and the backend on your local machine:
   • Backend:
     • From the root folder: cd savings-sage/savings-sage
     • In the terminal: dotnet run
   • Frontend:
     • From the root folder: cd savings-sage/Frontend
     • In the terminal: npm run dev
   • Make sure your referenced database server is also running

Usage

1. Register an account

2. Log in

3. Create an account

4. Create transactions