search

JamieB92 / Gamer-Connect-Backend-PP5

1 stars 0 forks source link

readme

GamerConnect

Gamer-Connect-Logo

Welcome to GamerConnect, the ultimate social media platform for gamers!

GamerConnect is a dynamic and inclusive platform designed for gamers of all ages and backgrounds. Whether you're a seasoned pro or just starting your gaming journey, our platform is tailored to bring the gaming community together.

This is the backend Repo for the frontend repo please click here.

For the live site - https://gamer-connect-625bab79a49e.herokuapp.com/

Features

Why GamerConnect?

How to Get Started

Feedback and Contributions

Planning:

Kanban

This project was executed following agile methodologies, employing incremental sprints to deliver small features. The project's Kanban board was established using GitHub Projects, and additional details can be accessed here.
This board provides an overview of the project cards and their respective statuses.

Kanban

I structured the database with PostgreSQL due to its reliability and advanced features.
To visualize and manage the schema, I employed DbVisualizer, enabling a detailed examination of tables and relationships.

User Stories

Epic 1 - Post Sharing & Interaction:

Create Gaming Posts (Images):

As a GamerConnect user, I aim to share my gaming experiences by crafting posts containing images, facilitating connections with the gaming community.

Create Gaming Posts (Videos):

As a GamerConnect user, I aim to share my gaming experiences by crafting posts containing clips and images, facilitating connections with the gaming community.

View All Posts:

As a GamerConnect user, I wish to scroll through all the latests posts on the site

View Post Details:

As a GamerConnect user, I want to check out individual posts to learn more about interesting gaming posts.

Epic 2 - Content Discovery & Engagement:

Site Navigation

As a GamerConnect user, I want a responsive navbar that allows me to easily move between different pages on the site.

Show Appreciation:

As a GamerConnect user, I want to show my liking for interesting posts to express support.

Keyword-Based Search:

As a GamerConnect user, I aim to search for posts and user profiles using keywords to find content and gamers matching my interests.

Review Liked Posts:

As a GamerConnect user, I want a straightforward way to revisit posts I've liked, making it easy to relive favorite gaming moments

Epic 3 - Post-Specific Interactions:

Post Editing Privileges:

As a post owner on GamerConnect, I aim to have control over the editing of my post title and description to ensure accuracy and updates.

Delete a Post Privilige:

As a GamerConnect user, I want to delete my posts this will allow me to manage my content.

Active Commenting:

As a GamerConnect user, I intend to contribute to post discussions by adding comments, allowing me to share thoughts and engage with fellow gamers.

Comment Control:

As the owner of a comment, I wish to have the capability to delete and edit my comments, allowing me to manage the content within the application.

Epic 4 - User Profiles & Connections:

New Account Creation:

As a GamerConnect user, I intend to establish a fresh account to access all the privileges available to registered gamers.

User Profile Viewing:

As a GamerConnect user, I want to check out fellow gamers' profiles to explore their gaming posts and learn more about their gaming experiences.

User Following & Unfollowing:

As a GamerConnect user, I want to be able to follow and unfollow other gamers.

Profile Customization:

As a GamerConnect user, when logged in, I want to personalize my gaming identity by changing my profile picture and updating my bio.

Display GamerConnects most popular profiles

As a GamerConnect user, I want to effortlessly find and connect with popular profiles in the gaming community.

Epic 5 - Developer

Initial Backend Setup

As a developer, I need to set up the backend project structure for seamless project development.

Initial Frontend Setup

As a developer, I must configure the frontend project structure to facilitate project development.

Deploy Backend

As a developer, I need to guarantee the successful deployment of the project's backend for site accessibility.

Deploy Frontend

As a developer, I must ensure the successful deployment of the project's frontend for users to interact with.

Database Setup

As a developer, it's crucial to create a database and integrate it into the project for effective information storage.

Features

Site Navigation

User Story:

As a GamerConnect user, I want a responsive navbar that allows me to easily move between different pages on the site.

Navbar

A navigation bar has been implemented, transitioning into a hamburger menu on smaller devices to prevent navigation item overlap. This ensures users can access and navigate the site seamlessly on devices of any size. The navbar is user-friendly, allowing easy navigation and smooth transitions between each page. The Navbar shows distinct icons based on the user's sign-in status, enabling them to easily distinguish whether they are logged in or out.

New Account Creation

User Story:

As a GamerConnect user, I want to create a new account to enjoy all the benefits available to registered users.

singupform

A user-friendly sign-up page has been introduced, providing a clear and straightforward registration process. This enables users to register with GamerConnect, establishing a profile for them upon registration. After completing the registration, users are directed to a login page where they can access their account using the created username and password. Once logged in, users gain access to all privileges reserved for the GamerConnect Community.

