https://github.com/dracudev/budget-app
React app for web budgeting with dynamic costs and customizable services.
https://github.com/dracudev/budget-app
bootstrap5 eslint it-academy javascript react reactjs responsive styled-components vite
Last synced: 2 months ago
JSON representation
React app for web budgeting with dynamic costs and customizable services.
- Host: GitHub
- URL: https://github.com/dracudev/budget-app
- Owner: dracudev
- Created: 2024-11-18T12:11:36.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-26T19:36:35.000Z (about 1 year ago)
- Last Synced: 2025-10-20T09:41:17.611Z (8 months ago)
- Topics: bootstrap5, eslint, it-academy, javascript, react, reactjs, responsive, styled-components, vite
- Language: JavaScript
- Homepage: https://dracudev-budget.vercel.app/
- Size: 167 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Budget Calculator App
## 📄 Description
This project involves building a React application designed to simplify web budgeting. The app enables users to select services, customize their requirements, and calculate the total cost dynamically. Users can create, sort, search, and share multiple budgets, making it a useful tool for freelancers and businesses.
### Objectives
- Practice using Bootstrap in React.
- Strengthen communication between components in React.
- Build an interactive interface using checkboxes, input fields, and buttons to dynamically calculate a web budget.
- Enhance React fundamentals such as state management, routing, and component structure.
- Learn to structure React projects for scalability, maintainability, and testability.
## 💻 Technologies Used
- **Vite** for development and building.
- **React** and **React-DOM** for creating component-based UI.
- **Bootstrap 5** and **React-Bootstrap** for responsive styling.
- **React Router DOM** for navigation between views.
- **Date-fns** for handling date formatting and operations.
- **React Icons** for icon integration.
- **Styled Components** for scoped and dynamic styling.
- **PropTypes** for runtime type checking of props.
- **Node.js** and npm/yarn for dependency management.
- **ESLint** for code quality and linting.
## 📋 Requirements
- **Node.js 16 or newer**: JavaScript runtime for executing the project.
- **npm** or **yarn**: Package manager to install dependencies.
- **A modern web browser**: Required to run the application.
- **Vite**: Preconfigured as part of the project for development and build processes.
## 🛠️ Installation
1. Clone this repository:
```bash
git clone https://github.com/dracudev/S6-Budget-App.git
```
2. Navigate to the project directory:
```bash
cd S6-Budget-App
```
3. Open the project in your text editor and start coding.
```bash
code .
```
## ▶️ Execution
1. Install the dependencies and run the server.
```bash
npm install
npm run dev
```