You and i is a website built for a personal trainer (Danielle), which has a e-commerce store so that she can sell her merchandise, as well as a client login which gives her clients a personalized client portal in which Danielle can upload their workouts weekly and they can upload progression pictures, weekly measurements and any comments that they might have. You&i also contains a gallery so that Danielle is able to advertise her private studio and a review page so that anyone can leave a review. The website also contains a contact form, that is linked to Danielles e-mail, this is how potential clients contact Danielle to discuss workout plan options - only Danielle has the ability to create a new user.

• only the 'galley', 'merchandise', 'contact', 'client login' and 'reviews' link will be visible on the web page.

• Register new clients that have contacted her to set up a workout plan.
• Delete any reviews that she does not like - this is done with a delete button on each review that is only visible when a superuser is logged in.
• Edit and delete any of the merchandise - this is done with a edit button which takes Danielle to a new page and delete button on each review that is only visible when a superuser is logged in.
• Upload new workouts for the clients - this is done by logging into the admin page.

• When they log in they will be automatically re-directed to their personalized client portal.
• They will be able to upload progression pictures, measurements and any comments they have for Danielle via a form which is rendered to a bootstrap modal.

When designing this website, I wanted to keep the color scheme that matched her logo (pink and white), whilst keeping it easy to navigate for new users and visually appealing to make potential new clients stay on the webpage and naviagte around the webpage.

As a superuser I want to achieve ....
(list items marked with 👍 are complete. List items marked with 👎 still need to be implemented)

👍 Any easy to use visually appealing site to attract new clients.
👍 An admin log-in to be able to update site/upload new photos/new products.
👍 Links to social media accounts an every page which are clear.
👎 Clients to be able to book sessions online.
👎 Free t-shirt with purchase of workout plan.
👍 A personalized client portal for every clients, which I can upload new workouts each week on and track their progress.
👍 An e-commerce store so I am able to sell my merchandise online.
👍 A contact form so that future clients have an easy way to contact.

As a client I want to achieve ....
(list items marked with 👍 are complete. List items marked with 👎 still need to be implemented)

👍 A personalized profile so that I can access workouts from anywhere and track my progress.
👍 The ability to buy merchandise online.
👎 Downloadable PDFs.
👎 The ability to book sessions online.

As a non-authenticated user I want to achieve ....
(list items marked with 👍 are complete. List items marked with 👎 still need to be implemented)

👍 An easy to navigate website so that I can find what I am looking for easily.
👍 A gallery with up-to-date photos of the studio
👍 Information on Danielle and what services she provides.

• A nav bar with an integrated 'if' statement so that different list items appear depending whether the user is an authenticated user, superuser or either.
• Links with target=_blank to social accounts.
• Login page using django Allauth.
• Contact form using django in-built form model.
• Review form so that individuals can leave feedback.
• A photo gallery with a carousel from bootstrap to show the photos and a 'upload new photos' button which is only visible to the superuser.
• merchandise store with the ability for users to select sizes, quantity and add to bag.
• Toasts from bootstrap are used to display messages to the user when they have logged in, logged out and added a new item to their shopping bag.
• The built-in UserCreationForm from django has been used to allow the superuser to create a new client.

• Online booking system so that users can book online.
• A free you&i t-shirt with the purchase of workout plans.
• Downloadble PDFs available that potential clients are able to download.
• A blog page, giving Danielle to upload useful articles etc.
• A 'are you sure?' delete modal that pops up.

• Jquery so that I could 'write less, do more' and manipulate the DOM easily. https://jquery.com/
• Bootstrap to help making my website mobile responsive, I also used the toats, carousel and modal off bootstrap. https://getbootstrap.com/docs/4.0/getting-started/introduction/
• Font awesome helped make my site more visually appealing by using their icons https://fontawesome.com/
• Google fonts for the font used on my page, I used 'coda' to try and match the logo https://fonts.google.com/
• Django this is the framework I used to make my website https://www.djangoproject.com/
• Django Allauth An django app that is used to make the log in process easier on my site. https://django-allauth.readthedocs.io/en/latest/
• Stripe to take payments on the e-commerce store.

• Used the inspect tool on google to make sure my website looks good on all viewport sizes.
• Tested the links to the navbar go to the correct pages.
• Used the strip test card numbers to make sure that the payment system was correctly working.
• Set the contact form to send email to the terminal to test that email were sending correctly.
• Tested the various 'add new ...' buttons on all of the relevant pages to make sure the forms are working.
• Tested the 'edit' buttons to ensure it was editing the correct product and making the correct changes.
• Tested the 'delete' buttons to make sure that it was getting deleted from the web page and the admin.
• Tested allauth functionality to make sure it was linked up correctly and logging the user in correctly.
• Used a python code checker to check all the code and made changes accoringly. https://extendsclass.com/python-tester.html
• Tested the links to social accounts and made sure they went to the correct social media platform and opened a new webpage.

To deploy this website, I used multiple different programmes. In this section I will go through each programme and outline how I used them to deploy the site.

GitHub contains my repository and is where my site was deployed until it was 95% complete. As I am using GitPod, I was able to use the green gitpod button on my repo so that is was automatically connected to the correct repo. Every time I updated the site I would then run the following in the command line:
git add .
git commit -m "repository message"
git push

To deploy to Heroku I did the following:

