https://github.com/chrisshim98/budgettracker
Budget Tracking Web Application
https://github.com/chrisshim98/budgettracker
angular cloud dotnet-core tailwindcss
Last synced: 2 months ago
JSON representation
Budget Tracking Web Application
- Host: GitHub
- URL: https://github.com/chrisshim98/budgettracker
- Owner: ChrisShim98
- Created: 2023-02-04T05:56:14.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-03-03T16:40:24.000Z (about 1 year ago)
- Last Synced: 2025-01-08T15:28:23.950Z (4 months ago)
- Topics: angular, cloud, dotnet-core, tailwindcss
- Language: C#
- Homepage: https://budgetappcs.fly.dev/
- Size: 1.69 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Budget Tracker - Web Application
Developed with .NET Core 7.0 x Tailwind.css x Angular 14
Visit the [live demo](https://budgetappcs.fly.dev/) to explore the application.
**Testers can sign on as the guest user by clicking on "Guest User" or "Register for a New Account."**
## What can this application do?
In this application, users can:
1. **Register**: Users can register for a new account using their username and password with reactive forms.
2. **Login**: Secure login to the application is facilitated with a JSON Web Token (JWT), ensuring secure information transfer between the .NET server and the client web application.
3. **Create Budgets**: Users can create monthly budgets by inputting income, expenses, and passive income.
4. **View Budgets**: All created budgets are displayed by month, with all details calculated for easy reference.
5. **Visual Representation**: Users can visualize total income, expenses, and savings, providing a clear overview of their financial situation.
6. **Edit Budgets**: Users have the option to edit budgets that have already been saved.
7. **Delete Budgets**: Budgets can be deleted by their respective month.
8. **Profile Management**: Users are able to update their username and password for account management purposes.
## Description of Tech Stacks
This project is a dating web application that was developed with Angular 14 as the client-facing technology, Microsoft .NET Core 7 as the server-side framework, and Tailwind CSS for the design of the application.
The application capitalizes on Angular, a JavaScript framework maintained by Google, to construct highly efficient and lightning-fast single-page applications. This ensures swift rendering of all processes to the user, enhancing the overall user experience.
Furthermore, the utilization of ASP.NET Core, a cross-platform, high-performance, open-source framework by Microsoft, adds robustness to the server-side architecture. ASP.NET Core is bundled with an object-relational mapper, facilitating smooth interaction with relational data using domain-specific objects. This enables rapid CRUD (Create, Read, Update, and Delete) operations and simplifies the visualization of data models, thereby reducing development time and costs. Consequently, the application achieves scalability and maintainability effortlessly.
In terms of design, Tailwind CSS offers a comprehensive set of utility classes for styling, allowing for flexible and customizable UI components. By leveraging Tailwind CSS, the application achieves a polished and responsive design, ensuring a visually appealing user interface.
Together, these technologies form a powerful stack, enabling the creation of a feature-rich and user-friendly dating web application.
## Deployment Strategy
The deployment process for this application involves several steps to ensure seamless delivery:
- **Building and Compression**: The Angular application is built and compressed, along with the Dotnet server files.
- **Dockerization**: The compressed files are dockerized within an Ubuntu (Linux) server environment using Docker containers.
- **Cloud Platform**: The dockerized application is then deployed to a cloud Platform as a Service (PaaS) provider, specifically Fly.io.
## Screenshots
| Home Page | Log In Page |
| ------------- | ------------- |
| 
| 
|
| New Budget | View Budget |
| ------------- | ------------- |
| 
| 
|
| Select Budget | Settings |
| ------------- | ------------- |
| 
| 
|