Giter Club home page Giter Club logo

workout-generator's Introduction

UX

Typography

New Site Users

Returning Site Users

Site Admin

Wireframes

Mobile Wireframes

Tablet Wireframes

Desktop Wireframes

Features

Existing Features

Future Features

Tools & Technologies Used

  • HTML used for the main site content.
  • CSS used for the main site design and layout.
  • JavaScript used for user interaction on the site.
  • Python used as the back-end programming language.
  • Git used for version control. (git add, git commit, git push)
  • GitHub used for secure online code storage.
  • Gitpod used as a cloud-based IDE for development.
  • Bootstrap used as the front-end CSS framework for modern responsiveness and pre-built components.
  • Django used as the Python framework for the site.
  • PostgreSQL used as the relational database management.
  • ElephantSQL used as the Postgres database.
  • Heroku used for hosting the deployed back-end site.
  • Cloudinary used for online static file storage.
  • Stripe used for online secure payments of ecommerce products/services.

Database Design

class Product(models.Model):
    category = models.ForeignKey(
        "Category", null=True, blank=True, on_delete=models.SET_NULL)
    sku = models.CharField(max_length=254, null=True, blank=True)
    name = models.CharField(max_length=254)
    description = models.TextField()
    has_sizes = models.BooleanField(default=False, null=True, blank=True)
    price = models.DecimalField(max_digits=6, decimal_places=2)
    rating = models.DecimalField(
        max_digits=6, decimal_places=2, null=True, blank=True)
    image_url = models.URLField(max_length=1024, null=True, blank=True)
    image = models.ImageField(null=True, blank=True)

    def __str__(self):
        return self.name

Agile Development Process

GitHub Projects

GitHub Projects served as an Agile tool for this project. It isn't a specialized tool, but with the right tags and project creation/issue assignments, it can be made to work.

GitHub Issues

Ecommerce Business Model

This site sells goods to individual customers, and therefore follows a Business to Customer model. It is of the simplest B2C forms, as it focuses on individual transactions, and doesn't need anything such as monthly/annual subscriptions.

Search Engine Optimization (SEO) & Social Media Marketing

Keywords

Social Media Marketing

Newsletter Marketing

Testing

Deployment

The live deployed application can be found deployed on Heroku.

ElephantSQL Database

This project uses ElephantSQL for the PostgreSQL Database.

To obtain your own Postgres Database, sign-up with your GitHub account, then follow these steps:

  • Click Create New Instance to start a new database.
  • Provide a name (this is commonly the name of the project: workout-generator).
  • Select the Tiny Turtle (Free) plan.
  • You can leave the Tags blank.
  • Select the Region and Data Center closest to you.
  • Once created, click on the new database name, where you can view the database URL and Password.

Amazon AWS

This project uses AWS to store media and static files online, due to the fact that Heroku doesn't persist this type of data.

Once you've created an AWS account and logged-in, follow these series of steps to get your project connected. Make sure you're on the AWS Management Console page.

