Personal Expense Tracker (FRONT END)

A full-stack web application for personal expense management with user authentication and role-based access control. Users can track their expenses by category, date, and amount, while administrators and managers have additional privileges.

Features

• User Authentication: Secure login and registration system
• Role-Based Access Control: Different permissions for User, Manager, and Admin roles
• Expense Management: Create, view, and manage personal expenses
• Responsive Design: Bootstrap-based UI that works on all devices
• Real-time Validation: Form validation for secure data input
• Redux State Management: Centralized state management for complex application logic

Tech Stack

Frontend

• React 18.0.2 - Modern JavaScript library for building user interfaces
• Redux 4.1.0 - Predictable state container for JavaScript apps
• React Router DOM 5.2.0 - Declarative routing for React
• Axios 0.21.1 - HTTP client for making API requests
• Bootstrap 4.6.0 - CSS framework for responsive design
• React Validation 3.0.7 - Form validation library

Backend (Required)

• REST API server running on http://localhost:8080/api
• Authentication endpoints (/auth/signin, /auth/signup)
• Expense management endpoints (/auth/all, /auth/create)

Prerequisites

Before running this application, make sure you have the following installed:

• Node.js (v14 or higher)
• npm or yarn
• Backend API Server running on port 8080

Installation

1. Clone the repository

   git clone <repository-url>
   cd personal-expense

2. Install dependencies

   npm install

3. Start the development server

   npm start

4. Open your browser

   Navigate to http://localhost:3000 to view the application.

Available Scripts

In the project directory, you can run:

• npm start - Runs the app in development mode
• npm test - Launches the test runner in interactive watch mode
• npm run build - Builds the app for production to the build folder
• npm run eject - Note: this is a one-way operation! Ejects from Create React App

Docker Setup

Development with Docker Compose

1. Make sure Docker and Docker Compose are installed

2. Start the application in development mode

   docker-compose up --build

   This will start the React development server with hot reloading on http://localhost:3000.

3. Stop the application

   docker-compose down

Production Deployment

1. Build and run for production

   docker-compose -f docker-compose.prod.yml up --build

   This serves the built application using nginx on port 80.

Environment Configuration

• API Base URL: Configure the backend API URL using the REACT_APP_API_BASE_URL environment variable
• Default: http://localhost:8080/api (for local development)
• Production: Update to your production backend URL in docker-compose.prod.yml

Project Structure

src/
├── actions/          # Redux actions
│   ├── auth.js
│   ├── message.js
│   └── types.js
├── components/       # React components
│   ├── board-admin.component.js
│   ├── board-moderator.component.js
│   ├── board-user.component.js
│   ├── expense.component.js
│   ├── home.component.js
│   ├── login.component.js
│   ├── profile.component.js
│   └── register.component.js
├── reducers/         # Redux reducers
│   ├── auth.js
│   ├── index.js
│   └── message.js
├── services/         # API service layer
│   ├── api.js
│   ├── auth.service.js
│   ├── expense.service.js
│   ├── setupInterceptors.js
│   ├── token.service.js
│   └── user.service.js
├── common/           # Shared utilities
│   └── EventBus.js
├── helpers/          # Helper functions
│   └── history.js
├── store.js          # Redux store configuration
└── App.js            # Main application component

Usage

1. Register: Create a new account or login with existing credentials
2. Dashboard: Access different boards based on your role:
   • User Board: Basic expense tracking
   • Manager Board: Additional management features
   • Admin Board: Full administrative access
3. Expense Management: Add new expenses with category, date, description, and amount
4. Profile: View and manage your user profile

API Integration

The application expects a backend API with the following endpoints:

Authentication

• POST /api/auth/signin - User login
• POST /api/auth/signup - User registration

Expenses

• GET /api/auth/all - Get all expenses
• POST /api/auth/create - Create new expense

Request Format for Expense Creation

{
  "description": "Expense description (10-255 characters)",
  "category": "Expense category",
  "amount": "Expense amount",
  "date": "Expense date"
}

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

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

Support

For support, please contact the development team or create an issue in the repository.