{"id":19307105,"url":"https://github.com/luovtyrell/react-incorpode","last_synced_at":"2026-04-10T07:56:31.140Z","repository":{"id":254863069,"uuid":"846899626","full_name":"Luovtyrell/React-Incorpode","owner":"Luovtyrell","description":"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.","archived":false,"fork":false,"pushed_at":"2024-09-13T13:06:46.000Z","size":2458,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-06T01:10:00.895Z","etag":null,"topics":["chartsjs","custom-hooks","flowbite","i18n","javascript","prop-types","react","sonarcloud","tailwindcss","vitest"],"latest_commit_sha":null,"homepage":"https://react-incorpode.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Luovtyrell.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-24T09:10:01.000Z","updated_at":"2024-09-26T13:58:01.000Z","dependencies_parsed_at":"2024-09-05T19:08:39.047Z","dependency_job_id":"c80c45e5-1716-43e6-8cd5-f84a9bfb842a","html_url":"https://github.com/Luovtyrell/React-Incorpode","commit_stats":null,"previous_names":["luovtyrell/react-incorpode"],"tags_count":0,"template":false,"template_full_name":"Luovtyrell/React-Vite-PropTypes-React-Router-Tailwind-Starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Luovtyrell%2FReact-Incorpode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Luovtyrell%2FReact-Incorpode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Luovtyrell%2FReact-Incorpode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Luovtyrell%2FReact-Incorpode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Luovtyrell","download_url":"https://codeload.github.com/Luovtyrell/React-Incorpode/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240408992,"owners_count":19796788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chartsjs","custom-hooks","flowbite","i18n","javascript","prop-types","react","sonarcloud","tailwindcss","vitest"],"created_at":"2024-11-10T00:09:41.145Z","updated_at":"2026-04-10T07:56:26.119Z","avatar_url":"https://github.com/Luovtyrell.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Read time badge with 4 minutes](https://img.shields.io/badge/4min-lightgreen?style=flat\u0026logo=gitbook\u0026logoColor=black\u0026label=readtime)\n\n# React Incorpode\n\n\u003cdiv align=\"center\"\u003e\u003cimg src=\"./public/demo/Incorpode.gif\" width=\"270\"\u003e\u003c/div\u003e \n\u003cbr\u003e\n\nThis 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.\n\n## Table of Contents\n\n1. [Features](#features)\n2. [Technologies](#technologies)\n3. [Project file Structure](#project-file-structure)\n4. [Installation](#installation)\n5. [Screenshots](#screenshots)\n6. [Contributing](#contributing)\n7. [Author](#author)\n\n## Features\n\n- **Responsive Design:** Built with Tailwind CSS and Flowbite to ensure a sleek and responsive UI.\n- **Modular Components:** Uses reusable React components for maintainability tries to aply SOLID bases.\n- **State Management:** State is managed using Context for scalability.\n- **Multi-language Support:** Integrated with i18n for localization.\n- **Data Visualization:** Interactive charts and data representation using Charts.js.\n\n## Technologies\n\n**Frontend:**\n\n\u003ca href=\"https://reactjs.org/\" style=\"text-decoration: none;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/React-61DAFB?logo=react\u0026logoColor=000\u0026style=flat\" alt=\"React\" style=\"height: 24px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript\" style=\"text-decoration: none;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript\u0026logoColor=000\u0026style=flat\" alt=\"JavaScript\" style=\"height: 24px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://tailwindcss.com/\" style=\"text-decoration: none;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Tailwind%20CSS-06B6D4?logo=tailwindcss\u0026logoColor=fff\u0026style=flat\" alt=\"Tailwind CSS\" style=\"height: 24px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://flowbite.com/\" style=\"text-decoration: none;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Flowbite-purple?style=flat\u0026logo=gradleplaypublisher\u0026logoColor=blue\u0026labelColor=1a56db\u0026color=1a56db\" alt=\"Flowbite\" style=\"height: 24px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.w3.org/Style/CSS/Overview.en.html\" style=\"text-decoration: none;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/CSS3-1572B6?logo=css3\u0026logoColor=fff\u0026style=flat\" alt=\"CSS3\" style=\"height: 24px\"\u003e\n\u003c/a\u003e\n\n**Tools and Libraries:**\n\n\u003ca href=\"https://vitejs.dev/\" style=\"text-decoration: none;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Vite-646CFF?logo=vite\u0026logoColor=fff\u0026style=flat\" alt=\"Vite\" style=\"height: 24px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://reactjs.org/docs/typechecking-with-proptypes.html\" style=\"text-decoration: none;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/PropTypes-lightblue?style=flat\u0026logo=React\u0026logoColor=black\" alt=\"PropTypes\" style=\"height: 24px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.chartjs.org/\" style=\"text-decoration: none;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Chart.js-FF6384?logo=chartdotjs\u0026logoColor=fff\u0026style=flat\" alt=\"Chart.js\" style=\"height: 24px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.i18next.com/\" style=\"text-decoration: none;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/i18next-26A69A?logo=i18next\u0026logoColor=fff\u0026style=flat\" alt=\"i18next\" style=\"height: 24px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://vitest.dev/\" style=\"text-decoration: none;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Vitest-6E9F18?logo=vitest\u0026logoColor=fff\u0026style=flat\" alt=\"Vitest\" style=\"height: 24px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://sonarcloud.io/\" style=\"text-decoration: none;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/SonarCloud-F3702A?logo=sonarcloud\u0026logoColor=fff\u0026style=flat\" alt=\"SonarCloud\" style=\"height: 24px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://postcss.org/\" style=\"text-decoration: none;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/PostCSS-DD3A0A?logo=postcss\u0026logoColor=fff\u0026style=flat\" alt=\"PostCSS\" style=\"height: 24px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://eslint.org/\" style=\"text-decoration: none;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/ESLint-4B32C3?logo=eslint\u0026logoColor=fff\u0026style=flat\" alt=\"ESLint\" style=\"height: 24px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://prettier.io/\" style=\"text-decoration: none;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Prettier-F7B93E?logo=prettier\u0026logoColor=fff\u0026style=flat\" alt=\"Prettier\" style=\"height: 24px\"\u003e\n\u003c/a\u003e\n\n\u003cbr\u003e\n\n## Project file Structure\n\n\u003cdetails\u003e\n\n```bash\n.REACT-INCORPODE\n├── .github/workflows/sonarcloud.yml #SonarCloud GitHub config\n├── node_modules #Dependencies\n├── public\n│   ├── demo\n│   └── favicon.ico\n├── src\n│   ├── assets\n│   │   ├── flags\n│   │   ├── font\n│   │   └── png\n│   ├── components\n│   │   ├── BalanceSheet\n│   │   │   ├── BalanceSheet.jsx\n│   │   │   └── BalanceSheet.test.jsx\n│   │   ├── DailyExpenses\n│   │   │   ├── DailyExpenses.jsx\n│   │   │   └── DailyExpenses.test.jsx\n│   │   ├── LanguageSelector\n│   │   │   ├── LanguageSelector.jsx\n│   │   │   └── LanguageSelector.test.jsx\n│   │   └── WeeklyExpenseChart\n│   │       ├── WeeklyExpenseChart.jsx\n│   │       └── WeeklyExpensesChart.test.jsx\n│   ├── config\n│   │   └── i18n.js\n│   ├── context\n│   │   ├── SpendingContext.jsx\n│   │   └── SpendingProvider.jsx\n│   ├── hooks\n│   │   ├── useChartOptions.jsx\n│   │   └── useSpending.jsx\n│   ├── App.jsx\n│   ├── index.css\n│   └── main.jsx\n├──.gitignore\n├── eslint.config.js\n├── index.html\n├── package-lock.json\n├── package.json\n├── postcss.config.cjs\n├── README.md\n├── setupTests.js\n├── sonar-project.properties\n├── tailwind.config.cjs\n├── vite.config.js\n└── vitest.config.js\n```\n\n\u003c/details\u003e\n\n## Installation\n\nTo get started with React-Incorpode, follow these steps:\n\n1. Clone the repository:\n\n   ```\n   git clone https://github.com/Luovtyrell/React-Incorpode.git\n   ```\n\n2. Navigate to the project directory:\n\n   ```\n   cd React-Incorpode\n   ```\n\n3. Install the dependencies:\n\n   ```\n   npm install\n   ```\n\n4. Start the development server:\n   ```\n   npm run dev\n   ```\n\n\n## Screenshots\n\n| Component                | Screenshot                                                                                                          | Description                                                                                                          |\n| ------------------------ | ------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |\n| **Balance Sheet**        | \u003cimg src=\"./public/demo/balanceSheet.png\" alt=\"Home Page\" width=\"300\"/\u003e \u003cimg src=\"./public/demo/balanceSheetWeekly.png\" alt=\"Task Management\" width=\"300\"/\u003e               | Displays weekly or total expenses with a toggle button. Integrates with `useSpending` and `i18n.`                    |\n| **Weekly Expense Chart** | \u003cimg src=\"./public/demo/WeeklyExpenseChart.png\" alt=\"Task Management\" width=\"300\"/\u003e                                                            | Renders a bar chart of weekly expenses using `react-chartjs-2` and `Chart.js`, with labels in the selected language. |\n| **Daily Expenses**       | \u003cimg src=\"./public/demo/DailyExpensesCat.png\" alt=\"Charts \u0026 Reports\" width=\"300\"/\u003e \u003cimg src=\"./public/demo/DailyExpenses%20copia.png\" alt=\"Charts \u0026 Reports\" width=\"300\"/\u003e | Shows today’s expenses and percentage change from yesterday. Updates color and symbol based on the change.           |\n| **Language Selector**    | \u003cimg src=\"./public/demo/LanguageSelector.png\" alt=\"Multi-language\" width=\"300\"/\u003e                                                               | Let users switch between languages using flags. Utilizes `i18n` for language changes.                                |\n\n\n## Contributing\n\nWelcome contributions to React-Incorpode! If you'd like to contribute, please follow these steps:\n\n1. Fork the repository\n2. Create a new branch (`git checkout -b feature/AmazingFeature`)\n3. Make your changes\n4. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n5. Push to the branch (`git push origin feature/AmazingFeature`)\n6. Open a Pull Request\n\n## Author\n\n[![Lucía Ordoñez Vilanova](https://avatars.githubusercontent.com/u/153511070?v=4\u0026s=100 \"Lucía Ordoñez Vilanova's GitHub Avatar\")](https://github.com/Luovtyrell) \u003ca href=\"https://www.github.com/Luovtyrell\"\u003e \u003cbr\u003e\n\u003cimg src=\"https://img.shields.io/badge/LUCIA%20ORDO%C3%91EZ%20VILANOVA-gray?style=flat\u0026color=ffcf00\"  height=\"30\" alt=\"Made by Lucía Ordoñez Vilanova\"/\u003e\n\u003c/a\u003e\n\n\u003ca href=\"mailto:luciaorvilanova@gmail.com\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/badge/Gmail-EA4335?logo=gmail\u0026logoColor=fff\u0026style=flat\"  height=\"23\" alt=\"Gmail\" /\u003e\u003c/a\u003e \u003ca href=\"https://www.linkedin.com/in/luovtyrell\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/badge/LinkedIn-0A66C2?logo=linkedin\u0026logoColor=fff\u0026style=flat\" height=\"23\" alt=\"LinkedIn\" /\u003e\u003c/a\u003e \u003ca href=\"https://t.me/luovtyrell\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/badge/Telegram-26A5E4?logo=telegram\u0026logoColor=fff\u0026style=flat\" height=\"23\" alt=\"Telegram\" /\u003e\u003c/a\u003e \u003ca href=\"http://discordapp.com/users/664163194989707308\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/badge/Discord-5865F2?logo=discord\u0026logoColor=fff\u0026style=flat\" height=\"23\" alt=\"Discord\" /\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluovtyrell%2Freact-incorpode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluovtyrell%2Freact-incorpode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluovtyrell%2Freact-incorpode/lists"}