/Alfred

A simple portfolio tracker for everyone using MERN Stack.

Primary LanguageJavaScript

Alfred

A simple portfolio tracker made for everyone.

Link to Alfred

Demo Login Email: wahiwec858@aalyaa.com | Password: Demo2020

Landing-Page

Problems

Most of the portfolio trackers available to public have a complicated registration process and the layouts are not user/beginner-friendly.

Solution

Trying to utilize the advantages React provides to create a user-friendly and beginner-friendly portfolio managing app.

User Stories

Website is made up of two pages:

  • Landing Page - contact site information with multiple components:
    • Navbar where user can login / sign up
    • Header where Logo
    • Subheader with site info
    • Footer
  • Portfolio Page
    • Navbar with site logo
    • Header with user info: if user click on profile icon they will be able to update their profile (profile picture / name)
    • Portfolio detail made up with another component that contain detail for each stock. click on each stock and detail will display in sidebar
    • Sidebar to manage portfolio (add/remove stock to/from portfolio)

Wireframes

Login

Signup

Alfred-v1-001

Alfred-v1-002

Alfred-v2-001

Alfred-v2-002

Data Models / ERD

alfred-ERDalfred-ERDpapertrade

MVP

Back-end w/ Database Front-end w/ Landing Page + Portfolio Page Full CRUD functionality Deployment

Milestones

  • Database
    • MongoDB
  • Back-end
    • Model setup
    • Routes setup
  • Front-end
    • Create components
    • Landing Page
    • Portfolio Page
    • React Routes
  • Deployment

Stretch Goals + Future Plans

  • Whatsapp Notification via twilio when your portfolio hits a milestone you set
  • Paper-Trade
  • Ranking
  • Chat Room

Technologies used

  • mongodb
  • node.js
  • express.js
  • react
  • react-icon
  • iex api

Installation Steps

TBA