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.
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 |
- 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)
- add prebuild script
- add Procfile
- remove all console.logs
- use Bootstrap default imports to minimize the build
- deploy to Heroku
- 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
- every other feature tested extensively
- 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!