Personal Finance Manager is an application with limited financing functionality, used for tracking your income and expenses and managing your money efficiently.
The assignment you're about to tackle is a simple application, you'll be building from the current template built with Create React App + Redux Toolkit. This application might be small, but it's small for the purpose of helping you have more time over less work so you can focus on the project flexibily. And more importantly, so you can work from as much perspective as you have, from UI/UX to Web best practices or React Best practices and so on, note that every detail might matter, every careful and subtle touches as well as bigger picture quality, re-usability, maintainability and accessibility thoughts you put into the application helps us better understand your skills and your mental model of engineering in general and coding in particular.
Also note that, all story points with the label (Will be implemented in future stories
), is put to express future plans of the whole application,
but don't worry, this is not for you, it's how stories in the real world applications and Development tracking systems will be written.
The assignment expected to be submitted for review by 11:59PM, 10th March of 2022!
You can find the Design for Personal Finance Manager in this Figma file.
Note: Try preview the application with Figma Preview functionality and interact with links and buttons to see how they respond to actions, but keep in mind, it's just a mock up, and real-world applications need more attention in terms of both design and functionality.
The Data representation of this application with the limited functionality is rather simple, we avoided BE/API integration so you can use localStorage
to store the application's data, you might find a little bit of data and mocked function pretending to be Asynchronous request, you might want to add similiar
functions as if it is BE requests.
-
As a user, I want to see a sidebar in the left of the screen so I can easily navigate through the application. Each link representing a page in the application, when I'm on a specific page, I want it's link to be
white
When clicking on a link other than currently active link, user will be navigated to corresponding page.
Sidebar contains two navigation links:
- Overview
- Transaction History
-
As a user, I want the title of the page to appear in the topbar section of the application.
- As a user, I want the application to open intially in the
overview
page. - As a user, I want to see 3 cards in the top of
Overview
page of- Incomes of this month.
- Current total Balance.
- expenses of this month.
- As a user, I want nothing to happen, when
Details
on overview cards clicked (Will be implemented in future stories
) - As a user, I want to see an overview of latest transactions of this week.
- If there is no transaction in this week, I'd like to see transactions of the last month
- if there is no transaction in the last month, I'd like to see transactions of this year
- In any case, only last 10 transactions must be shown.
- As a user, I want nothing to happen, when a transaction card clicked (
Will be implemented in future stories
) - As a user, I want to see
Add Transaction
button in the overview page so I can add more transactions.
- As a user, I want to
Add Transaction
popup form to be opened, whenAdd Transaction
button clicked inOverview
page. - As a user, I want to see these inputs on the
Add Transaction
popup form:category
select: should contain categories that I want to choose from for my transaction- When
type
isincome
I wantcategory
select to contain:Salary
,Loan
,Gift
- When
type
isexpense
I wantcategory
select to contain:Tech
,Food
,Bills
,Sports
,Health
,Cloths
- When
date
select: I want to be able to see a calendar to choose the date I made the transaction from.- Initially, it should contain today's date.
amount
input: number input withmin=0
, I want to see the$
regardless of the input's value.type
input: multiple radio buttons, one can be selected at a time, determining the transactions type.note
input: I want to be able to write up to 350 characters as a note attached to the transaction.
- When
Dismiss
button clicked, the popup will be hidden and the state will be discarded. - When
Add Transaction
button clicked:- If one or more fields do not have acceptable values, each input will have an error message below it, showing a proper error message.
- If the form is valid, then a transaction will be saved to the transactions list.
- As a user, I want the application to navigate to
Transaction History
page whenTransaction History
nav link clicked. - As a user, I want see my transactions list in the chronological order.
- There should be only at most 10 transactions per page.
- If transactions are more than 10 after applying filters, the pagination should contain more than one item.
- As a user, I want to be able to see a Search bar, that can be used to filter transactions based on
note
andprice
. - As a user, I want to be able to see a Multi Select input, containing both
expense
andincome
categories that I can select multiple items that the transactions will be filtered based on those selected categroies. - As a user, I want to be able to see a Date input to select a
from
date to filter transactions from that date until now. - As a user, I want to be able to see a Date input to select a
to
date to filter transactions until that date.- in
to
date input, future dates must be disabled.
- in
- When clicking on
Clear
button on the filter bar, all filters except search bar will be resetted to their initial values. - As a user, I want to see pagination on the screen so I can change pages of which transactions is shown.