The live application can be found here: You Made You Fitness Community

• You Made You Fitness Community
  • Table Of Contents
  • Introduction
  • User Experience(UX)
    • Epics and User Stories
    • Strategy
    • Scope
    • Structure
    • Skeleton
    • Surface
  • Business Model
  • Data Model
  • Web Marketing
    • Facebook Business Page (Social Media Marketing)
    • Search Engine Optimization (SEO)
    • Newsletter Signup (Email Marketing)
  • Agile Methodology
  • Features
  • Testing
  • Deployment
  • Credits

You Made You Fitness Community is an online e-commerce application that sells digital workout guides. The goal of the site is to offer a place of inspiration, support and fellowship for those interested in fitness and health on all levels. Users can sign up to take part of and share blog posts while the workout guides are available to purchase for everyone.

This project was created using HTML, CSS, JavaScript, Python, and Django, and is my 5th and final Portfolio Project for Code Institute's Diploma in Full Stack Software Development.

Project Goals:

• The goal is to create an online fitness community that inspires and helps people take control over their own fitness journey. The name "You Made You Fitness Community" is meant to reflec this.

• The community will initially offer workout guides for all levels of fitness, but more products could be added in the future. Quality is key and all plans have to be proven to work. The community site needs to reflect a business that values high quality.

• The target audicence is people who are looking for tools to take charge of their fitness journey while also sharing the experience with a community. Previous fitness level does not matter as different plans for different goals are offered. Everyone is welcome.

User Expectations:

• Accessibility for all users.
• Easy navigation throughout the site.
• The purpose of the site is clear.
• A webshop where the products are relevant, clearly displayed and easy to browse through.
• A simple and safe checkout process.
• A visually pleasing design with pleasing color contrasts.

Contet Requirements and Functional Specification:

• Authentication: Functionality to register and manage an account.
• Web Shop: Functionality to complete a purchase.
• Products: Images and descriptions.
• Community Blog Page: For users to read and share blog posts.
• Functional Design: Responsiveness throughout the site.

Pages:

Pages marked with ** are the same for unregistered and registered users.

View for Unregistered Users:

• Home Page**: Contains a hero image with text, in addition to sections with information and buttons linking to the most important pages of the site.

• Community Page: Contains links to login and signup for unregistered users.

• Webshop Page**: Page for all products in the webshop.

• Product Detail Page**: Contains product image, product details and add to cart button.

• Shopping Cart**: A view for products added to the shopping cart.

• Checkout Page**: Contains an order summary and form for user to fill out to complete a purchase.

• Checkout Success Page**: Displays an order summary when a purchase is successful.

• Sign In Page: Contains a log in form.

• Sign Up Page: Contains a sign up form.

• Contact Page**: Contains contact information and newsletter signup.

View for Registered Users:

• Home Page**: Contains a hero image with text, in addition to sections with information and buttons linking to the most important pages of the site.

• Community Pages (blog): Built by different pages related to the site's blog functionality. Contains pages for viewing, adding, editing and deleting blog posts within each category.

• Webshop Page**: Page for all products in the webshop.

• Product Detail Page**: Contains product image, product details and add to cart button.

• Shopping Cart**: A view for products added to the shopping cart.

• Checkout Page**: Contains an order summary and form for user to fill out to complete a purchase.

• Checkout Success Page**: Displays an order summary when a purchase is successful.

• Logout Page: Contains button for logging out.

• Contact Page**: Contains contact information and newsletter signup.

Additional Pages:

• 404 Page: Contains "page not found" message and link back to home page.

Elements of Navigation:

• A navigation bar with icons and links to its relevant content is visible at all times while navigating through the site.

• The business logo in the navigation bar is linked to the home page.

• The home page contains links to the most important content of the site.

• The footer contains links to relevant social media sites.

Wireframes were created using Balsamiq.

Color Scheme

The color scheme was created using Coolors and follows a pink scheme that matches the hero image.

• To create the business model for this project I used creately.

