Journal App README

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

Overview

Journal App is essentially a blog app, build from scratch. The intention is to make it so eventually, it can be used to publish, search, tag, archive, read, and share any entries. It utilizes a ruby on rails backend and a react frontend.

CLICK HERE FOR THE LIVE SITE

MVP

The Journal App MVP will include the following:

• Have a RESTful JSON API.
  • Build a Ruby on Rails server, exposing RESTful JSON endpoints.
  • Build a database with at least 3 tables:
    • 1 user table
    • 2 other tables, of your choosing
    • There must be at least 1 association between your tables. (1:m or m:m)
  • Utilize Rails to define models for interacting with the database.
  • Implement Authentication using JWT.
  • Implement working generic controller actions for full-CRUD (index, show, create, update, delete) between the 2 non-user tables AND partial-CRUD (create, at least) for the user table.
• Have a working, interactive React app, built using npx create-react-app.
  • Have at least 8 separate, rendered components in an organized and understandable React file structure.
  • Utilize functional and class React components appropriately.
  • Utilize state and props in your components efficiently.
  • Use only React for DOM Manipulation.
• Consume data from your Ruby on Rails API, and render that data in your components.
• Utilize React Router, for client-side routing.
• Utilize Authentication, permitting the user to:
  • Register, login, and send authenticated requests.
  • Perform index or show actions, whether or not they are logged in for Posts.
  • Perform create, update, and delete actions when logged in for Posts.
  • Perform create action when logged in for Comments.
• Use flexbox or Grid in your layout design.
• Implement 2 media queries for responsive design on 3 screen sizes (including desktop).

Goals

• Create a journal app with posting and commenting functionality
• Make sure it's presentable and readable on multiple screen sizes

Libraries

Library	Description
React	Frontend App
SCSS	Styling
React Router	Frontend Routing
Axios	Connect frontend to backend
Ruby on Rails	Backend server
JWT	Authentication
Bcrypt	Password security
PostgreSQL	Database

Client (Front End)

Wireframes

Expand to view.

• Desktop Post

• Desktop Posts

• Tablet Posts

• Mobile Posts

• Mobile Login

• Mobile Sign Up

• Mobile New Post

• Mobile Edit Post

Notes

• All content layout is the same across mobile and desktop aside from the nav bar and the posts view
• Logged in users see different nav bar choices, they are described in the desktop views, but omitted in the tablet/mobile views for brevity, though of course in the final they will be included properly
• Edit and delete comments will be Post-MVP

Component Tree

Expand to view.

Component Hierarchy

src
|__ assets/
      |__ fonts
      |__ graphics
      |__ images
      |__ mockups
|__ components/
      |__ shared/
            |__ Header.jsx
            |__ Nav.jsx
            |__ Main.jsx
            |__ Layout.jsx
      |__ Login.jsx
      |__ SignUp.jsx
      |__ NewPost.jsx
      |__ EditPost.jsx
      |__ Posts.jsx
      |__ Post.jsx
      |__ Comments.jsx
      |__ Comment.jsx
|__ services/

Component Breakdown

Component	Type	state	props	Description
App	class	y	y	App root
Header	functional	n	n	Holds the site name
Nav	functional	n	y	Nav top or side bar (depending on screen size)
Main	functional	n	y	Box for the main content to live in
Layout	functional	n	y	Holds the header, nav, and main components, as well as layout children.
Login	functional	n	y	Login as an existing user.
SignUp	functional	n	y	Create a new user.
NewPost	functional	n	y	Create a new post.
EditPost	functional	n	y	Lets you edit a given post.
Posts	functional	n	y	Shows a list of all posts.
Post	class	y	n	Shows a post's details, as well as its comments.
Comments	functional	n	y	Shows multiple Comment components and lets you add a comment.
Comment	functional	n	n	Shows an individual comment.

Component Estimates

Task	Priority	Estimated Time	Time Invested	Actual Time
Database models	H	2 hrs	40m	TBD
Controllers (CRUD)	H	5 hrs	1h 35m	TBD
Routing (backend)	H	3 hrs	20m	TBD
Seed data	M	1.5 hrs	35m	TBD
Authentication	H	5 hrs	45m	TBD
Connect rails/react	H	4 hrs	1h 10m	TBD
Component creation	H	3 hrs	2h 20m	TBD
State and methods	H	3 hrs	2h 55m	TBD
React router	M	1.5 hrs	1h 30m	TBD
Basic CSS	L	1.5 hrs	1h	TBD
Mobile layout	M	1 hrs	1h 20m	TBD
Tablet layout	M	1 hrs	10m	TBD
Desktop layout	M	1 hrs	50m	TBD
Code cleanup	M	0.5 hrs	5m	TBD
TROUBLESHOOTING	H	7 hrs	1h 35m	TBD
TOTAL		40 hrs	_ hrs	TBD

Server (Back End)

ERD Model

Expand to view.

---

Post-MVP

• Implement rich text editor
• Dark/light theme toggle and preference (saved to user account and/or local storage)
• Tagging and search system
• Add image(s) to posts
• Edit/delete comments
• View only a given user's posts

---

Code Showcase

{this.props.currentUser && this.props.currentUser.id === this.state.post.user.id
 &&
 <div class="crud-buttons">
  <Link to={`/post/${this.props.match.params.id}/edit`}>Edit</Link>
  <Link to='#' onClick={this.handleDelete}>Delete</Link>
 </div>
}