Meta-Minds

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

Project Overview

Live Site

Meta-Minds is a blog app that allows users to create and discover ideas about the metaverse. Users begin on the home page where they are provided a preview of all the latest posts. From there, they can click on a post to view it in detail, or navigate to other screens where they can view posts by category and create posts. The first two categories users can navigate to are called 'Meta' and 'Mana'. Meta allows users to read about the company formerly known as Facebook, while Mana allows users to stay up-to-date with one of the BIGGEST metaverse platforms, Decentraland. In addition to these two options, users can also explore the 'Crypto' and 'Film' categories. The Crypto category is for users wanting to read about other incredible metaverse platforms, not named Decentraland, and the Film category is for the Sci-Fi/Dystopian enthusiasts who love to dissect movies that incorporate virtual reality and other emerging technologies into their production.

MVP

• The Meta Minds MVP is a full CRUD, full stack application with a Rails back end and React front end. It is fully responsive, and styled using CSS.

Goals

• RESTful JSON API built with Ruby on Rails with full CRUD
• Full CRUD interactive front end built with React
• Form to input new posts and update posts
• Display all user posts
• Implement Auth for users
• Fully responsive styling with two media queries
• Clean, organized, and structured code

Libraries and Dependencies

Library	Description
React	Javascript library for building user interfaces
React Router	Library for routing, enabling navigation between components
axios	Promise-based HTTP client for Node.js and the browser
bcrypt	Password hashing function
jwt	Securely transmits information between parties as a JSON object
cors	Allows a server to indicate any origins from which a browser should permit loading resources
CKEditor	WYSIWYG rich text editor
Luxon	Library for dealing with dates and times in JavaScript
React HTML Parser	A utility for converting HTML strings into React components

Client (Front End)

Wireframes

Link to Wireframes

• Home Screen

• Sign In Screeen

• Sign Up Screen

• Meta Screen

• Mana Screen

• Crypto Screen

• Film Screen

• User Posts Screen

• Create Post Screen

• View Post Screen

• Update Post Screen

Component Tree

Link to Component Tree

Component Architecture

src
|__ assets/
      |__ icons
      |__ images
|__ components/
      |__ Header.jsx
      |__ Footer.jsx
      |__ Layout.jsx
      |__ ScrollToTop.jsx
|__ screens/
      |__ CreatePost.jsx
      |__ Crypto.jsx
      |__ Explore.jsx
      |__ Film.jsx
      |__ Mana.jsx
      |__ Meta.jsx
      |__ SignIn.jsx
      |__ SignUp.jsx
      |__ UpdatePost.jsx
      |__ UserPost.jsx
      |__ ViewPost.jsx
|__ services/
      |__ Api_config.js
      |__ auth.js
      |__ Posts.js
      |__ Users.js
      |__ Comments.js

Time Estimates

Task	Priority	Estimated Time	Time Invested	Actual Time
Wireframes, ERD, Component Tree	H	3 hrs	3 hrs	3 hrs
Set up and test CRUD on back end	H	3 hrs	3 hrs	3 hrs
Set up React App	H	1 hrs	1 hrs	1 hrs
Create file structure	H	1 hrs	1 hrs	1 hrs
Create and test CRUD on front end	H	3 hrs	3 hrs	3 hrs
Create layout components	H	3 hrs	3 hrs	3 hrs
Create SignIn/SignUp Screens	H	3 hrs	2 hrs	2 hrs
Create CreatePost screen	H	3 hrs	3 hrs	3 hrs
Create Explore screen	H	3 hrs	3 hrs	3 hrs
Create Meta screen	H	3 hrs	3 hrs	3 hrs
Create Mana screen	H	3 hrs	3 hrs	3 hrs
Create Crypto screen	H	3 hrs	3 hrs	3 hrs
Create Film screen	H	3 hrs	3 hrs	3 hrs
Create UserPosts screen	H	3 hrs	3 hrs	3 hrs
Create CreatePost screen	H	3 hrs	3 hrs	3 hrs
Create ViewPost screen	H	3 hrs	3 hrs	3 hrs
Create UpdatePost screen	H	3 hrs	3 hrs	3 hrs
Basic Styling	H	3 hrs	3 hrs	3 hrs
Test and clean up code	H	3 hrs	3 hrs	3 hrs
Advanced Styling and finetuning	M	5hrs	5 hrs	5 hrs
Post MVP	L	3 hrs	3 hrs	TBD
TOTAL		61 hrs	61hrs	TBD

Server (Back End)

ERD Model

Even though the ERD contains a comments table, I chose not to display comments on the front end for aesthetic purposes.

---

Post-MVP

• Implement filtered search on search bar
• Integrate WYSIWYG rich text editor for creating posts
• Utilize 'Load More' navigation for posts on Explore screen
• Incorporate scroll-to-top functionality on page change
• Allow image upload using Cloudinary

---

Code Showcase

The ViewPost menu was a lot of fun to implement using a toggle and ternary operator. When the toggle was set to true, the ViewPost menu showed on the screen and, depending on if the user created the post or not, gave the user different options to further interact with the post. If the user created the post, they could update, delete, or copy the post. If they didn't create the post, they were restricted to copying the post.

 {isOpen && (
            (currentUser && currentUser.id === post.user_id ? (
              <div className="view-post-show-options-dropdown">
                <Link className="edit-post-div-link" to={`/update-post/${post?.id}`} key={post?.id}><div className="edit-post-div">
                  <img className="edit-post-icon" src="https://res.cloudinary.com/tylerwashington98/image/upload/v1638767523/Meta-Minds/icons8-edit-30_c4n4wb.png"></img>
                  <div className="edit-post-text">Edit Post</div>
                </div></Link>
                <div onClick={() => setFinalDelete(!finalDetete)} className="delete-post-div">
                  <img className="delete-post-icon" src="https://res.cloudinary.com/tylerwashington98/image/upload/v1638767542/Meta-Minds/icons8-delete-48_ujlv7r.png" ></img>
                  <div className="delete-post-text">Delete Post</div>
                </div>
                <div onClick={copy} className="copy-post-url-div">
                  <img className="copy-link-icon" src="https://res.cloudinary.com/tylerwashington98/image/upload/v1638893598/Meta-Minds/icons8-link-50_jaqddt.png" ></img>
                  <div className="copy-link-text">Copy Post</div>
                </div>
              </div>) : (
              <div onClick={copy} className="view-post-show-options-dropdown-two">
                <div className="copy-post-url-div-two">
                  <img className="copy-link-icon" src="https://res.cloudinary.com/tylerwashington98/image/upload/v1638893598/Meta-Minds/icons8-link-50_jaqddt.png" ></img>
                  <div className="copy-link-text">Copy Post</div>
                </div>
              </div>
            )))}

Code Issues & Resolutions

Before deciding not to display the comments on the front end, I had trouble making a post request to the '/comments' endpoint. I solved this problem by making sure that the paramaters on the back end, for creating a comment, were identical to the parameters on the front end for creating a comment. Intially I was trying to send just the content to the '/comments' endpoint, but once I included the post_id and user_id the post requests succeeded.