This is a React web application for managing your home budget - it allows you to define budgets for individual types of expenses, track the level of spending, and thus the current state of home finances.
The project was created as part of Dare IT Portfolio Challenge - a 3-month program prepared by mentors from the Dare IT community together with Flying Bisons IT company and in collaboration with Stanford University from Silicon Valley.
The aim of the project was to improve practical skills in React.js, learn new technologies and good practices, and at the same time to expand the portfolio with the support of experts from the IT industry.
At the beginning of the project, the participants received a starter pack with a base repository, which was individually expanded based on the received acceptance criteria and design in Figma.
The application was programmed in React.js 17.0 using Material UI, react-query, react-hook-form, react-chartjs-2, Notistack, Storybook, Cypress.
For the first time I had an opportunity to test Storybook in practice - it allows to create and test components in isolation => it runs outside of the app, so project dependencies do not affect the behaviour of components. So helpful!
I also found out how simple, fast and fun it can be to fetch data with react-query - a great hook library for managing data requests that completely eliminates the need to put remote data inside the global state!
Thanks to react-chartjs-2 I've created my very first chart in React and found out that data visualization doesn't need to be difficult.
Last, but not least - Material UI - a component library which by allowing to "drag and drop" elements to build UI and customize components makes developers' work so much faster and easier.
The Dare IT Portfolio Challenge is completed, but the project is still under development. Planned features:
- mobile version
- search bar for expenses
- filter expenses by type
- editing
- alert when budget is exceeded
- ...
-
Start terminal and clone repository using:
git clone https://github.com/magda-korzeniowska/react-challenge.git` -
Install all dependencies => go the main directory of the react-challenge repository:
cd react-challengeand run:
npm install
-
Run application:
npm start
This command will start simultaneously 2 applications (the client application and the server application) that will be available at the following addresses:
- client - react app - http://localhost:3000
- server - backend app - http://localhost:4320
- API documentation is available at http://localhost:4320/swagger
- icons: Material Icons
This is a Dare IT Portfolio Challenge project. Therefore, no pull requests will be accepted.