Git Product home page Git Product logo

portfolio's Introduction

John Robison's Portfolio

Overview

John Robison's Portfolio is a full-stack application with the goal of effectively communicating my skills to potential employers. It will consist of a homepage with my contact information and general contact information, General Assembly projects, math projects, writing samples, and favorite books. The favorite books section will have full CRUD functionality.

The greatest challenges I expect to face will be using Ruby on Rails; we only just started learning rails, so I admit I have certain trepidations about building a full-stack application with this framework. That being said, I'm super excited to use this project as an opportunity to really understand the nuts and bolts of rails and determine exactly how I can most effectively use this tool to process data! Given my concern with Ruby, I also think time will pose a significant issue. With only four days to actually build this application, it isn't enough to simply "work harder." Rather, I will need to be meticulous in my planning to ensure no moment is wasted.

MVP

Server (Back-End)

The server will have the following minimal functionality:

  • Have a RESTful JSON API
    • Build a Ruby on Rails server, exposing RESTful JSON endpoints
    • Build a database with 3 tables: authors, books, and genres.
    • Utilize Rails to define models for interacting with the database.
    • Implement working generic controller actions for Full CRUD (index, show, create, update, delete) between your non-User tables

Client

The front-end will have the following minimal functionality:

  • Have a working, interactive React app, built using npx create-react-app
    • Have 13 React components in an organized and understandable React file structure.
    • Utilize functional or class React components appropriately
    • Utilize state and props in your components efficiently
  • Consume my data from Ruby on Rails API and render this data within the components.
  • Utilize React Router for client-side routing
  • Demonstrate Full CRUD actions (index, show, create, update, and delete) on the front end.

Styling

  • Be styled with CSS.
  • Use Flexbox or Grid in layout design.
  • Implement 2 media queries for responsive design on 2 screen sizes (including desktop).

Linting

  • Indent properly.
  • Utilize high-quality, semantic variable names.
  • Follow camelCase, snake_case, or kebab-case convention.
  • Remove unnecessary boilerplate React files and code.
  • Remove all console.log() statements and commented out code that are not direct comments on present code blocks.

Deployment

  • Deploy fully-functional front-end via Netlify.
  • Deploy back-end via Heroku.
  • Deploy early and often.

Procedural

  • Initialize a git repo on Github, with a link to the hosted project.
  • Have frequent commits, making a robust commit history at least every day (75 commits minimum).
  • Use effective and safe branching and merging processes.

Goals

  • Successfully incorporate CRUD for the Book Screens
  • Utilize React-Bootstrap to create a smooth, minimalist design
  • Fully functional and deployed front-end and back-end
  • 13 screens, according to the following specifications
    • Home Screen: Introduce John Robison and the general application to the user
    • Projects Screen: List my relevant projects, including the following:
      • Community Table
      • Heal U
      • Velocity
      • Drone Wars
    • Selected Writing Samples Screen: List key relevant writing samples to demonstrate my ability to communicate complex ideas
      • On the Origin of Evil
      • Prime Numbers and Post-Modern Art
      • Rational Dragons
    • Favorite Books
      • Examine Book
        • Edit Book
      • Add New Book
      • Filter by:
        • Mathematics and Physics
        • Computer Science
        • Social Sciences
        • Science Fiction
        • Entrepreneurship and Finance
        • Other Forms of Media (films, televsion shows, etc.)

Libraries and Dependencies

Libraries Dependencies
React A front-end JavaScript UI for building a component-based architecture
React Router A standard library for routing components in React
React Bootstrap A library for styling react components using the Bootstrap design philosophy
Axios A standard library used to import data from an API
Rails A web-application framework which allows you to create a database using the MVC pattern

Client (Front End)

Wireframe

https://www.figma.com/file/yQY4X4qz7VjwdeVKydyjHp/Project-4---Robison-Portfolio?node-id=0%3A1

Component Tree

This is how I expect my React file structure to look:


client
|__ screens/
  |__ Homepage.jsx
  |__ Projects.jsx
  |__ Writing.jsx
  |__ Books.jsx
    |__ScienceFiction.jsx
    |__Mathematics.jsx
    |__SocialScience.jsx
    |__SocialScience.jsx
    |__Business.jsx
    |__OtherMedia.jsx
  |__ BookDetail.jsx
  |__ BookEdit.jsx
  |__ BookNew.jsx
|__ layout/
  |__ Header.jsx
  |__ Footer.jsx
|__ services
  |__filter.js
  |__apiConfig.js
  |__books.js
 

Component Architecture

https://whimsical.com/portfolio-component-hierarchy-XQdwcoC12xt9hUr1bkNBTe

Server (Back End)

ERD Model

https://app.diagrams.net/#HrobisonJohn%2Fcoursera-test%2Fmain%2Fsite%2FERD%20Diagram%20Robison%20Portfolio.drawio

Time Estimates

Task Priority Estimated Time (Hours)
Set up M/V/C H 2
Create CRUD Actions H 3
Set up Endpoints H 4
Seed Database H 1
Build out React App H 1
Create CRUD Actions on Front-End H 2
Back-end Deployment H 1.5
Render Home Page & Minimal Styling H 3
Render Projects Page & Minimal Styling H 3
Render Writing Samples Page & Minimal Styling H 3
Render Books Page & Minimal Styling H 3
Render Books Detail Page & Minimal Styling H 3
Render New Books Page & Minimal Styling H 2
Render Edit Books Page & Minimal Styling H 2
Style Home Page, Projects Page, Writing Page H 3
Style Books Page and child pages H 3
Style Books Detail Page H 3
Style Book Edit Page & New Book Page H 3
Media Queries H 2
Deployment H 1
TOTAL -- 49

Post-MVP

  • Incorporate users and authentication
  • Build in a contact me section

portfolio's People

Contributors

robisonjohn avatar jrobison-standard-data avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.