Versus
Versus is a product comparison website where users can post items to find out more about them from other users' points of view.
On this platform, users can show their passion for how they feel towards specific products. They can upvote or downvote it or indulge themselves in discussing these products.
So, to enjoy full features simply register yourself and sign in to the world of Versus.
The live site can be found here - Versus
Table of Contents
- Versus
- Table of Contents
- Other .md file links
- Frontend Testing
- Backend
- User Experience (UX)
- EPIC: User Profiles
- EPIC: Home Posts Page, Trending and Voted
- EPIC: Post Page
- EPIC: Users Comments
- EPIC: Create Post
- EPIC: User Navbar
- EPIC: Sign-in/ Sign-up
- Agile Methodology
- Design
- Color Scheme
- Imagery
- Wireframes
- Fonts
- Testing
- Security Features and Defensive Design
- Custom error 404 page:
- Form Validation
- Features
- Header
- Home Page
- Search Bar
- Most Up Voted Profiles
- Category List
- Add Post Page
- Edit Post Page
- Trending Page
- Voted Page
- Profile Page
- Edit Profile Page
- Change Password Page
- Change Username Page
- Comment Section
- Edit Comment
- Sign Up Page
- Sign in Page
- Sign out Modal, Model # 1
- Post Creation Rules, Model # 2
- Website rules modal on Sign Up, Model # 3
- Reusable React Components
- Asset
- Avatar
- Modal Handler
- More Dropdown
- Libraries and Technologies Used
- Languages
- Frameworks - Libraries - Programs Used - Packages Used
- Deployment
- Combining existing DRF and React projects into the same workspace
- Ready unified DRF and React before deployment
- Heroku
- Forking the GitHub Repository
- Making a Local Clone
- Credits
- Code
- Online Documentation
- Media
- Acknowledgments
Table of contents generated with markdown-toc
Other .md file links
Frontend Testing
Navigate to the FRONTEND TESTING README file.
Backend
Navigate to the BACKEND README file.
User Experience (UX)
A visitor to Versus is most probably someone who wants to buy a product and post that product just to find what others think about that product, is it worth buying or if that product information is already there that visitor could get exact information by viewing the post.
EPIC: User Profiles
The milestone is about user profiles. Their number of up/down votes, number of posts and all the posts.
User Stories
- As a user, I can see users' profiles so that I can see users' posts, their votes and their posts specifically know more about them.
- As a user, I can click three dots on my profile page so that I can select the change I want to apply to my profile.
- As a user, I can edit my profile so that I can change my profile image and add a bio.
- As a user, I can change the username so that I am known by a different name when other users see my profile.
- As a user, I can change my password so that I can upgrade the security of my profile.
Future Release User Story
- As a user, I can accept friend requests so that I can keep track of people who can see my private posts. #41
EPIC: Home Posts Page, Trending and Voted
A list of posts will be shown on this page and users will be able to search for posts based on title, username, price, and category. Almost the same tasks will be performed on these three pages. A list of popular profiles based on the highest number of upvotes can also be seen.
User Stories
- As a user, I can view all the most recent posts so that I am up to date with the newest content.
- As a user, I can search posts based on price, location, date, title, content, and category so that I can find the posts I am looking for.
- As a user, I can keep scrolling for new posts so that I can keep getting new information for myself without interruptions.
- As a user, I can click voted on the navbar on the home page so that I can view the posts again on which I have voted.
- As a user, I can see and click profiles on the home page with the highest number of upvotes so that I can see what they are posting, and see their content and profile data.
- As a user, I can view the posts that are trending so that I can be up to date with products that are trending in the market.
EPIC: Post Page
This epic handles a single post data and content in it such as votes, comments, and image profile of the user who posted it.
User Stories
- As a user, I can view single post data so that I can view all the data related to it.
- As a user, I can vote on posts so that I can vote for best or worst products.
- As a user, I can update and delete posts by clicking on the top right corner of posts that belong to me so that I can modify posts as needed.
- As a user, I can edit my post so that I can update the data of my posts as I see fit.
EPIC: Users Comments
The user can comment on posts, and edit or delete their comments. The user is also able to view other post
User Stories
- As a logged-in user, I can add comments to a post so that I can share my thoughts about the post.
- As a user, I can view all the comments so that I can observe what others think of the post or what others are talking about.
- As a user, I can keep on scrolling comments so that I can view all user comments.
- As a user, I can update and delete comments by clicking on the top right corner of comments that belong to me so that I can modify comments as needed.
EPIC: Create Post
Users can create posts in which they can add an image, content add a post title set its category and price.
User Stories
- As a user, I can create or cancel a creation of post so that I either share a new post with others or cancel the post if I change my mind about it.
- As a user, I can add a title to a post so that others can read what the product is.
- As a user, I can add content for a post so that others can read what the product is in detail.
- As a user, I can select the category of the post that best defines it so that others can understand which category the product belongs to.
- As a user, I can upload an image in a post so that others can upvote/downvote by viewing it.
- As a user, I must know the rules for adding a post so that I can add a post without any validation errors or interruptions.
- As a user, I can set posts to private and public so that public posts can only be seen by all and private posts can only be seen by friends.
EPIC: User Navbar
Users can interact with the nav bar icons and redirect to other web pages. Users can also sign out by clicking its icon.
User Stories
- As a user, I can be redirected to sign up so that I can create a new account for the Versus app and start using all features.
- As a user, I can see and click my profile picture so that view which accounts I am logged in from and view/edit it when I want.
- As a user, I can switch between nav items so that I can navigate to different sections of the website.
- As a user, I can view the current feed and the votes I have given on the products so that observe the current situation of the products and my status of votes on products I have voted.
- As a user, I can add a post by clicking on the add post option on the navbar so that I can create new posts of products and people can upvote/downvote them.
- As a user, I can sign in and out so that I can see my data or browse the app and sign out when I no longer want to use the application
EPIC: Sign-in/ Sign-up
This milestone covers Signup/ Sign-up.
User Stories
- As a user, I can sign up so that I can post products and get people to vote on them and also vote on other people's products.
- As a user, I can sign in so that I can view the latest posts or add new posts.
Agile Methodology
GitHub Projects was used to manage the development process using the agile approach. To ensure streamlined organization, all User Stories were grouped into Milestones, representing the corresponding Epics, following the MOSCOW prioritization technique. For a comprehensive overview of the project's progress and workflow, I invite you to explore our dynamic Kanban board. here.
The user stories seen above are based on the items mentioned on the project board.
Design
The design of this website is very simple yet elegant and the color scheme gives a very relaxing vibe to attract more users.
Color Scheme
The color palette is generated using COOLORS.
The color scheme of the website gives a very good contrast after placing the main items on the web page and the main purpose of this color scheme is to give effect of an enthusiasm to the site users.
Imagery
All the images are fetched from the Cloudinary database except sign-in and sign-up which are fetched from online sources. Read the credits for more details.
Wireframes
Landing Page
The landing page shows public posts even when the user is still not logged in. Once logged in user can also view the most trending posts based on up votes and also voted section which contains all the posts on which the user had voted. Product Post Page
All the data related to a single post is shown here and also once the user has logged in, the user can comment or vote on the post directly from here. Add Post Page
Users can create a post on products via this page. Rules are also mentioned here. Profile Page
User can make all sorts of changes to their profile from here once logged in. All the posts are also present here on the profile page. Sign in Page
Users access all the features of the website once signed in via this page. Sign up Page
New users can sign up from here to access the website all features. Fonts
DM Sans is the primary font for this website, secondary font is set to sans-serif.
Testing
Testing and results can be found here
Security Features and Defensive Design
Custom error 404 page:
Custom page 400 Bad request page is added in case the user tries to enter invalid URLs.
Form Validation
- The submit button will not work unless all the fields are filled with proper data and warning signs will also appear if data is not valid or fields are empty.
- Based on the data entered, every form in the project will be validated before moving forward. Characters will only take characters, symbols and integers as input but only in their relevant fields.
Features
Header
Logo
- The logo is almost on the left side of the nav bar. The VS sign defines products posted on the site. It can be the best or the worst depending upon the votes.
- Users can switch to the home page by clicking it.
Navigation bar
Home Page
- The home page contains a list of all the public posts if signed out.
- Once signed in, the user can see private posts as well if he/she is a friend of the user who had private posts.
- The home page also shows popular profiles who have the highest number of votes.
- Users can click on the category section to search for specific categories of products.
- Users cannot vote or comment on the posts if logged out.
- Users can vote and comment on posts once logged in.
- All the navbar items are clickable and the user can switch to it easily.
- Users can add friends directly from the home page.
- Users can see the profiles if he/she clicks on the profile avatar or name on top of each post.
Search Bar
-
The posts on the page are searchable based on the following
- Title
- Content
- price
- Category
- Location.
-
The posts are searchable on the following pages
- Home
- Trending
- Category
- Voted
Most Up Voted Profiles
- This component shows profiles with the highest to lowest number of votes.
- Users can add/remove friends directly from here if logged in.
- Users can also see this section if logged out but the option of adding or removing friends is removed.
- Users can see the profiles if he/she clicks on the profile avatar.
Category List
- A list of categories can be seen here which are clickable.
- Users switch to the category page on a category is clicked from here.
- The Category section is here as an aid so that users can switch to posts based on specific categories.
Add Post Page
- Users always have the option to set posts as private.
- Private posts are only visible to friends.
- An image size should not exceed 2 MB.
- The image can still be changed before posting.
- Users can add content to the post it can either be a product description or just if the user wants to ask something specifically about the post and wants others' opinions.
- Users must tell the price of the product.
- Users must also tell the location where this product is found in the post.
- Users must select a category of the product before posting.
- Users can cancel and go back to home.
- Users can create posts after all fields are filled by clicking Create Post.
- Users can also see the rules of creating a post by clicking post creation rules.
Edit Post Page
- During Edit user had all the options mentioned in the add post page. All the fields of editing posts are set to actual post data.
- Users always have the option to set posts as private.
- Private posts are only visible to friends.
- An image size should not exceed 2 MB.
- The image can still be changed before posting.
- Users can add content to the post it can either be a product description or just if the user wants to ask something specifically about the post and wants others' opinions.
- Users must tell the price of the product.
- Users must also tell the location where this product is found in the post.
- Users must select a category of the product before posting.
- Users can cancel and go back to home.
- Users can create posts after all fields are filled by clicking Create Post. Users can also see the rules of creating a post by clicking post creation rules.
Trending Page
- This page shows the content mentioned in the following
- Search Bar
- Most Up Voted Profiles
- Category List
- Trending shows filtered posts based on all the posts that are trending with the highest number of upvotes.
- This page is only accessible to users who are signed in.
Voted Page
- This page shows the content mentioned in the following
- Search Bar
- Most Up Voted Profiles
- Category List
- The Voted page shows posts that the current user had voted on.
- The votes can either be negative or positive.
- This page is only accessible to users who are signed in.
Profile Page
- This page shows the content mentioned in "Most Up Voted Profiles".
- The user Profile page has the following content
- Avatar
- Total posts
- Total upvotes
- Total down votes
- User's bio
- Option to edit profile
- Option to change username
- Option to change password
- Below all the profile-related data all the posts are also available.
- If the profile is related to other users editing the profile option is unavailable.
- If the profile is related to other users there is an add friend option available.
- Users can click on profile posts to switch to that specific post as well.
- Logged-in users can upvote or downvote from here as well.
Edit Profile Page
- Once the user clicks on the edit profile page user can add the following to the profile
- Profile image (This field is pre-populated if the profile picture already exists)
- User's Bio (This field is pre-populated if the bio already exists)
Change Password Page
- The logged-in user can change their password from here by entering a new password.
- The user must enter a new password again before confirming it
Change Username Page
- The user can change the username by selecting it from the change username from the profile.
- The username should be unique.
Comment Section
- Once the user clicks on a specific post, the user is redirected to that specific post.
- The user can comment on posts from here only if logged in.
- The logged-out users are not able to comment.
- Users can edit or delete comments from here
Edit Comment
- The users can only edit their comments.
- The users can only delete their comments.
- The users edit their comments while remaining on the same page.
Sign Up Page
- All new users can sign up from here to see all the features of the website.
- Users must provide their unique username.
- Users must enter a new password.
- Users must enter the password again before signing up.
- Users can see the rules here as well before signing up.
- All the data will be validated before proceeding.
- Once all data is validated user will be redirected to the sign-in page.
Sign in Page
- Users must provide their unique username.
- Users must enter a new password.
- Once validated user will be redirected to the home page.
Sign out Modal, Model # 1
- The logged-in user can sign out directly from the navbar.
- The user will be asked if the user is sure to sign out inside the modal.
- The user can press cancel to avoid signing out.
- The user can press signout and will be redirected to the home page.
Post Creation Rules, Model # 2
- There is a specific set of rules to follow before posting. All users must follow it.
- The user can click on the "Post creation rules" button to see all the rules.
- The user can click close or cross button to close the modal.
Website rules modal on Sign Up, Model # 3
- There is a specific set of rules to follow before signing up. All users must follow it.
- The user can click on the "Click here to see rules" button to see all the rules.
- The user can click close or cross button to close the modal.
Reusable React Components
Asset
Asset component is used in many parts of the website before content is loaded. It had three parts mentioned below.
- The Spinner appears before the content is loaded.
- The Image appears if no content is found.
- message appears below the image when no content is found.
Avatar
Avatar acts as the user's image which is mostly beside usernames. This component sets the following.
- Source as what is the avatar's image origin.
- Image width
- Image height
- Avatar alternate name
Modal Handler
This shows and closes the data inside a modal.
- Instructions or rules as the content of the modal
- Title as what should be the name of the modal.
More Dropdown
This component provides the following options to users
- The user can click on three dots and can edit the profile by selecting one of the options.
- The user can edit or delete a comment.
- The user can edit or delete a post.
Libraries and Technologies Used
Languages
- Python
- HTML
- CSS
- Javascript
Frameworks - Libraries - Programs Used - Packages Used
- ReatJS is a front-end JavaScript library for building user interfaces based on UI components.
- React Bootstrap is a component-based library that provides native Bootstrap components as pure React components. Used to create a responsive application/component UI.
- Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple to use library in a small package with a very extensible interface.
- jwt-decode is used to decode and extract information from a JWT token.
- react-router-dom is routing library for the React JavaScript library. Used to display different components based on the URL entered in the browser.
- GitHub is used to host the repository and agile tool.
- GitPod is used to develop project and organize version control.
- Heroku used to deploy the live project.
- Google Fonts is used to change the fonts of the project.
- Balsamiq is used to generate wireframe images for this project.
- Techsini is used for generating site mockup.
- Coolors is used to create a color palette.
- Favicon is used to create the favicon.
- Chrome Dev Tools is used for overall development and bug locating/fixing, including testing responsiveness, performance, and confirming the webpage's accessibility using lighthouse.
- Font Awesome is used for icons all over the project.
- Grammerly is used to proofread the all the md files.
- Prettier is used to format react code.
- Canva helped me in creating new logo for project.
Deployment
Combining existing DRF and React projects into the same workspace
-
I used the link mentioned below to make a unified react and DRF application.
-
Add in axiosDefaults.js to make unified projects work.
axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN';Ready unified DRF and React before deployment
The below link explains the steps to take before deployment to Heroku.
Heroku
The site was deployed using Heroku and the live site can be found here: Versus. Note: Make sure to set DEBUG to False before deployment.
- Before actual deployment use Heroku "pip freeze > requirements.txt" on the Gitpod console. This will add all the dependencies in the requirements.txt file which will be needed by Heroku later during deployment.
- Log in to Heroku.
- On the main page there is an option to create a new app, click it.
- Enter a unique application name and select your region.
- Click on the Create App button.
- Click settings and select Config Vars.
- Click Reveal Config Vars enter the Key as "ALLOWED_HOST" and Value as "versus-bac55e8730b2.herokuapp.com" and press the add button.
- Add CLOUDINARY_URL as another config var and click add.
- Next, add Postgres DATABASE_URL and click add.
- After that add Django project SECRET_KEY.
- Same way Set DISABLE_COLLECTSTATIC to 1 and click add.
- Add two more of them as CLIENT_ORIGIN, CSRF_TRUSTED_ORIGINS and set values to "https://versus-bac55e8730b2.herokuapp.com"
- Go to the top of the page and select the deploy option.
- Select Github as the deployment method.
- Confirm to connect with GitHub and authorize Heroku from Github.
- In the search bar type the repository name and click the connect button.
- Scroll to the bottom of the deploy page and either click Enable Automatic Deploys for automatic deploys or Deploy Branch to deploy manually. Manually deployed branches will need re-deploying each time the repo is updated.
- Click View to view the deployed site.
Forking the GitHub Repository
With Forking one can make a copy of a repository and view or make changes in it without affecting the original repository. Following are the steps to do this.
- Log in to GitHub and locate Versus repository.
- At the top right side of the page just below the navigation bar, locate the fork button.
- You will now have a copy of the repository.
Making a Local Clone
- Log in to GitHub and locate Versus repository.
- Just below the repository name, click "Code".
- There is an option to copy the HTTPS link. Press the copy icon.
- Open Git Bash on the local machine.
- Change the current working directory to the location where we want the cloned directory to be made.
- Type git clone on bash and paste the HTTPS URL we copied earlier.
- Press Enter. local clone will be created.
Credits
Code
- The main inspiration and concepts for this project are taken from the Code Institute's Advanced Front End Course - Moments walkthrough.
Online Documentation
- React Bootstrap codes helped me in building parts of projects rapidly.
- React Documentations.
- React Bootstrap code snippets.
Media
pexels helped a lot in finding the product images mentioned below.
Images List by pexels
- [Image 1](https://www.pexels.com/photo/assorted-color-bubble-jackets-hanged-16170/) - [Image 2](https://www.pexels.com/photo/assorted-gold-plated-table-figurines-1099816/). - [Image 3](https://www.pexels.com/photo/blue-glass-vase-220987/) - [Image 4](https://www.pexels.com/photo/green-plant-in-close-up-photography-13521384/) - [Image 5](https://www.pexels.com/photo/assortment-of-colorful-guns-for-game-5217754/) - [Image 6](https://www.pexels.com/photo/cactus-in-brown-vase-1302305/) - [Image 7](https://www.pexels.com/photo/car-interior-of-tesla-17345646/) - [Image 8](https://www.pexels.com/photo/space-gray-iphone-8-818043/) - [Image 9](https://www.pexels.com/photo/silver-iphone-on-a-green-grass-191841/) - [Image 10](https://www.pexels.com/photo/photo-of-a-gray-dell-laptop-displaying-pexels-webpage-811587/) - [Image 11](https://www.pexels.com/photo/woman-printing-photos-on-paper-while-forking-at-home-7014397/) - [Image 12](https://www.pexels.com/photo/person-holding-pringles-potato-chips-bottle-1450480/) - [Image 13](https://www.pexels.com/photo/ikea-showroom-of-bedroom-11244064/) - [Image 14](https://www.pexels.com/photo/a-person-holding-colgate-toothpaste-box-5612670/) - [Image 15](https://www.pexels.com/photo/gold-global-plates-342945/) - [Image 16](https://www.pexels.com/photo/box-of-soap-near-jar-17596996/) - [Image 17](https://www.pexels.com/photo/hair-treatment-bottles-in-box-on-table-17576517/)Acknowledgments
- Code Institute tutors helped a lot and pointed me in the right direction.
- My Mentor Antonio Rodriguez for helpful feedback during project development.