The purpose of this project is to develop a web application, an expense tracker called «Les Frais» (hereinafter referred to as the Service) for the general use of people on the Internet.
Main objectives of the Service are the control and accounting of incomes and expenses, view statistics on all transactions in any language and currency.
Useful links:
- Project backlog
- Application deployed to Heroku (might require ~10-30s to warm up)
- Figma designs
- Swagger documentation
- E2E test videos
- CI/CD
- User documentation page
The backlog consists of the User Stories written to show the main functionality of the Services. They are all kept in the GitHub issues:
- Authorization and registration
- Transactions
- Data import
- Categories
- Switch default currency
- Expense templates
- Interface language switch
- Search transactions
- Statistics
The following team is working on a project:
- Maxim Korsunov – Frontend developer, UI/UX designer
- Alexander Krivonosov – Frontend developer
- Matvey Plevako – Backend developer
- Andrey Feygelman – Backend developer
As a team, we use SCRUM framework for flexible development. The project repo uses Git Flow methodology to fix the main branch only for production releases, and keep the main work in the DEV branch.
Merges into the DEV and Master should be possible only after the Pull Request is created and passed all CI and CD checks, and the code is reviewed by the members of the SCRUM team.
Server-side requirements:
- Backend has to be implemented in the latest version of Python language.
- Backend has to use Django framework.
- Database has to be PostgreSQL.
- All calculations performed by the server-side must be accurate and tested using unit and integration tests.
Web-app requirements:
- Web application has to be implemented in the Vue 3 framework of JavaScript language, SPA mode.
- The quality has to be assured by unit component testing and with end-to-end tests of the whole Service.
- Application must support accessible UI and UX across all mobile and desktop devices.
- Application must be performant in terms of time and memory, do not utilize heavy memory resources and load in less than a second showing 90% of Lighthouse audit test passing.
All the designs are kept in the Figma project: https://www.figma.com/file/qP2zLO26bEDAWH35ssGUjB/Les-Frais
The file structure, if looking from the root directory, is the following:
.github– workflows for testing and automationbackend– Python backend applicationsrc– Frontend applicationreadme– sources for the grading data- other configuration files – needed for the proper deployment. Putting them not in the root folder causes many problems.
Firstly, create virtual environment in backend directory (code for windows):
python -m venv venv
venv\Scripts\activateThen, run:
pip install -r requirements.txt
python manage.py migrate
python manage.py runserverIf you want to access admin panel you need to create superuser (it will ask you to enter username and password from console)
python manage.py createsuperuser| Backend Endpoints: | |
|---|---|
| /swagger | swagger endpoint documentation |
| /admin | admin panel |
| /api/v1/transactions | |
| /api/v1/currencies | |
| /api/v1/categories | |
To start working with this, firstly install all dependencies. It is required to have Node.js v12 and greater to be installed on your machine.
npm ciAnd now, you can run the app in development mode:
npm run devLinting can be done by this command:
npm run lintTests (either unit or end-to-end) are performed by this command:
npm run test:unit
npm run test:e2eThis is a descriptions of the project results by each weekly sprints with links to the values, documentations and tests produced throughout the work.
Established the description of the project, its goals and purposes. Formulated 9 main User Stories each of which adds value to the resulting web application. Arranged the product backlog with assigned tasks to 7 planned sprints and wrote the Readme of the project summarizing previous statements.
During this sprint, the whole team focused on the only one User Story: user authorization. Since the project was only started, we produced the following results:
- Set up the frontend application with Vue 3 framework
- Set up the backend application with Django
- Implemented authorization endpoints on the backend
- Connected the frontend with Figma designs and backend
- Set up GitHub Actions workflows for checking frontend quality
- Deploy the application to Heroku
The goal of this sprint was the implementation of transaction creation User Story. During this spring, we:
- Produced backend documentation in form of Swagger
- Implemented CRUD endpoints for different entities: Transactions, Categories, Currencies etc.
- Connected frontend with the backend endpoints for transaction creation
- Implemented category creation in the settings page of the app
- Tested frontend basic components with unit tests
- Tested backend authorization and transaction creation
After two weeks of development, it is already possible to interact with application's basic functionality.
The sprint was focused on the finishing the technical dept, adding only small features aimed to improve user experience and reduce the unexpected behavior or the amount of bugs users can encounter. We:
- Implemented transaction edition, selection and batch removal #15
- Implemented category editing and removal
- Fixed bugs all around the website after manual hand testing
- Fixed link to the Swagger documentation
- Added E2E tests for #5 #16 #21 #24. Cypress has produced test videos that can be found here
- Added more unit tests for frontend components
- Started working on the big user story of data import from .XLS files
After this sprint, such user stories are completed fully:
It was a heavy-loaded week, but we succeeded in several User Stories:
- Finished Expense templates User Story
- Created User documentation page on the website that explains how to interact with the application
- Heavily documented code in JSDoc format. Here's the example
- Continued working on Data Import feature. Made an endpoint that accepts and .XLS file, parses it and returns JSON to the frontend
- Implemented Continuous Integration of backend tests
- Implemented Continuous Delivery to Heroku via GitHub actions
So, we mainly improved the value of the project by documenting it more, refining our goals and improving User Experience via expense templates. Also, we improved Developer Experience through better CI/CD.
Sprint full of features!
- Implemented Data Import user story.
- Implemented Category Statistics in the dashboard.
- Tested it all!
