PP5 Advanced FrontEnd: Capture The Moment

This is a social media platform that I made with the help of the walkthrough projects "Django REST Framework" and "Moments" by Code Institute.

The front end of the project is built with React and the back end is built with Django REST Framework to make a built-in API.
This website is designed for users who have an interest in art of all kinds like photography, digital art, and more.
I'm one of those people who have an interest in photography/photo editing and have been since a young age.

This is my fifth and final portfolio project for my course in Full-Stack Software Development. It was also my first time using React and making an API. I started with the API and when finished, combined it with a React App in the same repository.

Visit Capture The Moment

---

Contents

• User Stories

• Features

  • Future Implements

• Design

  • Colour Scheme
  • Typography

• Technologies Used

  • Languages
  • Frameworks, Libraries, Programs, Contexts & Hooks Used

• Deployment & Local Development

  • Local Development
    • How To Fork
    • How To Clone

• Testing

  • Automated
  • Manual

• Credits

  • Code
  • Content
  • Media
  • Acknowledgments

---

User Stories

Category	As	I can	so that I can	UI Components
auth	a user	sign up for an account	have a personalized profile with a profile picture	SignUpForm ProfilePage ProfileEditForm
auth	a user	sign up for an account	make, like and comment on other users content	Post PostPage Comment
auth	a user	sign up for an account	follow and unfollow other users	Profile ProfilePage
posts	a visitor	view a list of posts	browse the newest content	PostsPage
posts	a visitor	view a specific post	see likes and read comments	Post PostPaget
posts	a visitor	search a list of posts	find posts by specific users or titles	PostsPage
posts	a visitor	scroll through a list of posts	browse more comfortably	InfiniteScrollComponent
posts	a user	edit/delete my own posts	edit or hide unwanted mistakes	PostEditForm MoreDropdownMenu
posts	a user	make posts	share pictures with others	PostCreateForm
posts	a user	view posts that I liked	go back to all my liked posts	PostsPage
posts	a user	view posts from followed users	keep up with users content that I enjoy	PostsPage
likes	a user	like posts	show my interest in users content	Post like icon
likes	a user	unlike posts	show my loss of interest in users content	Post (un)like icon
comments	a user	post a comment	share thoughts on others posts	PostPage CommentCreateForm
comments	a user	edit/delete my own comments	edit or hide my comments	PostPage Comment MoreDropdownMenu
profiles	a user	view profiles	see users posts + followers and following count	ProfilePage Post
profiles	a user	edit my profile	update my information	ProfileEditForm
followers	a user	follow profiles	show my interest in users content	Profile follow button
followers	a user	unfollow profiles	show my loss of interest in users content and remove it from my feed	Profile (un)follow button

---

Design

Colour Scheme

Typography

• Font Family: DM Sans, sans-serif.

Features

• Responsive navigation bar at the top of the screen with links to:

  • If signed in - ADD POST, HOME, FEED, LIKED, SIGN OUT, PROFILE.

  • If signed out/visitor - HOME, SIGN IN, SIGN UP.

    • HOME
      A feed of recently uploaded content from users.

    Home page - Logged in
    

    Home page - Logged out
    

    Home page on my Galaxy S22 Ultra
    

    • FEED
      Users can see the posts from the users they follow.

      
      

    • LIKED
      Users can see all the posts they've liked.

      
      

    • SIGN IN
      Users with an account can sign in.

      
      

    • SIGN UP
      Visitors can sign up for an account.

      
      

    • SEARCHBAR
      Users can search for usernames or keywords at the top of the screen.

    • ADD/EDIT POSTS
      Logged-in users can upload images by clicking 'ADD POST' and then selecting an image, adding title and content. They can then either click 'Upload' or 'Cancel'. Users can edit/delete their posts by clicking on one of their posts and then clicking the dots menu in the top right corner.

      
      
      
      

    • COMMENTS
      Logged-in users can comment on posts and can edit/delete their comments.

    • LIKES
      Logged-in users can like/unlike other user's posts, but they can not like their own posts.

    • FOLLOW/UNFOLLOW
      Logged-in users can follow/unfollow other profiles by clicking the button beside that user's profile picture.

    • MOST FOLLOWED USERS
      Profile users with the most followers are shown, in order of the most to the least amount.

      Most Followed Users - Visitor/not logged in
      
      

      Most Followed Users - Logged in
      
      

    • PROFILES
      Users/visitors can view profiles by clicking on a profile picture. On the profile, you can see the user's posts, the amount of posts they've made, how many followers they have, and how many they follow.
      Logged-in users can click a button to follow/unfollow that user. The owner of the profile can edit their profile content, profile picture, username, and password by clicking the menu in the top right corner of the profile.

      
      
      
      

