Moments - React

Project description

Moments is a social media platform. It has been designed for its users to share their life's moments. The application consists of the React app and an API. Welcome to the React front end project section.

User stories

Category	as	I want to	so that I can	UI components
auth	user	register for an account	have a personal profile with a picture	SignUpForm ProfilePage ProfileEditForm
auth	user	register for an account	create, like and comment on posts	Post PostPage Comment
auth	user	register for an account	follow users	Profile ProfilePage
posts	visitor	view a list of posts	browse the most recent uploads	PostsPage
posts	visitor	view an individual post	see user feedback, i.e. likes and read comments	Post PostPaget
posts	visitor	search a list of posts	find a post by a specific artist or a title	PostsPage
posts	visitor	scroll through a list of posts	browse the site more comfortably	InfiniteScrollComponent
posts	user	edit and delete my post	correct or hide any mistakes	PostEditForm MoreDropdownMenu
posts	user	create a post	share my moments with others	PostCreateForm
posts	user	view liked posts	go back often to my favourite posts	PostsPage
posts	user	view followed users' posts	keep up with my favourite users' moments	PostsPage
likes	user	like a post	express my interest in someone's shared moment	Post like icon
likes	user	unlike a post	express that my interest in someone's shared moment has faded away	Post (un) like icon
comments	user	create a comment	share my thoughts on other people's content	PostPage CommentCreateForm
comments	user	edit and delete my comment	correct or hide any mistakes	PostPage Comment MoreDropdownMenu
profiles	user	view a profile	see a user's recent posts + post, followers, following count data	ProfilePage Post
profiles	user	edit a profile	update my profile information	ProfileEditForm
followers	user	follow a profile	express my interest in someone's content	Profile follow button
followers	user	unfollow a profile	express that my interest in someone's content has faded away and remove their posts from my feed	Profile (un) follow button

Detailed page and component breakdown:

Most reused components:

• PostsPage:
  • Home, Feed, Liked
• Post:
  • PostsPage
• Profile:
  • PopularProfiles, PopularProfiles (mobile)
• DropdownMenus:
  • Post, ProfilePage, Comment
• InfiniteScrollComponent:
  • PostPage (loading Comment components)
  • PostsPage (loading all, feed or liked Post components)
  • ProfilePage (loading Post components that belong to the profile)

Deployment steps

• add prebuild script
• add Procfile
• remove all console.logs
• use Bootstrap default imports to minimize the build
• deploy to Heroku

Tests:

Automated:

• used the msw library to mock user and logout endpoints
• tested the NavBar component:
  • renders without a problem
  • renders the link to a user profile for a logged in user
  • renders the sign in and sign up buttons again on logout

Manual:

• every other feature tested extensively

Libraries, contexts and hooks:

• react-infinite-scroll-component
  • introduced to replace traditional pagination with lazy loading instead of pagination to make the application more performant and seem more snappy/ engaging
• react-bootstrap:
  • introduced
• contexts:
  • CurrentUserContext exposes the user state to the entire app. Relevant components can subscribe to its changes
  • ProfileDataContext exposes the profile state to the entire app. Enables the PopularProfiles component to be in sync with the ProfilePage contents
• custom hooks written to reduce repeatable state logic:
  • useClickOutsideToggle: enable toggle on the burger menu
  • useRedirect: enable redirect for users who are either logged in or logged out, depending on the use case

---

Happy coding!