Git Product home page Git Product logo

jooewoo / fortune-empire-front-end-client Goto Github PK

View Code? Open in Web Editor NEW
1.0 0.0 0.0 23.37 MB

This is a full stack capstone project built with React and Express. This application is a personal finance tracker, and the goal is to help you visualize how much you are spending. Hopefully, it will help you understand your spending habits, and help you try to manage your money better.

Home Page: https://jooewoo.github.io/fortune-empire-front-end-client/

JavaScript 92.54% HTML 0.61% Shell 1.80% CSS 5.04%

fortune-empire-front-end-client's Introduction

Fortune Empire Front End Client

Capstone Project for General Assembly Web Development Immersive Program

This is a full stack capstone project built with React and Express. Fortune Empire keeps track of your personal finances, and to display your personal spending habits. The ultimate goal for this app is to help a user visualize their spending habits, and better manage their finances, while increasing their financial literacy. As a person who struggles to manage his own finances, I had the inspiration to build this app to help myself and others towards financial literacy.

Try the app!

To try the app, click on the deployed url above. Use the following credentials Username: hello@world Password: hello

Front-End Picture 1 Front-End Picture 2

Front End Installation (Current Repo)

  1. Fork and clone this repository.
  2. Install dependencies with npm install.
  3. Create a new branch, training, for your work.
  4. Checkout to the training branch.
  5. Run the development server with npm start.

Development Process | Problem Solving Strategy

Before I even began coding, I decided to narrow down what I specifically wnat for my application. Therefore, I drafted my user stories, database structure, the time allocated to build this project, and the steps I needed to get this into production.

My first step was to divided my user stories into four aspects: What information does my user need, what does my model for my server need, what RESTful APIs does the user need, and what design is best to accurately display to the user. Aftewards, I worked in concert with an instructor to hash out my Entity Relationship Diagram.

Once I had a finalized plan, I began working on the back end API, by setting up the Bills model and routes. To check if I successfully my work, I added curl scripts in order to see the information was correctly being added.

Finally, I progressed to working on the front end client to try and achieve minimum viable product. Once I confirmed the application was functional, I began working on the design.

User Stories

Auth

  • As an unregistered user, I would like to sign up with email and password.
  • As a registered user, I would like to sign in with email and password.
  • As a signed in user, I would like to change password.
  • As a signed in user, I would like to sign out.

Bill

  • As a signed in user, I would like to create a bill.
  • As a signed in user, I would like to see all my bills.
  • As a signed in user, I would like to update my bill.
  • As a signed in user, I would like to delete my bill

Wireframes

Wireframe

Future Intentions

  • As a signed in user, I would like to create a profile.
  • As a signed in user, I would like to update my profile.
  • As a signed in user, I would like to upload a photo of my receipt, and extract the spending from the image
  • As a signed in user, I would like to create a bill with the location of this transaction.
  • As a signed in user, I would like to input my total income for a year, my location to extract the applicable tax brackets, and know the disposable income available.
  • As a signed, in user, I would like to assign budget goals, and display progress goals per month.

Links

Technologies Used

  • React
  • HTML
  • Sass
  • JSX
  • JavaScript
  • Node.js
  • Bootstrap
  • Chart.js
  • Ant Design

Author

Made by Joseph Woo

fortune-empire-front-end-client's People

Contributors

jooewoo avatar

Stargazers

Lokesh Kanagala avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.