Future Implements

In future implements, I would like to add features such as:

• Expanded authentication - register with both email and username, email confirmation.
• Add a PM/chat function.

Technologies Used

Languages

• JavaScript, Python, HTML, and CSS.

Frameworks, Libraries, Programs, Contexts & Hooks Used

• Gitpod (VS Code, IDE), GitHub - To be able to develop this project.
• Heroku - For app deployment.
• Django - For building backend logic with Python.
• Django REST Framework - To build a Django REST Framework API with Django.
• Django Auth - For user authorization (sign up/sign in).
• Django filters - For filtering images that are uploaded.
• psycopg2 - to use a PostgreSQL database.
• React, React Bootstrap, React Router Dom - For building/rendering an interactive UI, page navigation, and responsive stylesheet.
• Cloudinary - For image storage.
• Infinitescroll - To make the site pages feel smooth and look nice while you scroll.
• MSW library - For mocking.
• Axios - For performing asynchronous calls.
• WhiteNoise - For collecting staticfiles from the frontend/React app and connecting it to the backend/database.
• Contexts:
  • CurrentUserContext - User state exposed to the app so relevant components can subscribe to the changes.
  • ProfileUserContext - Profile state exposed to the app so the PopularProfiles component can be in sync with the profile page.
• Custom hooks:
  • useClickOutsideToggle - Toggles on the burger menu.
  • useRedirect - Redirects signed-in/signed-out users.

Deployment & Local Development

Local Development

Deployed using Heroku:

1. Log in/sign up to Heroku.
2. Go to your Heroku App and click on "Deploy".
3. At the section "Deployment method", click "GitHub" and connect your account with Heroku.
4. When you're connected, search for the project you wanna connect the app to and click on it.
5. Click "Deploy Branch".
6. Your app will now be deployed to GitHub and when it's done you can click "Open App".

How to Fork

Fork the repository:

1. Log in/sign up to GitHub.
2. Go to the repository for this project API-Django.
3. Click the 'Fork' button in the top right corner.

How to Clone

Clone the repository:

1. Log in/sign up to GitHub.
2. Go to the repository for this project API-Django.
3. Click the code button, select which one you want to clone with (HTTPS, SSH, or GitHub CLI), and copy the link shown.
4. Open the terminal in a code editor and change the current working directory to a location of your choice to use for the cloned directory.
5. Type 'git clone' in the terminal, paste the link that you copied in step 3, and then press enter.

Testing

Automated

• MSW library used to mock user/logout endpoints.
• Tested the rendering of the Navbar:
  • No problems when rendering.
  • Link to a logged-in user profile renders.
  • Buttons for Sign in/Sign up render again on logout.

Manual

Testing was ongoing throughout the development process. Chrome Dev Tools was used during the building to test the responsiveness and interactions. The deployed website is tested on Chrome, Opera GX, and Samsung S22 Ultra.
The site looks and works as intended.

• Navbar/Links/Buttons
  Each link on the Navbar and pages works without any problem, same with the buttons. Rendering and navigation work as intended and expected.

• Auth/Acess
  Both the sign-in and sign-up forms work without problems. The request and redirecting send you to the correct pages.
  

Only users that have an account and are logged in have access to adding posts and they can only edit/delete the posts and comments they've posted and only have access to edit their own profile, username, and password.
Only logged-in users can post/edit/delete comments, like other's posts (not their own), and follow/unfollow other profiles.

• Alerts/Warnings/Redirect
  An alert for when you click on the post button to comment on a post pops up for a few seconds as expected.

A warning prompt comes up whenever you try to delete a post or comment, asking if you're sure. After clicking Delete to confirm the post or comment is deleted and you get redirected to the right page.

After you change your password or username, a prompt pops up that says that the change has been successful. After clicking the 'x' on the prompt, it goes away and you're redirected back to your profile page.

Credits

Code

• Followed along the walkthrough projects "Moments" and "Django REST Framework" by Code Institute while making this project.

Content

• All user accounts that exist at this moment (2024-01-29) besides "Theodore" and "WikstromPhotos" were made up by me. The other two are just me.

Media

• All images borrowed from Pexels.
• The images posted and profile pictures used by the users WikstromPhotos and Theodore is my own.
• Favicon.
• I borrowed the icons and burger menu from the walkthrough "Moments", I liked the look of them.

Acknowledgments

• Student Care, Code Institute - I want to acknowledge and thank them for everything they've done so far and for being very understanding.