S3 Bucket

  • Search for S3.

  • Create a new bucket, give it a name (matching your Heroku app name), and choose the region closest to you.

  • Uncheck Block all public access, and acknowledge that the bucket will be public (required for it to work on Heroku).

  • From Object Ownership, make sure to have ACLs enabled, and Bucket owner preferred selected.

  • From the Properties tab, turn on static website hosting, and type index.html and error.html in their respective fields, then click Save.

  • From the Permissions tab, paste in the following CORS configuration:

     [
     	{
     		"AllowedHeaders": [
     			"Authorization"
     		],
     		"AllowedMethods": [
     			"GET"
     		],
     		"AllowedOrigins": [
     			"*"
     		],
     		"ExposeHeaders": []
     	}
     ]
  • Copy your ARN string.

  • From the Bucket Policy tab, select the Policy Generator link, and use the following steps:

    • Policy Type: S3 Bucket Policy

    • Effect: Allow

    • Principal: *

    • Actions: GetObject

    • Amazon Resource Name (ARN): paste-your-ARN-here

    • Click Add Statement

    • Click Generate Policy

    • Copy the entire Policy, and paste it into the Bucket Policy Editor

       {
       	"Id": "Policy1234567890",
       	"Version": "2012-10-17",
       	"Statement": [
       		{
       			"Sid": "Stmt1234567890",
       			"Action": [
       				"s3:GetObject"
       			],
       			"Effect": "Allow",
       			"Resource": "arn:aws:s3:::your-bucket-name/*"
       			"Principal": "*",
       		}
       	]
       }
    • Before you click "Save", add /* to the end of the Resource key in the Bucket Policy Editor (like above).

    • Click Save.

  • From the Access Control List (ACL) section, click "Edit" and enable List for Everyone (public access), and accept the warning box.

    • If the edit button is disabled, you need to change the Object Ownership section above to ACLs enabled (mentioned above).

IAM

Back on the AWS Services Menu, search for and open IAM (Identity and Access Management). Once on the IAM page, follow these steps:

  • From User Groups, click Create New Group.
    • Suggested Name: group-workout-generator (group + the project name)
  • Tags are optional, but you must click it to get to the review policy page.
  • From User Groups, select your newly created group, and go to the Permissions tab.
  • Open the Add Permissions dropdown, and click Attach Policies.
  • Select the policy, then click Add Permissions at the bottom when finished.
  • From the JSON tab, select the Import Managed Policy link.
    • Search for S3, select the AmazonS3FullAccess policy, and then Import.

    • You'll need your ARN from the S3 Bucket copied again, which is pasted into "Resources" key on the Policy.

       {
       	"Version": "2012-10-17",
       	"Statement": [
       		{
       			"Effect": "Allow",
       			"Action": "s3:*",
       			"Resource": [
       				"arn:aws:s3:::your-bucket-name",
       				"arn:aws:s3:::your-bucket-name/*"
       			]
       		}
       	]
       }
    • Click Review Policy.

    • Suggested Name: policy-workout-generator (policy + the project name)

    • Provide a description:

      • "Access to S3 Bucket for workout-generator static files."
    • Click Create Policy.

  • From User Groups, click your "group-workout-generator".
  • Click Attach Policy.
  • Search for the policy you've just created ("policy-workout-generator") and select it, then Attach Policy.
  • From User Groups, click Add User.
    • Suggested Name: user-workout-generator (user + the project name)
  • For "Select AWS Access Type", select Programmatic Access.
  • Select the group to add your new user to: group-workout-generator
  • Tags are optional, but you must click it to get to the review user page.
  • Click Create User once done.
  • You should see a button to Download .csv, so click it to save a copy on your system.
    • IMPORTANT: once you pass this page, you cannot come back to download it again, so do it immediately!
    • This contains the user's Access key ID and Secret access key.
    • AWS_ACCESS_KEY_ID = Access key ID
    • AWS_SECRET_ACCESS_KEY = Secret access key

Final AWS Setup

  • If Heroku Config Vars has DISABLE_COLLECTSTATIC still, this can be removed now, so that AWS will handle the static files.
  • Back within S3, create a new folder called: media.
  • Select any existing media images for your project to prepare them for being uploaded into the new folder.
  • Under Manage Public Permissions, select Grant public read access to this object(s).
  • No further settings are required, so click Upload.

Stripe API

Heroku Deployment

This project uses Heroku, a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

Deployment steps are as follows, after account setup:

  • Select New in the top-right corner of your Heroku Dashboard, and select Create new app from the dropdown menu.
  • Your app name must be unique, and then choose a region closest to you (EU or USA), and finally, select Create App.
  • From the new app Settings, click Reveal Config Vars, and set your environment variables.
Key Value
AWS_ACCESS_KEY_ID user's own value
AWS_SECRET_ACCESS_KEY user's own value
DATABASE_URL user's own value
DISABLE_COLLECTSTATIC 1 (this is temporary, and can be removed for the final deployment)
EMAIL_HOST_PASS user's own value
EMAIL_HOST_USER user's own value
SECRET_KEY user's own value
STRIPE_PUBLIC_KEY user's own value
STRIPE_SECRET_KEY user's own value
STRIPE_WH_SECRET user's own value
USE_AWS True

Heroku needs two additional files in order to deploy properly.

  • requirements.txt
  • Procfile

You can install this project's requirements (where applicable) using:

  • pip3 install -r requirements.txt

If you have your own packages that have been installed, then the requirements file needs updated using:

  • pip3 freeze --local > requirements.txt

The Procfile can be created with the following command:

  • echo web: gunicorn app_name.wsgi > Procfile
  • replace app_name with the name of your primary Django app name; the folder where settings.py is located

For Heroku deployment, follow these steps to connect your own GitHub repository to the newly created app:

Either:

  • Select Automatic Deployment from the Heroku app.

Or:

  • In the Terminal/CLI, connect to Heroku using this command: heroku login -i
  • Set the remote for Heroku: heroku git:remote -a app_name (replace app_name with your app name)
  • After performing the standard Git add, commit, and push to GitHub, you can now type:
    • git push heroku main

The project should now be connected and deployed to Heroku!

Local Deployment

This project can be cloned or forked in order to make a local copy on your own system.

For either method, you will need to install any applicable packages found within the requirements.txt file.

  • pip3 install -r requirements.txt.

You will need to create a new file called env.py at the root-level, and include the same environment variables listed above from the Heroku deployment steps.

Sample env.py file:

import os

os.environ.setdefault("AWS_ACCESS_KEY_ID", "user's own value")
os.environ.setdefault("AWS_SECRET_ACCESS_KEY", "user's own value")
os.environ.setdefault("DATABASE_URL", "user's own value")
os.environ.setdefault("EMAIL_HOST_PASS", "user's own value")
os.environ.setdefault("EMAIL_HOST_USER", "user's own value")
os.environ.setdefault("SECRET_KEY", "user's own value")
os.environ.setdefault("STRIPE_PUBLIC_KEY", "user's own value")
os.environ.setdefault("STRIPE_SECRET_KEY", "user's own value")
os.environ.setdefault("STRIPE_WH_SECRET", "user's own value")

# local environment only (do not include these in production/deployment!)
os.environ.setdefault("DEBUG", "True")

Once the project is cloned or forked, in order to run it locally, you'll need to follow these steps:

  • Start the Django app: python3 manage.py runserver
  • Stop the app once it's loaded: CTRL+C or โŒ˜+C (Mac)
  • Make any necessary migrations: python3 manage.py makemigrations
  • Migrate the data to the database: python3 manage.py migrate
  • Create a superuser: python3 manage.py createsuperuser
  • Load fixtures (if applicable): python3 manage.py loaddata file-name.json (repeat for each file)
  • Everything should be ready now, so run the Django app again: python3 manage.py runserver

If you'd like to backup your database models, use the following command for each model you'd like to create a fixture for:

  • python3 manage.py dumpdata your-model > your-model.json
  • repeat this action for each model you wish to backup

Cloning

You can clone the repository by following these steps:

  1. Go to the GitHub repository
  2. Locate the Code button above the list of files and click it
  3. Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
  4. Open Git Bash or Terminal
  5. Change the current working directory to the one where you want the cloned directory
  6. In your IDE Terminal, type the following command to clone my repository:
    • git clone https://github.com/tadhgnolan/workout-generator.git
  7. Press Enter to create your local clone.

Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.

Open in Gitpod

Please note that in order to directly open the project in Gitpod, you need to have the browser extension installed. A tutorial on how to do that can be found here.

Forking

By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository. You can fork this repository by using the following steps:

  1. Log in to GitHub and locate the GitHub Repository
  2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
  3. Once clicked, you should now have a copy of the original repository in your own GitHub account!

Credits

Content

Source Location Notes
Markdown Builder README and TESTING tool to help generate the Markdown files
Chris Beams version control "How to Write a Git Commit Message"
W3Schools entire site responsive HTML/CSS/JS navbar
W3Schools contact page interactive pop-up (modal)
W3Schools entire site how to use CSS :root variables
WhiteNoise entire site hosting static files on Heroku temporarily

Media

Acknowledgements

  • I would like to thank my Code Institute mentor, Tim Nelson for their support throughout the development of this project.
  • I would like to thank the Code Institute tutor team for their assistance with troubleshooting and debugging some project issues.
  • I would like to thank the Code Institute Slack community for the moral support; it kept me going during periods of self doubt and imposter syndrome.
  • I would like to thank my partner Rossana, for believing in me, and allowing me to make this transition into software development.

workout-generator's People

Contributors

tadhgnolan avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.