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.
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
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.
- Be styled with CSS.
- Use Flexbox or Grid in layout design.
- Implement 2 media queries for responsive design on 2 screen sizes (including desktop).
- 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.
- Deploy fully-functional front-end via Netlify.
- Deploy back-end via Heroku.
- Deploy early and often.
- 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.
- 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 | 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 |
https://www.figma.com/file/yQY4X4qz7VjwdeVKydyjHp/Project-4---Robison-Portfolio?node-id=0%3A1
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
https://whimsical.com/portfolio-component-hierarchy-XQdwcoC12xt9hUr1bkNBTe
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 |
- Incorporate users and authentication
- Build in a contact me section