my-top-five


Overview

My Top 5 is an application that allows users to share the things that bring them joy.


MVP

The My Top 5 MVP users will be able to add a list to any provided category. They will also be able to create an account, which will keep track of all of their lists and give them full CRUD functionality on those lists.


Goals

  • Allow users to create top 5 lists
  • Allow users to discuss their preferences
  • Provide users with ideas for new areas to explore

Libraries and Dependencies

Library Description
React Will be used to create the pages on which the application will be displayed.
React Router Will allow navigation between pages.
Ruby on Rails Will provide the backend database and connections.

Client (Front End)

Wireframes

Here

Component Tree

Here

Component Architecture


src
|__ assets/
      |__ fonts
|__ components/
      |__ Categories.jsx
      |__ CategoryCreate.jsx
      |__ Footer.jsx 
      |__ Lists.jsx
      |__ ListDetail.jsx
      |__ ListCreate.jsx
      |__ ListUpdate.jsx
      |__ Navbar.jsx
      |__ UserDetail.jsx
      |__ UserCreate.jsx
      |__ UserUpdate.jsx      
|__ services/
      |__ Api-config.js 

Time Estimates

Task Priority Estimated Time Time Invested Actual Time
Psuedocoding H 3 hrs 1 hrs TBD
Build out api calls H 3 hrs 2 hrs TBD
Build Routes H 3 hrs 1 hrs TBD
Add Categories Page H 3 hrs 2 hrs hrs
Add Lists Page H 3 hrs 2 hrs hrs
Add User Page H 3 hrs 2 hrs hrs
Create List CRUD Actions H 3 hrs 3 hrs TBD
Create User CRUD Actions H 3 hrs 2 hrs TBD
Build Functional Navbar H 3 hrs 1 hrs TBD
Styling H 3 hrs 6 hrs TBD
More Styling L 3 hrs 6 hrs TBD
Testing H 3 hrs 3 hrs TBD
Debugging H 3 hrs 3 hrs TBD
TOTAL 39 hrs 34 hrs TBD

Server (Back End)

ERD Model

ERD


Post-MVP

  • Add Like button, and display most liked lists.
  • Add comments section