ReadIt

ReadIt is a microblog site where users can talk about topics, news, and more while interacting with other users by applauding and commenting on other posts.

Table of Contents

• Description
• How to use ReadIt
• Mockups
• Defining our Working MVP
• Learning Points
• Code Snippets
• Credits
• Contact Info

Description

The ReadIt Application is a great way for users to Create posts on their favorite topics. They can comment on their posts and they can also comment on other peoples posts. We've made it so that users can also give an 'applause' (or like) to someone's post.

Other cools features are editing abilities for the user that is logged in, they can edit their own posts (but not others), edit their own comments (to their own comments), and Delete their own posts or comments.

So, what do you have to do to fully use this app??

You will have to sign up first and then you can

• create posts
• add comments
• edit your own stuff and
• add reactions to any post.

Further features you will find here are after logging in:

• You can check out your profile page will show you
  • all of your own posts, in ascending order so you can see the latest things you've created.
• Edit abilities and creating comments

So, get moving and start posting! Click Here ...for the deployed link for ReadIt

---

How to use it, and what it looks like

When you first come to the landing page (logged in or not) you are presented with all of the posts within the application that all of the users have created. You are able to read and search through all posts. Just not able to comment, update, or react to the posts.

This is the landing page

Here is the Landing Page

However, you cannot add a reaction or create a post/comment unless you have a login. Here are some examples of login, and sign up that you should do next.

If not Logged in, you will see the opening page like this:

THIS IS NOT LOGGED IN

If not,

then login like this

and get going on reading/posting/commenting.

Or you can

sign-up, like the following

and enjoy the application a big more.

Once you are logged in. You will see the landing page and be able to create-posts, see what is in your profile (if an) and update/comment on all of your posts. Below is what it will look like after you sign in.

After you sign in

now go and start posting

Here is what it will be like when you go to create a post.

Click Create Post Link

You click on the "Create Post" link and fill in Title and Message Text. Tags are optional. Then click "Create Post" button.

Lastly, besides exploring on your own, you can search. Search by tag or text. You have options.

See What Search Can Do

Search is fun and extensive. "Search" button.
There is loads more. Go and explore.

Here are the mockups that we created.

The site actually came out quite a bit like the mockups. You will see that when you go to it (link is at the top of this page) and start exploring.

---

Landing Page and Portal Layout ... see all posts

---

Login and Signup page

---

Creating a Post after login and what you will see

---

The Post and PostId along with comments and after login

---

What we see when editing a Post

---

And lastly, adding comments to a post

---

Learning Points

• Client side gql mutations have an effect on the useMutation hooks. If the mutation gql doesn't return the appropriate values that are updated, then the useMutation hook will not cause a component render.

Code Snippets

Mutation of updating a nested subdoc's array.

addReactionToComment: async (parent, { postId, commentId, ...newReaction }) => {
  return await Post.findOneAndUpdate(
    { _id: new ObjectId(postId), 'comments._id': new ObjectId(commentId) },
    {
      $push: { 'comments.$.reactions': newReaction }
    },
    { new: true }
  )
}

Credits

Comparing ObjectIds

Using async in react useEffect hook

Idea for multiple $or queries

Idea for react rendering with multiple conditions

Idea for using filter: saturate for handclap emoji

Resources

JWT docs

Mongoose $each

MongoDB Indexes for $text

MongoDB using Regex in .find()

Google fonts

Contact Info

Collaborator	GitHub	Reach Out to Us
Jorge Castro	Profile	Email
Deepak Sinha	Profile	Email
Jason Savoie	Profile	Email
Nathan Geronimo	Profile	Email