Create a post with a Image

User Story

As a GamerConnect user, I aim to share my gaming experiences by crafting posts with an image, facilitating connections with the gaming community.

imagepostform

For a registered user, a user-friendly form has been developed to effortlessly facilitate post creation. This not only encourages users to express their creativity but also contributes to the growth of the community and enhances the overall application experience. The form has been designed to be straightforward and intuitive, ensuring a seamless and enjoyable posting process for users.

Create a post with a Video

User Story

As a GamerConnect user, I aim to share my gaming experiences by crafting posts with a video, facilitating connections with the gaming community.

videopostform

For a registered user, a user-friendly form has been developed to effortlessly facilitate post creation. This not only encourages users to express their creativity but also contributes to the growth of the community and enhances the overall application experience. The form has been designed to be straightforward and intuitive, ensuring a seamless and enjoyable posting process for users.

View all Posts

User Story

As a GamerConnect user, I want to easily browse through the newest posts on the site.

allposts

Users can effortlessly navigate through the content available on GamerConnect using the seamlessly designed post page. The interface provides a user-friendly platform where individuals can leisurely scroll through an organized presentation of the freshest posts. This ensures that users indulge in a fluid and instinctive browsing encounter, enhancing their overall exploration of the latest updates and engaging content.

View an individual posts details

User Story

As a GamerConnect user, I want to check out individual posts to learn more about interesting gaming posts.

indvpost

Upon selecting a post of interest, users are directed to the post view interface, where they can delve into a detailed examination of the individual post. Within this post view, users gain the ability to explore the content more comprehensively and engage further by perusing all associated comments. This seamless transition provides users with an immersive experience, enabling them to interact extensively with the content and participate in the broader community conversation surrounding the post.

Show Appreciation

User Story

As a GamerConnect user, I want to show my liking for interesting posts to express support.

like

Users have the opportunity to convey their endorsement and encouragement on GamerConnect through the simple yet impactful action of liking posts. This interactive feature serves as a precise gauge, effectively mirroring users' genuine appreciation for captivating and noteworthy content within the platform. Engaging in the process of liking a post has been designed to be effortlessly straightforward, ensuring a seamless and expeditious experience for users, thereby contributing to a user-friendly and enjoyable interaction with the platform.

Keyword Based Search

User Story:

As a GamerConnect user, I aim to search for posts and user profiles using keywords to find content and gamers matching my interests.

search

Users can easily find posts and user profiles on GamerConnect by using relevant keywords. The search function accurately retrieves content aligned with the entered keywords, ensuring a simple and smooth experience through the user-friendly interface.

Post Editing Privileges

User Story:

As a GamerConnect post owner, I want to be able to edit my post title and description for accuracy and updates.

edit1

edit2

Users can easily change their posts by clicking on the options icon on the post and selecting edit, making it simple to keep their content up-to-date. This user-friendly feature ensures quick and accurate updates to titles and descriptions, making the experience dynamic. By allowing easy edits, this encourages users to take charge of their content, adding their own touch and making the community stronger.

Delete a Post Privilige

As a GamerConnect user, I want to delete my posts this will allow me to manage my content.

edit1

Post owners can easily delete their posts with a designated icon. The process is user-friendly and accessible, allowing post owners to manage their content effortlessly.

Active Commenting

User Story

As a GamerConnect user, I want to join post conversations by commenting, sharing thoughts, and interacting with fellow gamers.

comment

On GamerConnect, users can easily add comments to posts. The platform accurately shows user comments in post discussions. Commenting is simple and user-friendly, encouraging gamers to engage with each other.

Comment Control

User Story

As a comment owner, I want to be able to edit and delete my comments, giving me control over the content in the app.

commentedit

Users who own comments can easily modify their contributions using simple and user-friendly options. The platform seamlessly integrates editing features, allowing individuals to quickly adjust their posts for accuracy or clarity without any hassle. The delete function is seamlessly integrated, providing an efficient way for comment owners to swiftly remove their content. These straightforward processes empowers users to keep their comments relevant and aligned with their intentions.

Display GamerConnects most popular profiles

User Story

As a GamerConnect user, I want to effortlessly find and connect with popular profiles in the gaming community.

commentedit

When users log in, they'll find a section on the homepage highlighting popular profiles with pictures and usernames.
Clicking on a profile thumbnail takes users directly to the detailed profile view, making it easy to discover and connect with influential gamers.

User Following & Unfollowing

User Story

As a GamerConnect user, I want to be able to follow and unfollow other gamers.