• For tables of data and database planning, see the data model section below.

ERD for models related to the Webshop functionality:

ERD for models related to the Community blog posts:

• To create the entity relationship diagrams (ERD) for this project I used creately.

• The Webshop models were taken from Code Institute's walkthrough "Boutique Ado" and customized to fit an online business with digital products only.

• The Community blog post models (Recipe, Workout and OtherPost) were created by me to fit each category.

• The User model was provided by Django for a one to many relationship to the blog post models. Find more information about Django's default user model in the Django documentation here.

• In the future, it would be beneficial to create a one to many relationship between the User model and webshop functionality models, so that a registered user can autofill their checkout information and view their order history. The webshop checkout process is the same for both unregistered and registered users at the moment.

• A UserProfile model was created as the idea was to give users the ability to view both their own and other members profiles (in addition to editing their own). However, this functionality is yet to be implemented on the site due to lack of time before the submission date. Will be implemented in the future.

• This project uses a PostgreSQL database via ElephantSQL.

A Facebook business page was created for You Made You Fitness Community.

Organic social media marketing would be a priority for further web marketing of this business. The interaction with users, free workouts, recipes and tips, competitions, offers on workout guides, and even in person events could all be beneficial marketing strategies for this type of business.

For this project, implemantations have been made from a Search Engine Optimization (SEO) perspective in order to ensure that potential customers can find "You Made You Fitness Community". The process is documented below.

Keyword Research:

1. Pen and paper were used to brainstorm general topics and possible keywords.

2. A Google search was made for each keyword and the relevant results were documented in tables. Some of the keywords from the brainstorming were deleted/modified as they were too general.

3. A mix of 10 short and long-tail keywords were selected based on the Google search results.

4. The relevance and authoritativeness was checked for some keywords using wordtracker (I checked as many as I could before running out of free searches).

As part of a marketing strategy, the users can sign up to the community's monthly newsletter. (As this is a fictional business the user can sign up, but no actual emails will be sent).

This project was planned and created by the use of an agile approach. A GitHub project including issues (user stories), milestones and MoSCoW labels was created to keep track of the development process and progress.

View the GitHub project here.

GitHub Project Board

Issues were moved between Todo, In Progress, and Done as the work progressed. All items left in the "Todo" column when the project is submitted are labeled "won't have" for this release.

Epics

The epics were created as GitHub milestones. The user stories for each epic were then linked to its relevant milestone.

An additional milestone was included to keep track of the project set up. It only contains steps for setting up the project, no user stories.

User Stories

The user stories were created as GitHub issues and contain related acceptance criterias and tasks (with the exepction of a few labeled "won't have" for this release). These were checked off continuously as the requirements were met.

MoSCoW Labels

MoSCoW labels were created to prioritize the GitHub issues with user stories. An additional setup label for the intial setup steps was also included. I also kept the default documentations label, but ended up not using it.

The navigation bar for unauthorized users contains 7 nav items: Home, Community (view for unauthorized users), Webshop, Login, Join Us, Contact and Shopping Cart. The shopping cart amount is updated when product is added/deleted from the cart.

The navigation bar for authorized users contains 6 nav items: Home, Community (view for authorized users), Webshop, Contact, Logout, and Shopping Cart. The shopping cart amount is updated when product is added/deleted from the cart.

The home landing page contains a hero image with a text box containing the business name and a button linking to the sign up page (for unauthorized users) or the community page (for authorized, logged in users).

Below the home page, there are three sections. The "About Us" section contains more information about the business (and this could be improved further in the future). The "Need Some Guidance" section links to the webshop and is avaliable for both registered and unregistered user. The "Share Your Favorites" section links to the community page for either unregistered and registered users depending on if they are logged in or not.

The register page (sign up) is where the user can create an account to join the community. It contains a form where username and password are required in order to sign up. Email is optional. There is also a link to the sign in page in case the user is already registered.

The login page contains a form where the user is required to fill out username and password in order to log in. There is also a link to the sign up page in case the user is not registered yet.

