[PREPARATION/DESIGN] How the application design should look like?

[ossmate]

What I expect here is a simple application view structure.

Potential questions:

• Do we need project header? What may be in it? If we don't want to have header, describe it why.
• Where navigation will be placed? In header or maybe left sidebar?
• How many routes do we expect to have in project? (I expect here at least 2 pages to make work easier between contributors, less conflicts etc.)
• What are the main project features which should be done to achieve MVP?
• Do we want to use charts? If yes, which lib should we use?
• Do we care about mobile versions?

To summary this task and potential questions, I expect here to prepare the most simple project structure (even done in Paint or other tool) which shows on where application components will be placed.

[hannakozak]

The simple project structure: https://www.figma.com/file/t2tpSUKolOweyXHfemH41D/Untitled?node-id=0%3A1

[hannakozak]

Basic functionality:

• User can sign up and sign in with name, password and email,
• User can set up and edit Income,
• User can view the recent transactions,
• User can view summary of budget: income, expenses, balance,
• User can add a new transaction,
• User can edit and delete transaction,
• User can search transaction by category,
• User can view single transaction in details (modal)

[axseinga]

I really like the structure made by Hania but I would go for only one nav element e.g. sidebar with username, photo, summary and nav buttons. I suggest placing one chart and spending summary with latest transactions on the dashboard/main view. The second page could be as in Hania's project (transaction view), the third page could be only about charts and stats regarding spending.

for functionality:

• User can filter transactions by keyword,
• User can filter transactions by type (income, expense)
• User can add/edit/delete categories
• User can set spent limits on a category for each month and will be notified when a limit is exceeded
• User can set a spent limit for monthly expenses (overall)
• User can view a summary of what amount was spent in each category

As an extra feature, if we have time we could add an extra page with saving pots where some of the income can be set aside on chosen goal.

For charts, we could use Recharts or react-chartjs-2. I think mobile design is very important as well and we should prepare the basic structure for it that can be easily converted to desktop (thinking upfront about app layout so it's easier later to work with media queries).

For styling, I would suggest going for styled-components.

I think it is very important to decide what data structure we will have to store income and expenses info and how we are going to store it. If we start working with example data it will be easier to test components as we code. My idea is to store it in a local API (json file).