follow

Users can easily follow and unfollow other gamers, enhancing their ability to connect within the gaming community. The platform accurately records and displays the user's following status for others, providing transparency in connections and allowing users to manage their network with ease.

Connect Through Shared Gaming Interests

User Story

I want to explore what games others are playing and showcase my own, So I can connect with fellow gamers looking for friends.

games

Users can explore the gaming preferences of others and exhibit their own. Game cards provide clear information, including the game title, user details, and whether they're seeking gaming friends.

Future Feature Ideas

Messaging System:

Streaming Capability:

Design

Colors:

color-palete

Font - Google Font Lexend

Layout:

color-palete

color-palete

Setup and Deployment

Here you can find the instructions to recreate the projects

Frontend Setup:

Github

Gitpod (Please use Chrome or Firefox)

Heroku Setup:

Setting Up React Using CI template:

Connecting FrontEnd with the Backend in Heroku:

Note: Gitpod will change the dev server URL every so often so update when needed

Axios

Backend Setup

Github

Gitpod (Please use Chrome or Firefox)

Heroku Setup:

Django and Django Rest Framework Setup

Cloudinary and Pillow

dj_rest_auth

All Auth

JWT Tokens

Backend Deployment

ElephantSQL(Database):

IDE Setup For Deployment:

Connect ElephantSQL instance to Db Visualizar

Heroku Deployment

Testing :

Test Scenario : Image Upload Functionality

Objective: Ensure a logged-in user can successfully upload images for their gaming posts.

Test Steps:

Result: The image uploaded was displayed correctly in the post preview, and the image was visible on the platform as expected.

Test Scenario : Post without Image

Objective: Ensure a logged-in user cannot create a post without uploading an image.

Test Steps:

Result: An alert error message prevented the post submission without attaching an image, as expected.

Test Scenario : Video Upload Functionality

Objective: Ensure a logged-in user can successfully upload videos for their gaming posts.

Test Steps:

Result: The video uploaded was displayed correctly in the post preview, and the video was visible on the platform as expected.

Test Scenario : Post without Video

Objective: Ensure a logged-in user cannot create a post without uploading a video.

Test Steps:

Overall Result Summary for Logged-In User:

Image and Video Upload: A logged-in user can successfully upload both images and videos for their gaming posts.
Post Creation Without Media: A logged-in user is prevented from creating posts without attaching an image or video, triggering an alert.

Test Scenario : Logged-Out User Attempts Post Creation

Objective: Ensure a logged-out user cannot access the image upload functionality.

Test Steps:

Result: A logged-out user attempting to access the use the create a post functionality is redirected to the home page, preventing post creation without authentication, as expected.

Test Scenario: Scroll Through Posts

Objective: Ensure users can scroll through all the latest posts on the site.

Test Steps:

Result: Users can successfully scroll through all the latest posts on the site, as expected.

Test Scenario: View Individual Post

Objective: Ensure users can view detailed information about an individual post.

Test Steps:

Result: Users can successfully view detailed information about an individual post, including post content and comments. Options to like and comment the post are available, as expected.

Test Scenario: Responsive Navbar

Objective: Ensure the navbar is responsive and allows easy navigation between different pages on the site.

Test Steps:

Result: The navbar is responsive, showing different icons based on the user's signed-in status. All navbar links are accessible and lead to the correct - pages, as expected.

Test Scenario: Like a Post

Objective: Ensure users can like posts to express support.

Test Steps:

Test Scenario: Unlike a Post

Objective: Ensure users can unlike posts.

Test Steps:

Test Scenario: Unable to Like Own Post

Objective: Ensure users cannot like their own posts.

Test Steps:

Result: Users are unable to like their own posts, preventing self-liking as expected.

Test Scenario: Search Functionality

Objective: Ensure users can search for posts and user profiles using keywords.

Test Steps:

Result: Search results include relevant posts and user profiles based on the entered keyword, as expected.

Test Scenario: Search Functionality(Cant find a post)

Objective: Ensure users get a message if their are no posts associated to the input

Test Steps:

Result: Search results that dont include relevant posts and user profiles are shown a image and message.

Test Scenario: Liked Posts Section

Objective: Ensure users can easily revisit posts they've liked.

Test Steps:

Result: All liked posts are displayed in the "Liked Posts" section, providing a straightforward way to revisit favorite gaming moments, as expected.

Test Scenario: Edit Post

Objective: Ensure post owners can edit their post title and description.

Test Steps:

Result: The user was successfully taken to the edit form, and the post was updated with the new information as expected.

Test Scenario: Delete Post

Objective: Ensure users can delete their posts.

