1. UX
   1. Project Goals
   2. User Stories
   3. Development Planes
2. Features
3. Issues and Bugs
4. Admin User Information
5. Technologies Used
   1. Main Languages Used
   2. Frameworks, Libraries & Programs Used
6. Testing ☞ Testing.md
7. Deployment
8. Credits

This website was designed for a fictional fitness market place, "Muscle Gym". The purpose of this website was to establish an online presents for people to buy products and workout plans.

This is the final Milestone Project from necessary for the project to complete the Full Stack Web Development Program at The Code Institute.

The main requirement was to make a website using HTML, CSS, JavaScript, Python+Django.

The user is looking for:

• Products to improve their fitness levels.
• Workout plans to improve their fitness levels.
• Share opinions and tips about products and workout plans.
• A place where could easily access workout plans.
• Place to see my order history.
• Secure way to purchase products from the website.

The Developer is looking to:

• Create a web page for user to share recipes.
• Create a web page for owner to upload products.
• Demonstrate their skills in software development, using newly learned languages and libraries.
• Deploy a project on their portfolio.

1. As a new customer, I want to easily navigate through the website to find the relevant content, effortlessly.
2. As a new customer, I want to see all products I can purchase on the website.
3. As a new customer, I want to be able to buy an item without registering.
4. As a new customer, I want to be able to register to the website.
5. As a new customer, I want to be able to search for desired items on the website.

1. As a current client, I want to be able change my shipping information.
2. As a current client, I want to be able to find all my purchase history of products.
3. As a current client, I want to be able access my unique item inventory.
4. As a current client, I want to share my opinion on the website products.

1. As an owner, I want to be able to add new products.
2. As an owner, I want to be able to edit existing products.
3. As an owner, I want to be able to delete items.

In order to create a comprehensive and informative website, the developer gathered information from social forums to add required functionality to the site and how would it answer user stories, as described above.

1. Strategy

Broken into two categories, the website will focus on the following target audiences:

• Roles:

  • New users
  • Current users
  • Owner

• Demographic:

  • 16 and plus year olds
  • People interested in fitness

The website needs to enable the user to: - All users: What products does the website sell - All users: Any product details - Registered user: all order history - Registered user: any single purchase history

The website needs to enable the Shop to:

• Develop an online presence

With these goals in mind, a strategy table was created:

2. Scope

A scope was defined to clearly identify what needed to be done to align features with the strategy:

• Content Requirements

  • The user will be looking for:
    • Easy to find products
    • See their own purchase history
    • See their own unique item inventory

• Functionality Requirements

  • The user will be able to:
    • Be able to register to web page easily
    • Easily find wanted products
    • Easily navigate through the pages
    • Edit there shipping information
    • Edit/Delete products (for admin)
    • Create new products (for admin)

3. Structure

The web page content is divided through multiple pages in a tree like pattern for easy navigating and distinguishing content. The hierarchial tree structure:

4. Skeleton

Wireframe mockups were created in a Figma Workspace

Back to top ⇧

Main Navigation Bar

Home Page

Products Page

Product Details Page

Shopping Bag

Checkout

Product Management

My Profile

Inventory

Comunyt

Back to top ⇧

GitHub

The developer ran into a number of issues during the development of the game, with the noteworthy ones listed below, along with solutions.

User reciving two orders per one purches

• When user completed a purchase he would receive two orders. Two functions where named the same witch cast the bug. Simply after change one function the bug was fixed.

No item info in inventory

• Inventory items would not be populated with the specific item's information only order information would appear. After careful examination the bug was that wrong name attribute was used. Instead of using the unique item name "listitem_unique", a "listitem" was used. Changing the name fixed the bug.

No info on succes purches

• The success purchase page information would not be populated with product information, only order information would be populate. This occurred because no purchase item information was past on to the view. Specifically sending information to the function and passing it to view fixed the bug.

Heroku app not uploading page

• Herroku would not upload the page because of 500 errors. After attempting to push the code herroku would not upload the page. Git push would be successful. After checking multiple possible causes, found the problem. One of the email values was misspelled and herroku could not get the correct value. After changing the name bug was fixed.

