• 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

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

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).

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

Expand to view.

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

Expand to view.

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/

Expand to view.

• 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

{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>
}