This is a social app designed exclusively for women who want to find gym buddies, share motivation, and discover new fitness tips. Users can create personalized profiles showcasing their fitness stats, interests, and fitness journey. The app allows for private messaging to connect with new friends, facilitating personalized conversations to share tips and experiences. This platform aims to foster a supportive community where women can freely discuss their unique fitness challenges and achievements, empowering each other in a safe and encouraging environment.
-
Authorization
- As a user, I can log in and log out of the site which ensures my account is secure and provides access to personalized features.
-
Profiles
- As a user, I can create and edit my profile which displays and updates my personal information and activities.
-
Add Friends
- As a user, I can add friends who have the same interests which allows me to connect with or remove connections with other users.
-
Post Updates
- As a user, I can post my thoughts and activities with everyone on the site which allows me to find new friends with similar interests.
-
Comment
- As a user, I can comment on others posts which allows me to interact with and manage my contributions to my friends' posts.
-
Like
- As a user, I can like and unlike updates which shows or removes my appreciation for my friends' posts.
-
Private Message
- As a user, I can send and receive private messages which allows me to communicate directly and privately with other users.
Using: Lucidchart Flowchart
This project utilises a variety of technologies to build, style, and deploy the application. Below is a brief description of each technology used to build my project.
- HTML
- Description: HTML is the standard markup language used to create the web pages used. It provides the structure of the webpages, allowing the inclusion of text, images, links, and other multimedia.
- CSS
- Description: CSS is a stylesheet language used for ensuring my project had more personalised design on top of Bootstrap. It allows for the separation of content and design, enabling the styling of web pages with colors, layouts, and fonts.
- JavaScript
- Description: JavaScript is a programming language commonly used to create interactive effects within web browsers. For this project and the features I desired to create, I used JQuery with AJAX, frameworks and libarys of Javascript, to ensure the best interaction for the users.
- Django
- Description: As this project is soley targetted around being a Django project, this is the main framework used to ensure faster development and clean, pragmatic design. It is known for its robust feature set, including an ORM, authentication, and an admin interface, needed for this social media site.
- Bootstrap
- Description: Bootstrap is a popular front-end framework for developing responsive and mobile-first websites. It includes pre-designed CSS and JavaScript components that make it easier to build web pages quickly and consistently. I decided to use this for the base design of my project to ensure consistancy and a clean layout.
- Heroku
- Description: Heroku is the cloud platform as a service used todeploy my project and have a platform which could support my multiple programming languages and is known for its ease of use and scalability.
- Neon
- Description: Neon was the chosedcloud-native serverless PostgreSQL provider used, as advised from code Institute to use ElephantSQL, however these were no longer availible for me to use as they are no longer accepting users. Neon offers scalable and reliable database services and this was ideal for my project.
- WhiteNoise
- Description: Initaially I used Cloudinary (below) as my service for maintaining my images on the site however, it is explain int the issues section, I had errors with this and was then advised to change to Whitenoise. WhiteNoise is a Python library used with Django to serve static files efficiently. It simplifies static file management by integrating seamlessly with Django's staticfiles app and improving performance through compression and caching.
- Cloudinary
- Description: Cloudinary is a cloud-based service that provides an end-to-end solution for managing images and videos. It offers functionalities such as upload, storage, transformation, and delivery, optimising media content for web and mobile applications. (See error which occured in the issues section).
-
Install Django : pip install django
-
Create a Django project : django-admin startproject myproject cd myproject
-
Install Neon: pip install neon
-
Setup Neon:
- Create a
settings.pyfile in your Django project directory. - Configure your settings to connect to your env.py file which will hold Neon's syntax for environment-based configuration. For example:
settings.py
if os.path.isfile('env.py'):
import envenv.py
import os
os.environ['DATABASE_URL'] = '<Database-URL>'
os.environ["SECRET_KEY"]="<create_your_secret_key>"- Install Whitenoise:
pip install whitenoise
- Configure Whitenoise:
Add 'whitenoise.middleware.WhiteNoiseMiddleware', to the MIDDLEWARE list in your settings.py:
MIDDLEWARE = [
# Other middleware classes
'whitenoise.middleware.WhiteNoiseMiddleware',
]- Configure static file handling in settings.py:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')- Final Steps Collect static files:
python manage.py collectstatic Run migrations:
python manage.py migrate Start the Django development server:
python manage.py runserver
- Find the GitHub Repository.
- Click the Code button
- Copy the link shown.
- In Gitpod, change the directory to the location you would like the cloned directory to be located.
- Type git clone, and paste the link you copied in step 3.
- Press Enter to have the local clone created.
git add - This command was used to add the file(s) to the staging area before they are committed.
git commit -m “commit message” - This command was used to commit changes to the local repository queue ready for the final step.
git push - This command was used to update all committed code to the remote repository on github.
Ensure your project has the necessary files for deployment:
- Procfile: Specifies the commands that are executed by the app on startup.
python app.py
- requirements.txt: Lists all the dependencies your app needs.
Flask==1.1.2 gunicorn==20.0.4
Open your terminal and log in to Heroku:
bash:
heroku login
Create a new app:
bash:
heroku create your-app-name
Alternatively, create an app directly from the Heroku dashboard by clicking "New" and then "Create new app".
- Go to Heroku Dashboard: Navigate to the Heroku dashboard.
- Select Your App: Click on the app you created.
- Deploy Tab: Go to the "Deploy" tab.
- Deployment Method: Under "Deployment method", select "GitHub".
- Connect to GitHub: Authorize Heroku to access your - GitHub account if it's your first time. Search for the repository you want to connect and click "Connect".
Set any necessary environment variables for your app:
Go to the "Settings" tab. Click "Reveal Config Vars". Add your key-value pairs.
In the "Deploy" tab:
Go to the "Manual deploy" section. Select the branch you want to deploy. Click "Deploy Branch".
- HOME
- The landing page for the site. Users can sign up or log in from here. If a user is already logged in, they will have access to their personal pages. This page is not accessible to users who are not logged in.
- USER AUTH / LOGIN / SIGN UP
- Utilises Django's user authentication system to allow users to create an account and log in. This provides each user with a personal account.
- DASHBOARD
- The main page for logged-in users. It displays all user comments, allowing interaction with posts, comments, and likes.
- PROFILE
- A user profile is created upon logging in using Django. It includes an automatic profile picture and displays the user's own posts. Users can delete posts and manage their friends list here.
- MESSAGES
- A direct messaging platform where users can message their friends. Only people on the user's friends list can be messaged.
- ABOUT
- This page is visible only when not logged in. It provides potential users with more information about the site and a visual representation of the user experience.
Click to expand.
- About.html
-
As you can see here, there is a warning as there are no headers or discriptions on my image carosel, this is simply because I had no need or desire to add text here.
-
Dashboard.html
-
The errors presenting on this page are due to the posts users have already submitted, the duplication errors are inevitable and same with the text body.
-
Login.html
- Logout.html
- Messages.html
- Profile.html
- Register.html
- As you can see here on the register page, these errors are coming from the django modal. This does not cause any issues with the sign up however I was unable to do this with the time limits.
Click to expand.
- I have included only one screenshot as all the pages are linked to the same CSS and all pages load the styles consistently as can be seen in the features.
Click to expand.
- JShint
Click to expand.
- About.html
- Dashboard.html
- Login.html
- Messages.html
- Profile.html
- Register.html
The project has been tested for compatibility with the following browsers using this site. You will be able to see there are no issues with the compatability across these browsers:
- Google Chrome (Version 124)
- Edge (Version 124)
- Firefox (Version 124)
- Opera (Version 109)
- macOS Sonoma (17)
- Chrome (124)
- iOS (<= 16 17)
By utilising the Wave Accessibility tool for ongoing development and final testing, used for the below:
- Ensure all forms have associated labels or appropriate aria-labels.
- Validate that color contrasts meet the minimum ratios outlined in WCAG 2.1 Contrast Guidelines.
- Verify correct heading levels to accurately convey content importance.
- Confirm content is organized within landmarks for ease of use with assistive technology.
- Provide alternative text or titles for non-textual content.
- Set the HTML page lang attribute.
- Implement Aria properties in adherence to best practices outlined in WCAG 2.1.
- Follow established coding best practices for WCAG 2.1.
| Function | User Action | Outcome | Result |
|---|---|---|---|
| Load page: Register | Access FitFriends link | The landing page will open, showing an active navigation system, signup modal and css/bootstrap styles. The background image will display. | Pass |
| Load page: About | From home page, access about link in navigation or in callout container | The about page will display 3 containers with content about the site, features held and a image carosel to show use of django use. All images and css styles loading as should with active navigation sytem. | Pass |
| Load page: Login | From home page, access the login link in the navigation | The login page simply has a active username and password text feild which working with this django project stores the users authetication details. | Pass |
| Load page: Dashboard | Once logged in with correct credentials, this should bring user to dashboard.html | The dashboard will present every users posts on the site. For each post will persent the users name and profile image, their post content and the ability to interact by liking or commenting on the post. | Pass |
| Load page: Profile | Once logged in with correct credentials opened on to your account, you can access profile from here | This profile is created when the user signs up, it will load their default profile image or already uploaded image, their bio short desription, the posts they have made posting on the dashboard and the other users they have followed. | Pass |
| Load page: Messages | Once logged in with correct credentials opened on to your account, you can access messages from here | Initailly when opening this page, this willl show the logged in users friend list (as you can only start a chat with friends). When a friend is selected, their conversation with any previous messages shown. Also the ability to send live messages. | Pass |
| Load page: Logout | Once logged in with correct credentials opened on to your account, you can logout from here | When the logout button in the navigation is pressed, this will log the user out and redirect them to the login page, with the navigation when user not logged in. | Pass |
| Sign up modal | Access FitFriends link, select the "Sign up now!" buttom for sign up modal to appear | Django's sign up modal loads with the Username, Email, Password and Repeat passowrd text boxs load and once correctly inputted and submitted this will load the login page ready for user to login. | Pass |
| Like post | Once logged in with correct credentials, on the dashboard you can see all account holders posts where you can interact by liking posts | When clicking the like button, this will update the amount of likes on a post, changed text to "liked" and highlight to show the post is liked by user. | Pass |
| Comment on post | Once logged in with correct credentials, on the dashboard you can see all account holders posts where you can interact by commenting on posts | You can type your comment in the comment box under each post, once the message is ready you can hit "submit". This will refresh the page and show the message under the post. | Pass |
| Post a Status | Once logged in with correct credentials, you can post your personalised status on the dashboard for everyone to see | By typing in the status box and selecting submit, this will post the users status to the dashboard (also shown on their profile), this will show the users name, date and time posted with their profile picture, likes and comments interactions. | Pass |
| Another user profile | Once logged in with correct credentials, from the dashoard you will be able to see all users, if you like the posts and want to find out more about them, you can click on their name which will bring up there profile | When selecting the user profile yuo want to visit, this will load their profile with their profile image and bio. Also give you an option to add them as a friend, see their posts and friends list. | Pass |
| Upload profile picture | Once logged in with correct credentials, you can access your personal profile and upload your own picture with the upload button | An automatic profile picture will be loaded for every new user, by selecting the upload button and select your correct file you would like as your picture. This will refresh the page with the updated picture - also shown on the dashboard. | Pass |
| Update personal status | Once logged in with correct credentials, you can access your personal profile and add a personal statement about you/ explaining your profile | Once on the profile page, you can write your own bio, once clicked the save button, this will automatically update for all other users to see. | Pass |
| View friends | Once logged in with correct credentials, on you profile page you will be able to see your friends you have followed | At the bottom of the profile page, you will be able to see your friends list with access to their profile too. | Pass |
| Delete posts | Once logged in with correct credentials, on you profile page you will be able to view all posts on the dashboard and have the option to delete these | The red 'danger' delete button loads and once clicked the page will automatically refresh with the post you wanted deleted gone from profile and dashboard. | Pass |
| Select friend to have conversation with | Once logged in with correct credentials, on the messages page you will see a list of all your friends to message | Once a friend is selected, their conversation will appear showing any previous messgaes, you can flick between friends converstaioins on that page. | Pass |
| Send a message | Once logged in with correct credentials, on the messages page after selecting a friend to have a conversation with you will see a text feild where you can type and send your private message | Once the message is sent, the page will automativally refresh showing the users messgae, name, date and time this was sent. | Pass |
The site was tested for both correct and incorrect inputs for user interactions, covering various scenarios.
Click to expand.
Steps to test:
- Navigate to FitFriends - Home Page
- Select the sign up modal form and input the following data:
- User Name: Jane
- Email: [email protected]
- Password: This1is2a3test
- Repeate password: This1is2a3test
- Click Submit
- User should be redirected to
login.htmlconfirmation page. This function will have created and individual profile for the user.
Expected:
Form submits with no warnings or errors, and the user is redirected to login.html confirmation page.
Actual:
The website behaved as expected with no errors or warnings and redirected to login.html.
Steps to test:
- Navigate to FitFriends - Home Page
- Scroll down to the form and input the following data:
- User Name:
- Email: [email protected]
- Password: This1is2a3test
- Repeate password: This1is2a3test
- Click Submit
Expected:
The form does not submit, and an error is displayed to tell the user that the field is required.
Actual:
The website behaved as expected; an error message was displayed, and the form did not submit.
Steps to test:
- Navigate to FitFriends - Home Page
- Scroll down to the form and input the following data:
- User Name: Jane
- Email:
- Password: This1is2a3test
- Repeate password: This1is2a3test
- Click Submit
Expected:
The form does not submit, and an error is displayed to tell the user that the field is required.
Actual:
The website behaved as expected; an error message was displayed, and the form did not submit.<
Steps to test:
- Navigate to FitFriends - Home Page
- Scroll down to the form and input the following data:
- User Name: Jane
- Email: [email protected]
- Password: This1is2a3test
- Repeate password:
- Click Submit
Expected:
The form does not submit, and an error is displayed to tell the user that a valid repeat password is required and the format it should be in.
Actual:
The website behaved as expected; an error message was displayed, and the form did not submit.
Click to expand.
Steps to test:
- Navigate to FitFriends - Home Page
- Select the login modal form and input the following data:
- User Name: Jane
- Password: This1is2a3test
- Click Submit
- User should be redirected to
dashboard.htmlpage. This function will log the user into their individual profile.
Expected:
Form submits with no warnings or errors, and the user is redirected to dashboard.html page.
Actual:
The website behaved as expected with no errors or warnings and redirected to dashboard.html.
Steps to test:
- Navigate to FitFriends - Home Page
- Select the login modal form and input the following data:
- User Name:
- Password: This1is2a3test
- Click Submit
Expected:
The form does not submit, and an error is displayed to tell the user that the field is required.
Actual:
The website behaved as expected; an error message was displayed, and the form did not submit.
Steps to test:
- Navigate to FitFriends - Home Page
- Select the login modal form and input the following data:
- User Name: Jane
- Password:
- Click Submit
Expected:
The form does not submit, and an error is displayed to tell the user that the field is required.
Actual:
The website behaved as expected; an error message was displayed, and the form did not submit.
Click to expand.
Steps to test:
- Navigate to FitFriends - Home Page
- Log in using valid credentials:
- User Name: Jane
- Password: This1is2a3test
- Navigate to the Messages section
- Select the friend you want to message:
- Message: Hi John, this is a test message!
- Click Send
Expected:
Form submits with no warnings or errors, and the message is sent successfully, appearing in the user's sent messages.
Actual:
The website behaved as expected with no errors or warnings and the message was sent successfully, appearing in the user's sent messages.
Click to expand.
Steps to test:
- Navigate to FitFriends - Home Page
- Log in using valid credentials:
- User Name: Jane
- Password: This1is2a3test
- Navigate to the Profile section
- Click on the upload profile picture button
- Select a valid image file from the system
- Click Submit
Expected:
Form submits with no warnings or errors, and the profile picture is uploaded successfully, appearing on the user's profile.
Actual:
The website behaved as expected with no errors or warnings and the profile picture was uploaded successfully, appearing on the user's profile.
Steps to test:
- Navigate to FitFriends - Home Page
- Log in using valid credentials:
- User Name: Jane
- Password: This1is2a3test
- Navigate to the Profile section
- Click on the upload profile picture button
- Select a non-image file (e.g., a .doc file) from the system
- Click Submit
Expected:
The form does not submit, and an error in the profile image is displayed to tell the user that only image files are allowed.
Actual:
The website behaved as expected; an error message was displayed, and the form did not submit.
Click to expand.
Steps to test:
- Navigate to FitFriends - Home Page
- Log in using valid credentials:
- User Name: Jane
- Password: This1is2a3test
- Navigate to the Status section
- Input the following data in the status form:
- Status: Just completed a 5K run!
- Click Post
Expected:
Form submits with no warnings or errors, and the status is posted successfully, appearing on the user's timeline.
Actual:
The website behaved as expected with no errors or warnings and the status was posted successfully, appearing on the user's timeline.
- Initially, I started using Cloudinary as it was one of the better options for handling static files and media for the walkthrough project. I felt it would be well-suited for my social media site. However, I encountered numerous issues with my static files, including CSS and images, such as them not loading correctly, causing errors, and issues arising when using the collectstatic command.
To resolve these problems, I sought help from Code Institute teachers. I was advised on Slack to use Whitenoise instead of Cloudinary. Additionally, I was guided to reposition my MIDDLEWARE lines into a better readable structure for Django to understand them. This change eliminated the issues I was previously facing. As long as I ensured to run collectstatic often enough, everything ran smoothly.
- If I had more time with this project I would make lots of changes, this would require a lot more research and possible collaboration.
- WireFrames: Provided the initial design inspiration for our application's user interface, ensuring an intuitive and user-friendly layout.
- Base project for a social network site: This tutorial served as a foundational guide, helping to structure the overall architecture of our Django-based social media application.
- Another tutorial for a Django social site: Complemented the base project by offering additional insights and techniques for implementing social networking features.
- Text over image: Utilised this guide to effectively overlay text on images, enhancing visual appeal and usability.
- Google Fonts: Selected and embedded fonts to ensure the app has a cohesive and attractive typography.
- Adding a profile image: Implemented user profile images following this tutorial, allowing users to personalise their profiles.
- Favicon Generator: Created a custom favicon to enhance the branding and recognition of our web application.
- AJAX form data: Implemented AJAX to handle form submissions without page reloads, improving user experience.
- Like count implementation: Incorporated a like/unlike feature for posts, enabling user interaction and engagement.
- Django Documentation: Consulted extensively for understanding and implementing various Django views.
- Django Forms: Used to manage and validate forms within the app.
- Django Models: Helped in designing and interacting with the database models.
- Django Authentication: Implemented authentication features, ensuring secure user access and management.
- Django File Uploads: Managed user-uploaded files, including profile images.
- Django Messages Framework: Provided user feedback messages across the application.
- AJAX-based chat system: Created a real-time chat feature for users to communicate without page reloads.
- User Profile Management: Developed comprehensive user profile functionalities to enhance personalisation.
- Django Invite Friends: Added the ability for users to invite friends from their social accounts, facilitating network growth.
- WhiteNoise: Utilised for efficient serving of static files, ensuring fast load times and better performance.
- Ignore X-Frame Headers Extension: Assisted in debugging and testing embedded frames during development.
These resources collectively guided the development of the "Women Only - Find a Fitness Friend" social media website, ensuring it is robust, user-friendly, and feature-rich, with the potential to become something advaced and high-profile.
Thank you!