Skip to content

adsonsandias/Finance-Control

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Finance Control

Financial control (web) application focused on accessibility and usability, transforming the experience of how you manage your finances.

The concept around the purpose of the application has been expanded, now not only can you manage your personal finances, but you can look in real time at the value of Bitcoin, in the three main currencies, Euro, Dollar, and Real, you will now have a detailed chart about your expenses, as well as credit card expenses (the active credit card in the app is not real, because it is a personal project and without a partnership or integration with banks, the objective is just to demonstrate a better usability of the experience which your credit expenses are visualized)

More technical concepts of the app

The application will have a database that is where I store the login information, profile image and user data regarding the added transactions, and for that I am using Firebase, for user authentication either by email or right login through the account Google (Github also once it's done).

All transactions are saved in Firestore Database, and returned instantly to the user once added, he can delete the information and update the ones that have already been added, thus closing a complete C.R.U.D made in Firebase. If you want to change your name and add a profile picture, you can do so.

All states will be managed by the Redux toolkit, giving me more control over the application and its triggered states.

Preview 🚧

🚧

Design System

Font: Montserrat (400, 500, 600, 700)

Color

Color Order 0% 100% Preview
Primary Color #FFE664 #FA8341 Primary-Color
Secondary Color #F0F2F5 Secondary-Color
Primary Color Text #363F5F Primary-Color-Text
Secondary Color Text #969CB2 Secondary-Color-Text
Detail in green #7FDFBD #12A454 Detail-in-green
Detail in red #E52E4D #F296A5 Detail-in-red
Header title color #834713 Header-title-color
Green #33CC95 Green

Screens Figma

UI Design Login

login

UI Design Desktop

new Início

UI Design Mobile

  • Login and Home Home - Login

  • Transaction and User User

  • F.A.Q and Version dev

Interface elements

Modal Component with hover and focus active

Modal

Navigation Component

nav

Web App Final Production screens

Responsivo Tablet/Mobile 🚧

🚧

Status

Completed βœ…

Pages βœ…

  • Sigin
  • Sigup
  • Page Not Found(404)
  • New Home

Loading Component βœ…

  • Loading Component with lottie animation

Routes βœ…

  • Redirected Routes
  • Protected Route

Context

Firebase βœ…

  • Firebase Authentication with Google and Email
  • Firestore integration with unique data collection for each user

General Adjustment βœ…

  • Redesign Login Page Mobile
  • New transactions e theme integration item
  • Rebuild the user page to get useful information
    • config sub routes will be added

Features General βœ…

  • Credit card implementation
  • Bitcoin value

Under Construction 🚧

  • Bitcoin chart
  • User image update
  • Handle error on login pages
  • Test and adjust if necessary
  • Adding animation in the web app
  • CRUD of information list and profile user
  • implementation with redux toolkit for status management

Technologies used


Figna ReactJS typescript Html <:nail_care:> firebase babel webpack eslint Frame Motion

Follow me πŸ€— πŸ‘‡