• 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

Job Search Activity Tracker is an app to record activities and actions related to job searching.

MVP

The Job Search Activity Tracker MVP records a comnpany, a job offered by that company and records actions related to applying for that job.

Goals

• Add Company data
• Add Job data.
• Create, Read, Update and Delete company data.
• Create, Read, Update and Delete job data.
• Create, Read, Update Activity data.

Libraries and Dependencies

Library	Description
React	Front end presentation.
React Router	Control redirects between update and display screens.
Express	Routing between screens in the client view.
Rails	Back End API construction.
Axios	API Accessing.
Postgres	Database Layer.

Client (Front End)

Wireframes

Use the Wireframes section to display desktop, tablet and mobile views. No hand-drawn wireframes. Use a tool like wireframe.cc, Whimsical or AdobeXD

• Activity Screen

• Add Company Screen

• Add Job Screen

• List of Companies Screen

• Main Menu Screen

Component Tree

|__ Main Container
     |__ Layout
         |__ Header
            |__ Navigation
         |__ Footer
     |__ Main Screen
     |__ Company Add/Update
     |__ Job Add update
     |__ Activity Add/Update

Component Hierarchy

Use this section to define your React components and the data architecture of your app. This should be a reflection of how you expect your directory/file tree to look like.

src
|__ assets/
      |__ fonts
      |__ graphics
      |__ images
      |__ mockups
|__ components/
      |__ Activity.jsx
      |__ Company.jsx
      |__ Footer.jsx
      |__ Header.jsx
      |__ Job.jsx
      |__ Navigation.jsx
|__ layout
      |__ Layout.jsx
|__ screens
      |__ Activity.jsx
      |__ AddCompany.jsx
      |__ AddJob.jsx
      |__ AddActivity.jsx
      |__ Company.jsx
      |__ Job.jsx
|__ services/
      |__ api-config.js
      |__ route-config.js
      |__ company.js

Component Breakdown

Component	Type	state	props	Description
Header	functional	n	n	The header will contain the navigation.
Navigation	functional	n	n	The navigation will provide a link to each of the pages.
Activity	functional	y	y	Activity renders the list of activities related to a company.
Company Card	functional	n	y	This card will render the company info.
Job Card	functional	n	y	Render job info.
AddCompany Card	functional	n	y	Render create company form.
AddJob Card	functional	n	y	Render create job form.
AddActivity Card	functional	n	y	Render create activity form.
Activity Card	functional	n	y	Render activity info.
Footer	functional	n	n	The footer will show info about me and a link to my portfolio.

Time Estimates

Task	Priority	Estimated Time	Time Invested	Actual Time
Header	M	1 hrs	2 hrs	TBD
Navigation	M	1 hrs	1 hr	TBD
Footer	M	1 hrs	< 1hr	TBD
Main Screen	M	2 hrs	< 1hr	TBD
Activity Screen	M	2 hrs	6 hrs	TBD
Company Screen	M	2 hrs	3 hrs	TBD
Job Screen	M	2 hrs	4 hrs	TBD
Add Company Form	M	3 hrs	2 hrs	TBD
Add Job Form	M	3 hrs	1.5 hrs	TBD
Add Activity Form	M	3 hrs	1 hr	TBD
Create CRUD Actions (Front End)	H	4 hrs	1 hr	TBD
Controllers	H	3 hrs	2 hrs	2.5 hrs
Models	H	2 hrs	1.5 hrs	2 hrs
Routes	H	1 hr	< 1hr	40 min
Seed Data	M	1 hrs	< 1hr	40 min
Create CRUD Actions (Back End)	H	2 hrs	1 hr	1 hr
TOTAL		6 hrs	TBD	TBD

Server (Back End)

ERD Model

PDF

---

Post-MVP

• Edit Company Data
• Edit Job Data
• Action Due Reminder

---

Code Showcase

Code Issues & Resolutions