If the user clicks the "logout" navbar item they will relocate to the logout page. On the log out page they are asked if they are sure they want to log out. If the answer is yes, they can click the button to log out.

In the webshop the products are evenly displayed with a product image, title and price. The user can click the image to get to the product detail page with more information and an "add to cart" button. The webshop is available for both unregistered and registered users.

The product detail page consists of the product image, title, description and price. The user can click "add to cart" if they want to purchase an item and "keep shopping" to go back to the webshop.

If there are items in the shopping cart, an overview of what is in the cart is displayed together with the cart total (the "bag" has been changed to "cart" since the screenshot was taken to keep it consitent). If the user wants to delete an item from the cart they can click the trash can icon. In addition to the order overview there are two buttons: one linking back to the webshop and one linking to the checkout page.

If there are no items in the shopping cart, a "your cart is empty" message is displayed together with a button linking back to the webshop.

The checkout page is where the user completes a purchase. An order summary is displayed and the user is prompted to fill out their information to complete the purchase. Since there are no physical products available (digital only) the user does not have to fill out their address. Name, number, email and card information is enough.

When an order has been completed, a checkout success page is displayed with an order summary.

The community page for an unregistered user links to login and signup.

For a registered user, the community page links to three sections: read posts, add posts, and the posts specific to the logged in user. For reading and adding there are three categories available: recipes, workouts and other posts. There is also a search bar available.

If the user clicks on one of buttons under "read other memebers posts" they are relocated to a post overview specific for the category they picked. The posts are displayed evenly with a default image, a title, author and "created on" date. The user can click on a title to read the post. In addition, there are two buttons available: one to add a post and one to go back to the community start page.

The post detail page contains the actual blog post and a button linking back to the post overview page.

Under "your blog posts" the posts specific to the logged in user are displayed. The main CRUD functionality is available on this page as the user can edit and/or delete their posts. If there are no posts in a category a "there are no posts" message is displayed.

The form for adding a post consists of different fields depending on category. The form presented below is for creating a general blog post.

The form for editing a post looks similar to the "add a post" form, but is prepopulated with the content of the post that is getting edited.

The search results page displayed the search results for each category.

On the contact page the user can find the business email address. They can also sign up to the fitness community's newsletter (section created using mailchimp).

The footer sticks to the bottom of the site on all pages and contains links to different social medias.

When a user perfoms an action on the site, a message is displayed at the top of the screen. The messages disappear by themselves but the user can click the X if they want it to disappear faster. A few message examples are presented below.

An admin can from the admin panel:

• Add, edit and delete products.
• Add, edit and delete blog posts.
• View orders.

• Webshop: Additional add to cart button on products overview page.

• Community: Liking and commenting blog posts for a more interactive community experience.

• Updated Post: "Updated on" date and time for an updated post (included in the model but not the view).

• User Profile: Viewing other members user profiles with a potential profile picture and a bio (in addition to editing your own).

• Site Pagination: Site pagination should be implemented on the products and blog posts pages.

Find the complete documentation for testing here: TESTING.md

The testing documentation contains validation of HTML, CSS, Python, and JavaScript, Lighthouse Reports, accessibility testing, and manual testing.

• Go to the ci-full-template.
• Click "Use this template" and pick "Create a new repository".
• Add a name for your repository.
• Click the green "Create repository" button.
• Create a workspace for the new repository. I used Codeanywhere.

• Open up the workspace.
• Install Django: in the terminal, type "pip3 install 'django<4' gunicorn".
• Library for PostgreSQL: in the terminal, type: "pip3 install dj_database_url==0.5.0 psycopg2".
• Library for Cloudinary: in the terminal, type: "pip3 install dj3-cloudinary-storage".
• Make sure to create a requirements.txt file by using the command: "pip3 freeze --local > requirements.txt".
• Create a django project and django app. Make sure to add the app to the projects settings.py file.
• Create a Procfile and add in "web: gunicorn yourappname.wshi".

