• Overview
• MVP
  • Goals
  • Libraries and Dependencies
  • Client (Front End)
    • Wireframes
    • Component Tree
    • Component Hierarchy
    • Component Breakdown
    • Time Estimates
  • Server (Back End)
    • ERD Model
• Post-MVP
• Code Showcase
• Code Issues & Resolutions

Overview

Tackle-IT

Tackle-IT: A Productivity app that helps you organize your ideas and tasks, containing a homepage where you can see the summary of all your tasks, a to-do page where you can see all off your added tasks and a detail page where you can edit or delete the task.

MVP

• Build Ruby on Rails server with 3 tables database
• Build front end with react and render the proper data in each page
• Homepage rendering the summary of the tasks
• To-Do page with index and add button
• Task detail page with edit and delete
• Backend working properly CRUD.

Goals

• Render elements,
• having buttons working properly,
• sidebar routing to the correct pages,
• backend have the correct database,
• pass the data from backend to front-end.

Libraries and Dependencies

Library	Description
React	Front end library.
React Router	Link, Route and Switch.
Axios	front end connect with database.
Ruby on Rails	Backend .
Material UI / Bootstrap	Design library for React.

Client (Front End)

Wireframes

Figma Wireframe

• Desktop Landing

Component Tree

Component tree

Component Hierarchy

src
|__ assets/
      |__ fonts
      |__ icons
      |__ images
|__ components/
      |__ ./shared
          |__ Nav.jsx
          |__ Nav.css
          |__ Footer.jsx
          |__ Footer.css
      |__ ./Task
          |__ Task.jsx
          |__ Task.css
|__ screens/
      |__ ./Register
          |__ Register.jsx
          |__ Register.css
      |__ ./Login
          |__ Login.jsx
          |__ Login.css
      |__ ./Home
          |__ Home.jsx
          |__ Home.css
      |__ ./To-Do
          |__ To-Do.jsx
          |__ To-Do.css
      |__ ./Done
          |__ Done.jsx
          |__ Done.css
      |__ ./Settings
          |__ Setting.jsx
          |__ Settings.css
|__ services/
      |__ apiConfig.js
      |__ task.js
      |__ category.js
      |__ users.js

Time Estimates

Task	Priority	Estimated Time	Time Invested	Actual Time
Backend.	H	12 hrs	TBD	TBD
Homepage	H	3 hrs	TBD	TBD
SideBar	H	3 hrs	TBD	TBD
Tasks summary	H	2 hrs	TBD	TBD
To-do page	L	2 hrs	TBD	TBD
To-do details pg	M	3 hrs	TBD	TBD
To-do CRUD actions	H	8 hrs	TBD	TBD
Post MVP	M	6 hrs	TBD	TBD
TOTAL		39 hrs	TBD	TBD

Server (Back End)

ERD Model

---

Post-MVP

• Tasks done page
• Log in page
• Settings page for the User Auth, with user profile picture, name,email, password and CRUD buttons
• Toggle button for dark theme
• Add done tasks summary to Homepage
• Add done and share button on task details page
• Done tasks, and done task details page

---

Code Showcase

Use this section to include a brief code snippet of functionality that you are proud of and a brief description.

Code Issues & Resolutions

Use this section to list of all major issues encountered and their resolution.