PP5 React - SportsTalk
Project description
SportsTalk is a content sharing platform that connects people from all four corners of the earth to share knowledge in what they are passionate about.
The platform is powered by a Django REST API and React.
This Readme contains only to the front end part and the back end part can be found here
User stories
Category | as a | I would like to | so that I can | UI components |
---|---|---|---|---|
AUTH | visitor | sign up for an account | have a personal profile with a picture | SignUpPage SignInPage ProfilePage EditProfileForm |
AUTH | visitor | sign up for an account | create, like and comment on posts | CreatePostPage PostList Comment |
NAVBAR | user | access relevant links of the site | so that I can navigate to the different pages of the website | NavBar |
PROFILES | user | view a profile | learn more about the user and see all their posts | ProfilePage EditProfileForm EditDropdown |
PROFILES | user | edit my profile | keep the information about myself up to date | EditProfileForm ChangePasswordForm ChangeUsernameForm |
POSTS | visitor | view list of posts from users | stay up to date with the most recent posts | PostList |
POSTS | visitor | view a specific post | see the engagement | PostDetail ViewPostPage |
POSTS | visitor | search for a post | find a post by title or author | PostList SearchBar |
POSTS | visitor | keep scrolling to fetch more posts | have a smooth browsing experience | InfinteScrollComponent |
POSTS | user | create a post | share my ideas with the community | CreatePostPage |
POSTS | user | edit and delete my post | correct mistakes or remove posts I regret | EditPostPage EditDropdown |
LIKES | user | like a post that I enjoy | let the author know about that | PostDetail PostList likeicon |
LIKES | user | unlike a post | regret my like or correct a mistaken like | PostDetail PostList likeicon |
COMMENTS | user | comment on a post | share my thoughts on about the topic | PostDetail Comment CreateCommentForm |
COMMENTS | user | edit or delete my comment | correct mistakes or remove comments I regret | Comment CreateCommentForm EditCommentForm EditDropdown |
Popular components:
- PostList:
- Feed
- InfinteScrollComponent:
- PostList, PostDetail (for comments), ProfilePage
- PostDetail:
- Likes, Comments
- EditDropdown
- EditPostPage, EditProfileForm, EditCommentForm
Wireframes
Color palette
- I used this color palette because it fit well with how I intended the logo design to be.
here)
Sprints (link to my KANBAN can be found- Sprint 1 (Navbar)
- This sprint focused on creating the NavBar component so that users can navigate their way around on the page.
- Sprint 2 (Signup/Signin pages)
- This sprint was about giving visitors the ability to create an account as well as logging in.
- Sprint 3 (Posts)
- As the site is a content sharing platform, a key component of this app is for users to be able to create posts, and edit or delete them.
So in this sprint the focus was on getting all those components up and running.
- As the site is a content sharing platform, a key component of this app is for users to be able to create posts, and edit or delete them.
- Sprint 4 (Likes)
- This sprint added the ability for users to like and unlike posts that are not their own.
- Sprint 5 (Comments)
- This sprint focused on giving the users the ability to comment on posts to engage in topics they love.
The users also get to edit or delete their own comments.
- This sprint focused on giving the users the ability to comment on posts to engage in topics they love.
- Sprint 6 (Profiles)
- This sprint aimed to create Profiles components for users to share more about themselves.
Tests
Manual Testing
-
Profiles:
- Visitor can:
- View all Profiles but not Create, update or delete any any profiles
- Authenticated user can:
- Create a profile
- edit their profile (username, password, profile image)
- Add display name and a bio
- Visitor can:
-
Posts:
- Visitor can:
- View all posts but not Create, update or delete any posts
- Authenticated user can:
- Create posts
- Edit or delete their own posts
- Images are being validated to be smaller than 4096pixels in width, height as well as 2MB in size.
- File type is also being validates as only images are allowed
- Visitor can:
-
Comments:
- Visitor can:
- View all comments but not Create, update or delete any comments
- Authenticated user can:
- Create comments on posts
- Edit or delete their own comments
- Visitor can:
-
Likes:
- Visitor can:
- View all likes but not Create or delete any likes
- Authenticated user can:
- Create likes on posts
- Delete their own likes
- Visitor can:
Bugs
Deployment
- In package.json file, in the “scripts” section, add the following prebuild command:
"heroku-prebuild": "npm install -g serve",
- Add a Procfile at the root of the project with the following web command:
web: serve -s build
- Comment out all console.logs
- (I chose to leave them instead of removing them completely so that it is easier to debug if some issues would arise)
- Used Bootstraps default imports so that the import load isn't heavy on the app
- Deploy to Heroku
Live React Project can be found here
Libraries and contexts:
- Libraries:
- react-infinite-scroll-component
- A component to make all your infinite scrolling woes go away by removing pagination and only load more data if user is scrolling far enough.
- react-bootstrap
- React-Bootstrap is a complete re-implementation of the Bootstrap components using React. It has no dependency on either bootstrap.js or jQuery. If you have React setup and React-Bootstrap installed, you have everything you need.
- react-router-dom
- React Router is a fully-featured client and server-side routing library for React, a JavaScript library for building user interfaces. React Router runs anywhere React runs; on the web, on the server with node.js, and on React Native.
- axios
- Promise based HTTP client for the browser and node.js
- jwt-decode
- jwt-decode is a small browser library that helps decoding JWTs token which are Base64Url encoded.
- react-infinite-scroll-component
- Contexts:
- UserContext
- Used to allow other components always having the current logged in users data available
- ProfileContext
- Used to let components know which profile to render
- UserContext
CREDITS
- Logo created by using this template on Canva.com
- Favicon generated by https://favicon.io/
- Color Palette generated by Colormind using the logo as inspiration
- Thanks to Code Institute staff for the Moments Walkthrough Project that gave me loads of inspiration to this project.