Test Steps:

Result: A confirmation alert appeared, and the post was successfully removed from the platform.

Test Scenario: Add Comment

Objective: Ensure users can actively contribute to post discussions by adding comments.

Test Steps:

Result: The comment was successfully added and visible in the comment section.

Test Scenario: Edit/Delete Comment

Objective: Ensure comment owners can edit and delete their comments.

Test Steps:

Result: The comment was successfully updated, and the deletion confirmation appeared, removing the comment from the post.

Test Scenario: Create New Account

Objective: Ensure users can successfully create a new account.

Test Steps:

Result: The new account was created successfully, and the user was logged in.

Test Scenario: View User Profile

Objective: Ensure users can view fellow gamers profiles.

Test Steps:

Result: The user profile displayed relevant information, including posts and user details.

Test Scenario: Follow/Unfollow User

Objective: Ensure users can follow and unfollow other gamers.

Test Steps:

Result: The user was successfully added to the follower list and removed upon unfollowing.

Test Scenario: Customize Profile

Objective: Ensure users can personalize their gaming identity by changing their profile picture and updating their bio.

Test Steps:

Result: The profile was successfully updated with the new information.

Test Scenario: Popular Profiles Section

Objective: Ensure users can effortlessly find and connect with popular profiles in the gaming community.

Test Steps:

Result: Upon submitting the contact form, the user receives an on-screen message confirming that the message has been successfully received. The message is clear and assures the user that their contact request has been acknowledged.

Test Scenario: View Contact Requests in Admin Panel

Objective: Ensure the admin can view contact requests in the Django admin panel.

Test Steps:

Result: The admin can successfully view and access contact requests in the Django admin panel. The integration allows for efficient management of user inquiries.

Test Scenario: Create and Delete Game Post

Objective: Ensure users can successfully create and delete game posts, and the information is accurately displayed in the game section and on the user's profile.

Test Steps:

Result: Users can successfully create and delete game posts. The information is accurately displayed in the game section and on the user's profile, ensuring that users can share their current gaming preferences and connect with others.

API Testing

The APIs underwent local testing in the development phase, with the primary testing conducted as an integral part of the front-end repositories. This included manual testing of the actual APIs through form inputs and page loads.

pep8 testing was applied to all folders, revealing several small issues such as lines exceeding length limits, unnecessary blank spaces, indentation problems, and docstring concerns.

All identified issues were addressed, with the exception of extended lines in migration files and settings.

Unit testing was carried out as well on the Posts app following along with the walkthrough material for DRF_API You can find the unit testing here.

Bugs

Presented below is a comprehensive list of bugs identified during the development phase. Each bug is accompanied by its individual issue story, and you can access a detailed investigation for each one at the provided link.

Issue 6 - User getting logged out as soon as page refreshes on a mobile browser.

The identified issue is a known bug preventing the application from opening on Apple mobile devices on various browsers. Specifically, when users attempt to log in, they are redirected back to the login page. This bug stems from the failure to save cookies in the local storage.

To address this issue on Safari web browsers, it is necessary to disable "Prevent Cross-Site Tracking" in the browser settings.

For a further release I am looking at resolving this by deploying both the Heroku apps to one domain which I believe will resolve the issue. I have linked in the issue the steps needed to take to do this and will be looking to implement in the new year.

Techonlogies Used

Dependencies

React:

{
"name": "moments",
"version": "0.1.0",
"private": true,
"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.4",
    "bootstrap": "^4.6.0",
    "jwt-decode": "^3.1.2",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.3",
    "react-dom": "^17.0.2",
    "react-infinite-scroll": "^0.1.5",
    "react-infinite-scroll-component": "^6.1.0",
    "react-player": "^2.13.0",
    "react-router-dom": "^5.3.4",
    "react-scripts": "^5.0.1",
    "web-vitals": "^1.1.2"
},

Django:

    asgiref==3.7.2
    cloudinary==1.36.0
    dj-database-url==0.5.0
    dj-rest-auth==2.1.9
    Django==3.2.23
    django-allauth==0.44.0
    django-cloudinary-storage==0.3.0
    django-cors-headers==4.3.1
    django-filter==23.4
    djangorestframework==3.14.0
    djangorestframework-simplejwt==5.3.0
    gunicorn==21.2.0
    oauthlib==3.2.2
    Pillow==10.1.0
    psycopg2==2.9.9
    PyJWT==2.8.0
    python-magic==0.4.27
    python3-openid==3.2.0
    pytz==2023.3.post1
    requests-oauthlib==1.3.1
    sqlparse==0.4.4
    urllib3==1.26.15

Credits