• Created a new app in my heroku dashboard.
• In the resources tab I add the 'Heroku Postrgres' add-on.
• In the CLI in gitpod I installed gunicorn, dj_database_url and , psycopg2-binary these packages are required to push to Heroku successfully.
• Import dj_database_url in settings.py (at the top)
• Within the settings.py file at the database section, comment out the default configuration and replace the default to 'default': dj_database_url.parse(os.environ.get('DATABASE_URL')), the DATABASE_URL is from the config vars in the settings tab of the new heroku app.
• Becuse we are not connected to Postgres I then had to run all the migrations again, using the command, python3 manage.py migrate - which applied all the migrations to get the database up and running.
• Load the products data by running 'python3 manage.py loaddata products'.
• I then created a new superuser, as we are now using a new database.
• I then uncommented the database settings are wrapped an if statement to outline if the app is running on Heroku we use Postgres, otherwise we connect to SequelLite.
• Created a Procfile to tell Heroku to create a web dyno which will run gunicorn and serve the django app.
• In the CLI login to Heroku using the command 'heroku login -i'
• To make sure Heroku does not collect static files when I deployed (because I am using s3 for that), in the CLI I ran 'heroku congig:set DISABLE_COLLECTSTATIC=1 --app you-and-i-cr'
• Added the heroku app name ('you-and-i-cr.herokuapp.com') in the 'allowed hosts' within settings.py, as well as loacalhost.
• Deployed my app by running the following commands:
  git add .
  git commit -m 'repo message'
  git push
  heroku git -a you-and-i-cr
  git push heroku master
  
• Once the app is deployed correctly, I set up automatic deployment so that any time I pushed to GitHub it would also deploy to heroku.
• Created a SECRET_KEY config variable in heroku using the django secret key generator on google, I updated the secret key settings in settings.py to os.environ.get('SECRET_KEY', ''), so that the secret keys stays secret.
• Changed DEBUG variable to DEBUG = 'DEVELOPMENT' in os.environ

• AWS is a much larger much more feature-ful Heroku - it offer cloud based services, the two I used for this project are S3 (simple storage service), that is where I stored my static and media files, the other service I used is IAM (Identity and access management) which creates a user to access the bucket.

• Created a new bucket (you-and-i-cr), unchecked block all public access as they need to be public in order to allow public access to our static files.
• In properties tab with in the new bucket, enable static website hosting, using the default values for the error and index document as it is not needed for my project.
• Within the permissions tab the following three changes were made:
  These settings were added to the CORS values.
  [
  {
  "AllowedHeaders": [
  "Authorization"
  ],
  "AllowedMethods": [
  "GET"
  ],
  "AllowedOrigins": [
  "*"
  ],
  "ExposeHeaders": []
  }
  ]
  
  

Within the bucket policy, I generated a bucket policy, with a policy type of 's3 bucket policy', allowed all principles by using an asterix, and actions would be 'get objects', and copy and pasted the ARN into the required field.
I then copy and pasted the generated bucket policy into the bucket policy editor, adding a /* at the end of the resource key as we want to allow access to all resources in this bucket.

Under the ACL (access control list), I changed the list object permission to everyone.

After altering those settings the S3 bucket is ready to go!!

• In the groups tab, I created a new group (yuo-and-i-cr), skipping the attached policy as I did not have one yet.
• Under the policies tab, I created a policy for the new group. Under the JSON tab (after create new policy has been clicked) I selected import managed policy which let me import one (s3 full access policy) that AWS has pre-built for full access to s3.
• However, I did not want access to all of s3, therefore I retrievd the ARN from the bucket policy page on S3 and copy and pasted it into the resources key on the bucket policy.
  "arn:aws:s3:::you-and-i-cr", "arn:aws:s3:::you-and-i-cr/"
  I had to copy it twice, the first line is the bucket itself and the / adds another rule for all files and folders in the bucket.
• I then reviewed the policy, gave it a name and decription and finally created the policy.
• I then attached the newly made policy to my group that I made. To do this I clicked on the group, clicked attach policy, searched the name of the new policy, and click attach policy.
• Lastly, I created a user to put into the group. On the users tab I clicked add user, gave it a name of 'you-and-i-staticfile-user, gave the programatic access, by clicking next I was able to add the user to the group, making sure I downloaded the CSV file at the end as it contains the user access key and secret access key which are needed later on.

Once I had finished setting up my S3 bucket and creating the appropriate policy, group and user, I had to connect it to Django and store my static files in it. To do this I:

• Installed two new packages in the CLI (pip3 install boto3 and pip3 install django-storages).
• Add 'storages' to my installed apps in settings.py
• Added the AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY to config variables (these are from the CSV file I downloaded and are very important to be kept secret!!).
• I also removed the DISABLE_COLLECTSTATIC variable so that static files can now be accessed by s3.
• Added variable 'USE_AWS' and set it to True.
• I then added the AWS settings that can be found in settings.py
• Created a new file called 'custom_storages.py', to tell django that in production we want to use s3 to store our static files whenever someone runs collectstatic. And that we want any uploaded product images to go there also.
• When I then run a git push command, Heroku has collected static files and s3 had a new folder called 'static' with in the bucket I created.
• To manage the media files, I did that from the s3 bucket by creating a new folder called 'media', and adding all the neccesary pictures for my project, making sure I had granted public read access to this folder.

• Within the Heroku app in the config variables, I added the STRIPE_PUBLIC KEY STRIPE_SECRET_KEY and STRIPE_WH_SECRET, which were all on my stripe dashboard under the developers/API keys tab.
• I then set up a new webhook handler as the current one is set to github. To do this I selected create new webhook and had the endpoint URL as the deployed heroku url with /checkout/wh added to the end and selecting receive all events.

The content and media for the project was provided by Danielle who kindly allowed my to use her Personal Training business as a template for my project.

Many thanks goes out to Danielle and all of the Code Institute Tutors that helped massively to get this project to where it it!!