• Log in/Sign up to Heroku.
• On the dashboard, click the "new" button and pick "Create new app".
• Name your app (must be a unique name) and select the region that is closest to you.
• Click the purple "Create app" button.

• Log in/Sign up to Cloudinary.
• Copy the API Environment variable on the dashboard.
• Add the copied variable to the env.py file.
• Make sure cloudinary is linked to the app in settings.py.

• Log in/Sign up to https://www.elephantsql.com/.
• On your dashboard, click "Create New Instance".
• Select a name and a plan (Tiny Turtle Free) and leave the Tags field blank.
• Click the green "Select Region" button.
• Pick a data center near you.
• Click the green "Review" button.
• Check your details before clicking the green "Create instance" button.
• Go back to the dashboard and click on the database instance name for this project.
• Copy the database URL displayed in the URL section.

• Make sure an env.py is created and added to the .gitignore file.
• In the env.py file, add "import os", a blank line, and then "os.environ["DATABASE_URL"]=copiedURL".
• Replace "copiedURL" with the string copied from ElephantSQL.
• Below the DATABASE_URL line, add "os.environ["SECRET_KEY"]="asecretkey".
• Replace "asecretkey" with a secret key of your choice (inside quotation marks).
• Add a variable called "os.environ["CLOUDINARY_URL"]". This is where the copied variable from cloudinary is added as value.
• Make sure to delete "CLOUDINARY_URL=" from the copied variable before saving.
• Add variables for stripe secret and public keys.

• In the settings.py file for your Django project, add the following code: screenshot of code in settingspy

• Further down, change the SECRET_KEY variable by replacing the insecure Django key inside the quotation marks with "SECRET_KEY". This will reference the secret key created in the env.py file.

• Scroll down to the database section and comment out the default DATABASES variable.

• Instead, create a new DATABASES variable and give it the value " 'default': dj_database_url.parse(os.environ.get("DATABASE_URL")) " inside curly brackets.

• Add the Heroku host name to an ALLOWED_HOSTS variable.

• Remember to set debug to "False" in the apps settings.py file.
• Go to the Heroku dashboard and click on the project.
• Make sure Config Vars DATABASE_URL, SECRET_KEY, CLOUDINARY_URL, PORT and Stripe variables are present.
• Go to the "Deploy" section.
• Select GitHub as deployment method and connect your account.
• Search for your project's repository and click "Connect".
• Scroll down to the bottom of the page, and by "Manual deploy", make sure "main" is selected in the dropdown menu, and click "Deploy Branch".
• When the app has been deployed successfully, scroll to the top of the page and click "Open app" to view it.

• Log in to GitHub, search for the reopsitory name, and navigate to its main page.
• Locate the "Fork" button and click it.
• Add a description (optional).
• Click the green "Create fork" button.

• Log in to GitHub and search for the repository name and navigate to its main page.
• Click the green "<> Code" button.
• Copy the URL (if using HTTPS, SSH and GitHub CLI are also available options).
• Open the terminal in your IDE and change the location to where you want the cloned repository.
• Type "git clone" followed by the copied URL from the GitHub repo.
• Press enter.

• All functionality required for a user to complete a purchase (Stripe included) has been copied from the Code Institue's walkthrough "Boutique Ado" videos.

• The Code Institue walkthrough "I Think Therefore I Blog" was helpful when creating the Community blog functionality.

• To better understand and implement search bar functionality I read this LearnDjango article in addition to the Code Institue's walkthrough "Boutique Ado" videos.

• I used this StudyGyaan article as a guide to create a 404 page.

• The sitemap was created using XML Sitemaps.

• I used the deployment steps from my 4th portfolio project "The Swede Restaurant" as a guide when creating this project.

• In addition to the more specific credits, I want to credit the Django Documentation, Stack Overflow, and the CI community on Slack as they have been helpful in solving problems along the way.

• I used Adobe Express to design the covers for the workout guides.

• The default post images were taken from Pexels.

• The hero image was taken from Unsplash.