https://github.com/luovtyrell/react-incorpode

App that offers a clear view of total and daily expenses, percentage changes, and weekly charts with Charts.js. It features multi-language support via i18n, uses Context for state management, and includes testing with Vitest.
https://github.com/luovtyrell/react-incorpode

chartsjs custom-hooks flowbite i18n javascript prop-types react sonarcloud tailwindcss vitest

Last synced: 3 days ago
JSON representation

App that offers a clear view of total and daily expenses, percentage changes, and weekly charts with Charts.js. It features multi-language support via i18n, uses Context for state management, and includes testing with Vitest.

• Host: GitHub
• URL: https://github.com/luovtyrell/react-incorpode
• Owner: Luovtyrell
• Created: 2024-08-24T09:10:01.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-09-13T13:06:46.000Z (2 months ago)
• Last Synced: 2024-09-14T03:45:42.346Z (about 2 months ago)
• Topics: chartsjs, custom-hooks, flowbite, i18n, javascript, prop-types, react, sonarcloud, tailwindcss, vitest
• Language: JavaScript
• Homepage: https://react-incorpode.vercel.app
• Size: 2.34 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![Read time badge with 4 minutes](https://img.shields.io/badge/4min-lightgreen?style=flat&logo=gitbook&logoColor=black&label=readtime)

# React Incorpode

 




This project involves creating a frontend application for managing and visualizing expenses. Using React and context, the app handles expense balance, today's expenses, percentage changes, and chart data. It integrates charts with Charts.js and supports multiple languages via the i18n library. Code quality is ensured with Vitest JSDOM tests and SonarCloud.

## Table of Contents

1. [Features](#features)

2. [Technologies](#technologies)

3. [Project file Structure](#project-file-structure)

4. [Installation](#installation)

5. [Screenshots](#screenshots)

6. [Contributing](#contributing)

7. [Author](#author)

## Features

- **Responsive Design:** Built with Tailwind CSS and Flowbite to ensure a sleek and responsive UI.

- **Modular Components:** Uses reusable React components for maintainability tries to aply SOLID bases.

- **State Management:** State is managed using Context for scalability.

- **Multi-language Support:** Integrated with i18n for localization.

- **Data Visualization:** Interactive charts and data representation using Charts.js.

## Technologies

**Frontend:**



    





    





    





    





    



**Tools and Libraries:**



    





    





    





    





    





    





    





    





    






## Project file Structure

```bash

.REACT-INCORPODE

├── .github/workflows/sonarcloud.yml #SonarCloud GitHub config

├── node_modules #Dependencies

├── public

│   ├── demo

│   └── favicon.ico

├── src

│   ├── assets

│   │   ├── flags

│   │   ├── font

│   │   └── png

│   ├── components

│   │   ├── BalanceSheet

│   │   │   ├── BalanceSheet.jsx

│   │   │   └── BalanceSheet.test.jsx

│   │   ├── DailyExpenses

│   │   │   ├── DailyExpenses.jsx

│   │   │   └── DailyExpenses.test.jsx

│   │   ├── LanguageSelector

│   │   │   ├── LanguageSelector.jsx

│   │   │   └── LanguageSelector.test.jsx

│   │   └── WeeklyExpenseChart

│   │       ├── WeeklyExpenseChart.jsx

│   │       └── WeeklyExpensesChart.test.jsx

│   ├── config

│   │   └── i18n.js

│   ├── context

│   │   ├── SpendingContext.jsx

│   │   └── SpendingProvider.jsx

│   ├── hooks

│   │   ├── useChartOptions.jsx

│   │   └── useSpending.jsx

│   ├── App.jsx

│   ├── index.css

│   └── main.jsx

├──.gitignore

├── eslint.config.js

├── index.html

├── package-lock.json

├── package.json

├── postcss.config.cjs

├── README.md

├── setupTests.js

├── sonar-project.properties

├── tailwind.config.cjs

├── vite.config.js

└── vitest.config.js

```

## Installation

To get started with React-Incorpode, follow these steps:

1. Clone the repository:

   ```

   git clone https://github.com/Luovtyrell/React-Incorpode.git

   ```

2. Navigate to the project directory:

   ```

   cd React-Incorpode

   ```

3. Install the dependencies:

   ```

   npm install

   ```

4. Start the development server:

   ```

   npm run dev

   ```

## Screenshots

| Component                | Screenshot                                                                                                          | Description                                                                                                          |

| ------------------------ | ------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |

| **Balance Sheet**        |                 | Displays weekly or total expenses with a toggle button. Integrates with `useSpending` and `i18n.`                    |

| **Weekly Expense Chart** |                                                             | Renders a bar chart of weekly expenses using `react-chartjs-2` and `Chart.js`, with labels in the selected language. |

| **Daily Expenses**       |   | Shows today’s expenses and percentage change from yesterday. Updates color and symbol based on the change.           |

| **Language Selector**    |                                                                | Let users switch between languages using flags. Utilizes `i18n` for language changes.                                |

## Contributing

Welcome contributions to React-Incorpode! If you'd like to contribute, please follow these steps:

1. Fork the repository

2. Create a new branch (`git checkout -b feature/AmazingFeature`)

3. Make your changes

4. Commit your changes (`git commit -m 'Add some AmazingFeature'`)

5. Push to the branch (`git push origin feature/AmazingFeature`)

6. Open a Pull Request

## Author

[![Lucía Ordoñez Vilanova](https://avatars.githubusercontent.com/u/153511070?v=4&s=100 "Lucía Ordoñez Vilanova's GitHub Avatar")](https://github.com/Luovtyrell)