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.
| 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 |
- Font Family: DM Sans, sans-serif.
- 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.
- HOME
-
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.
- JavaScript, Python, HTML, and CSS.
- 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.
Deployed using Heroku:
- Log in/sign up to Heroku.
- Go to your Heroku App and click on "Deploy".
- At the section "Deployment method", click "GitHub" and connect your account with Heroku.
- When you're connected, search for the project you wanna connect the app to and click on it.
- Click "Deploy Branch".
- Your app will now be deployed to GitHub and when it's done you can click "Open App".
Fork the repository:
- Log in/sign up to GitHub.
- Go to the repository for this project API-Django.
- Click the 'Fork' button in the top right corner.
Clone the repository:
- Log in/sign up to GitHub.
- Go to the repository for this project API-Django.
- Click the code button, select which one you want to clone with (HTTPS, SSH, or GitHub CLI), and copy the link shown.
- 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.
- Type 'git clone' in the terminal, paste the link that you copied in step 3, and then press enter.
- 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.
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.
- Followed along the walkthrough projects "Moments" and "Django REST Framework" by Code Institute while making this project.
- 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.
- 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.
- Student Care, Code Institute - I want to acknowledge and thank them for everything they've done so far and for being very understanding.