Portfolio

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

Overview

My Portfolio is a project I've been really excited to work on, It's a great way for employers to reach out to me and see how creative I can be!

MVP

• Back End

  • Build a Ruby on Rails server
  • Make use of RESTful JSON endpoints
  • Implement working Full CRUD

• Front End

  • Build Front End using React.js
  • Consume data from Ruby on Rails API

• Styling

  • Style using CSS
  • utilize AOS(Animations On Scroll) React Library
  • Implement media queries for mobile view

• Deployment

  • Deploy Front End with Netlify
  • Deploy Back End with Heroku

Libraries and Dependencies

Library	Description
React	import and use essential react hooks such a useState and useEffect
React Router	import and use Link and Route and useHistory to redirect to different pages
AOS	add nice animation and effects on scroll throughout the page
Axios	make axios calls to the backend
JWT	used for authentication and validation
Bcrypt	used for encrypting passwords

Client (Front End)

Wireframes

• Desktop View

• Mobile View

Component Tree

src
|__ screens/
      |__ Home.jsx
      |__ Login.jsx
      |__AddProject.jsx
      |__EditProject.jsx 

|__ components/
      |__Nav.jsx
      |__AboutMe.jsx
      |__Projects.jsx
      |__Resume.jsx
      |__Contact.jsx
      |__ProjectButtons.jsx
      |__Comment.jsx
       
      
|__ services/
        |__projects.js
        |__users.js

Time Estimates

Task	Estimated Time	Time Invested
Rails Backend	3H	hrs
Create CRUD Actions	3H	hrs
Seed Data	2H	hrs
Routes	4H	hrs
Services Folder	3H	hrs
Front-End CRUD	4H	hrs
Debugging	6H	hrs
TOTAL	25H	hrs

Server (Back End)

ERD Model

Code Showcase

Code Issues & Resolutions