douglasf5/sage-budget-tracking

Sage is a Front-end web app for personal budgeting, developed as a practice project using only HTML, CSS and Vanilla JavaScript.

    ____                      
   / __ \ ____   __  __ ____ _
  / / / // __ \ / / / // __ `/
 / /_/ // /_/ // /_/ // /_/ / 
/_____/ \____/ \__,_/ \__, /  
                     /____/   

Software Developer | Human Interface Designer.
Leveraging technology and design to craft functional, useful, and beautiful solutions.

From Brazil to the world 🌎

sage-budget-tracking's Issues

Filter by type (income, expense)

Development setup

• create the project local directory on my computer
• connect the remote repo with the local one

Allow the user to alternate between UI themes (dark and light)

Implement data summary

• total income
• total expenses
• balance

finish the logo

design the desktop light theme

Implement a custom date picker

Implement transactions

• add transaction
  • allow the user to select the type for each transaction via UI
• list transaction
• remove transaction

Add a transaction counter

Project kick off

Tasks

• create the project private repo on GitHub
• create a project board for the repo
• start the backlog
• gather code repos from other devs that worked on this project

Design desktop layout

• define the style guide

  • colors
  • font
  • button style
  • box roundness
  • icon style

• review the empty state

• review font styles

• review color styles

• #20

• refine spacing ans sizing

• simulate realistic content

• #22

• #21

Allow the user to download the data

Design mobile layout

• dark theme
• light theme

Allow the user to sort data

• by name
• by date
• by amount

finish the project

• organize the figma file
• update the figma file cover
• generate the main image for the readme file
• write the readme file
• review remaining issues and the project board on github
• close the project board
• review the code repo on github
• make the project code repo on github public

Launch screen animation

Filter by date range

Allow the user to add categories

prepare a version of the screen with the main core features only

Prepare design assets, utility classes and custom properties

• export svg icons (make sure you use them in a way that allows you to style them via CSS)
• prepare the custom properties
  • colors
• prepare utility classes
  • fonts
  • spacing (maybe)

Implement mobile layout

Filter by category

Implement desktop layout

• set the markup
• set the global styles
• style the components