BillTracker

BillTracker is a work-in-progress full-stack application designed to help users manage and track their bills efficiently. The project is divided into a frontend and a backend, orchestrated using Docker Compose, ensuring a seamless development and deployment experience. Currently, active development is underway to implement core features and functionalities.

Table of Contents

• BillTracker
  • Table of Contents
  • Features
  • Technologies
    • Frontend
    • Backend
    • DevOps
  • Project Structure
  • Prerequisites
  • Installation
  • Environment Variables
    • Description
  • Running the Application
  • Scripts
    • Frontend
    • Backend
  • Contributing
  • License

Features

[WIP]

Technologies

Frontend

• React: UI library for building interactive user interfaces.
• Redux: State management library.
• Vite: Fast build tool for modern web projects.
• React-Redux & @reduxjs/toolkit: Simplify Redux usage.

Backend

• Node.js: JavaScript runtime.
• Express: Web framework for Node.js.
• TypeORM: ORM for managing PostgreSQL interactions.
• PostgreSQL: Relational database system.

DevOps

• Docker: Containerization platform.
• Docker Compose: Tool for defining and managing multi-container Docker applications.

Project Structure

/billtracker
│
├── backend
│   ├── src
│   │   ├── controllers
│   │   ├── entities
│   │   ├── routes
│   │   └── index.js
│   ├── ormconfig.json
│   ├── package.json
│   └── Dockerfile
│
├── frontend
│   ├── src
│   │   ├── components
│   │   ├── store
│   │   ├── App.jsx
│   │   └── main.jsx
│   ├── package.json
│   └── Dockerfile
│
├── docker-compose.yml
├── .env
├── .gitignore
└── README.md

Prerequisites

• Docker: Install Docker
• Docker Desktop: Install Docker Desktop
• Git: Install Git

Installation

1. Clone the Repository

   git clone https://github.com/Edain92/billtracker.git
   cd billtracker

2. Create Environment Variables

   Create a .env file in the root directory and add the necessary configurations. Refer to the Environment Variables section for details.

3. Build and Run Containers

   docker compose up --build

   This command will build the Docker images and start the containers for the frontend, backend, and PostgreSQL database.

Environment Variables

Create a .env file in the root of your project with the following variables:

# General
NODE_ENV=

# Ports
FRONTEND_PORT=
BACKEND_PORT=
DB_PORT=

# Database Configuration
DB_HOST=db
DB_USER=
DB_PASSWORD=
DB_NAME=billtracker

Description

• NODE_ENV: Defines the environment (development, production, etc.).
• FRONTEND_PORT: Port for the frontend application.
• BACKEND_PORT: Port for the backend server.
• DB_HOST: Host for the PostgreSQL database.
• DB_PORT: Port for the PostgreSQL database.
• DB_USER: Username for the PostgreSQL database.
• DB_PASSWORD: Password for the PostgreSQL user.
• DB_NAME: Name of the PostgreSQL database.

Running the Application

1. Start All Services

   From the root directory:

   docker compose up --build

2. Access the Application

   • Frontend: http://localhost:4200
   • Backend API: http://localhost:3000

3. Stopping the Services

   docker compose down

Scripts

Frontend

Located in frontend/package.json:

• Start Development Server

  npm run dev

• Build for Production

  npm run build

• Preview Production Build

  npm run serve

Backend

Located in backend/package.json:

• Start Server

  npm run start

• Start Development Server with Nodemon

  npm run dev

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the Repository

2. Create a Feature Branch

   git checkout -b feature/new-feature

3. Commit Your Changes

   git commit -m "Add new feature"

4. Push to the Branch

   git push origin feature/new-feature

5. Open a Pull Request

License

This project is licensed under the MIT License. See the LICENSE file for details.