To code this project our team collaborated as part of CodersCamp Bootcamp. The Budget App was coded by students with help of our amazing Mentors and delivered on 10.02.2022 for demo presentation. Please feel free to check all collaborator's Github profiles to find out more about them and to see their projects.
Students:
Big shoutouts to our Mentors: Mateusz Ossoliński and Radek Bajor for providing us guidance, help, and code reviews during our work.
Our goal was to create MVP for a client who was interested in Budget App for desktop. We decided that the most important and basic features are:
[ short video of app ]
The environment was prepared and configured with the use of:
We split the view of the app for a sidebar and four pages (Homepage, Transactions, Stats, and Categories). This way we were able to group user activities logically.
<Routes>
<Route exact path="/" element={<HomePage />} />
<Route exact path="/transactions" element={<TransactionsPage />} />
<Route exact path="/stats" element={<StatsView />} />
<Route exact path="/categories" element={<CategoriesPage />} />
</Routes>
We learned about Modals in React and how to create Portals to make use of them.
And we deepened our knowledge of forms and form validations and used the state to control inputs.
We decided to wrap our transaction and categories forms in modals so it gives the app more space for other features in the future and improves UX. Having in mind our future users we created forms with smooth validation that fires instantly when there is an error in the form field so it gives User the chance to correct all fields before submitting the form. For form validation, we used the yup library.
[here goes video with form validation]
During our work, we tried to make usage of the modular approach and create as much as possible reusable components and pieces of code. Great examples of this are <Button/>
, <Modal>
, <Loader/>
and form inputs components. You can find them in this directory:
src/
├── components/
│ ├── Button
│ ├── form
│ ├── Loader
│ Modal.js
The src folder contains all of the project components and logic.
src/
├── assets/
├── components/
├── pages/
├── routes/
├── services/
│ ├── api
│ ├── context
│ ├── helpers
│ ├── hooks
│ ├── utils
└── styles/
└── App.js
└── App.styled.js
└── index.html
└── index.js
└── styles.css
├── test/
├── .env
├── .eslint.json
├── .gitignore
├── .prettierrc.json
├── db.json
├── package-lock.json
├── package.json
├── README.md
npm run dev - development live server npm run prod - build production distribution
To run the app follow steps below on your local machine:
npm install
command to initialise the project.npm run dev
to open live development server and to run json-server with database.The app will run on port http://localhost:1234 and json resources on http://localhost:8000/transactions and http://localhost:8000/categories