Checkout would not complit

• After filling in the form and pressing complete order button, the checkout function would not work. The error was that the url gets an unexpected value, "}". After carefully looking true the code there was an extra} witch cast the bug. Removing the } bug was fixed.

Product data not showing

• After ordering unique item product data not showing in checkout_unique page. At function checkout unique item variable was assigned later in the code and change to order information not product information. After the remaining item in the product information bug was fixed.

Quantity incremation buttons don't work

• After adjusting the value on the shopping bag page and submitting the form the values would not update. Newest posted values would not pass to the view function. The workaround for this particular problem was to change the location of the quantity editing buttons to in the form.

Back to top ⇧

• HTML5
• CSS3
• JavaScript
• Python

• Bootstrap
  • Materialize was used to implement the responsiveness of the site, using materialize classes.
• jQuery
  • jQuery was used to simplify the JavaScript code used.
• Django
  • Django was used to siplify the project build up.
• Google Fonts
  • Google fonts was used to import the fonts "Open Sans" and "Lobster".
• Font Awesome
  • Font Awesome was used for graphical indication of features buttons.
• Git
  • Git was used for version control by utilizing the GitPod terminal to commit to Git and push to GitHub.
• GitHub
  • GitHub was used to store the project after pushing.
• jQuery Validation
  • jQuery Validation was used to simplify form validation for the Feedback Form.
• Am I Responsive?
  • Am I Responsive was used in order to validate the responsiveness of the design.

Back to top ⇧

Testing information can be found in a separate testing file TESTING.md Prideti testing fila

This project was developed using Visual GitHub.

To deploy this page to Heroku Pages from GitHub repository, the following steps were taken:

Enabling GitHub integration

1. You can configure GitHub integration in the Deploy tab of apps in the Heroku Dashboard.

2. To configure GitHub integration, you have to authenticate with GitHub. You only have to do this once per Heroku account.

3. After you link your Heroku app to a GitHub repo, you can selectively deploy from branches or configure auto-deploys.

Automatic deploys

1. When you enable automatic deploys for a GitHub branch, Heroku builds and deploys all pushes to that branch. If, for example, you have a development app on Heroku, you can configure pushes to your GitHub development branch to be automatically built and deployed to that app.

2. If you’ve configured your GitHub repo to use automated Continuous Integration (with Travis CI, for example), you can check the “Wait for CI to pass before deploy” checkbox. When enabled, Heroku will only auto-deploy after all the commit statuses of the relevant commit show success. This commit won’t auto-deploy because one of the checks shows a pending status.

3. This commit will auto-deploy because all of the checks show a status of success.

Review apps

With review apps enabled for a Heroku app, Heroku will create temporary test apps for each pull request that’s opened on the GitHub repo that’s connected to the parent app. Review apps are great if you’re using GitHub Flow to propose, discuss, and merge changes to your code base. Because pull request branches are deployed to new apps on Heroku, it’s very simple for you and your collaborators to test and debug code branches. You can also run automated integration tests on the Heroku app representing a GitHub branch.

See the Review apps article for details.

Heroku CI

Once you’ve connected your GitHub repo to your Pipeline, you can turn on Heroku CI, our visual, low-configuration test runner that integrates easily with Heroku Pipelines (and so complements Review apps, existing Heroku apps, and our GitHub integrations). Any Heroku Pipeline is already Heroku CI ready – just turn it on in the Pipeline’s Settings tab.

Links to diffs

For apps that are linked to GitHub repos, releases in the Dashboard Activity tab will include a “View Diff” link. Following the link will take you to the GitHub comparison view, showing the changes made since the last release.

Disconnecting from GitHub

Individual apps can be disconnected in the GitHub pane of the Deploy tab for the app.

Back to top ⇧

All images were uploaded from Pexels

All image author names are at the user image file names.

The developer consulted multiple sites in order to better understand the code they were trying to implement. For code that was copied and edited, the developer made sure to reference this within the code. The following sites were used on a more regular basis:

• Stack Overflow
• W3Schools
• Bootstrap
• Code Institute Ejucation Material

Back to top ⇧