{"id":28163773,"url":"https://github.com/richardaeld/eldridge_music","last_synced_at":"2026-04-06T02:34:08.515Z","repository":{"id":110952631,"uuid":"400349544","full_name":"Richardaeld/Eldridge_Music","owner":"Richardaeld","description":"Eldridge Music Book Emporium is a mock, e-commerce application designed for users to search, rate, and purchase music books. With the use of Django, the app notifies users via toast when a change is made to their cart, sends confirmation emails when a purchase is made, tracks purchase invoices, and more.","archived":false,"fork":false,"pushed_at":"2022-03-08T01:59:43.000Z","size":7407,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-03T14:16:03.782Z","etag":null,"topics":["aws","bootstrap","css3","django","e-commerce","heroku","html5","javascript","postgresql","python","stripe"],"latest_commit_sha":null,"homepage":"https://eldridge-music.herokuapp.com/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Richardaeld.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-08-27T01:10:35.000Z","updated_at":"2022-02-23T23:55:52.000Z","dependencies_parsed_at":"2023-04-07T00:31:08.336Z","dependency_job_id":null,"html_url":"https://github.com/Richardaeld/Eldridge_Music","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Richardaeld/Eldridge_Music","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Richardaeld%2FEldridge_Music","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Richardaeld%2FEldridge_Music/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Richardaeld%2FEldridge_Music/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Richardaeld%2FEldridge_Music/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Richardaeld","download_url":"https://codeload.github.com/Richardaeld/Eldridge_Music/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Richardaeld%2FEldridge_Music/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31457722,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"online","status_checked_at":"2026-04-06T02:00:07.287Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws","bootstrap","css3","django","e-commerce","heroku","html5","javascript","postgresql","python","stripe"],"created_at":"2025-05-15T11:14:27.801Z","updated_at":"2026-04-06T02:34:08.510Z","avatar_url":"https://github.com/Richardaeld.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Contents\n[Eldridge Music Book Emporium - Introduction](#introduction)\n\n[UX](#ux)\n+ [User Stories](#user-stories)\n+ [Design Choices](#design-choices)\n    + [Base - Header](#base---header)\n    + [Home](#home)\n    + [All Account Login - Logout - Management Views](#all-account-login---logout---management-views)\n    + [Merchandise](#merchandise)\n    + [Specials](#specials)\n    + [Used](#used)\n    + [Merchandise Details](#merchandise-details)\n    + [Cart](#cart)\n    + [Invoice - Checkout](#invoice---checkout)\n    + [Profile](#profile)\n    + [Superuser Merchandise CRUD views](#superuser-merchandise-crud-views)\n    + [Return Emails](#return-emails)\n    + [Wireframe and Live App](#wireframe-and-live-app)\n        + [Wireframe](#wireframe)\n        + [Live App](#live-app)\n    + [Scalability](#scalability)\n\n[Technology and Languages](#technology-and-languages)\n\n[Testing](#testing)\n\n[Bugs and Other Problems](#bugs-and-other-problems)\n+ [Current Bugs](#current-bugs)\n+ [Other Problems](#other-problems)\n\n[Deployment](#deployment)\n+ [GitHub - GitPod](#github---gitpod)\n+ [Heroku](#heroku)\n    + [Link Heroku with Github](#link-heroku-and-github)\n    + [Create a Postgres SQL Server](#create-a-postgres-sql-server)\n    + [Enable Automatic Deployment or Manually Deploy Updates](#enable-automatic-deployment-or-manually-deploy-updates)\n+ [Stripe](#stripe)\n+ [AWS](#aws)\n    + [Create S3 Bucket](#create-s3-bucket)\n    + [Create and Configure IAM](#create-and-configure-iam)\n+ [Return Emails with Gmail](#Return-emails-with-gmail)\n\n+ [Heroku Variables](#heroku-variables)\n+ [Django Settings](#django-settings)\n\n[Tools and Credits](#tools-and-credits)\n+ [Tools](#tools)\n+ [Credits](#credits)\n    + [References and Ideas](#references-and-ideas)\n+ [Acknowledgements](#acknowledgements)\n\n--------------------------------------------------------------------------------------\n\n# Introduction\nEldridge Music Book Emporium is dedicated to spreading the love and appreciation of music through the exchange of used and new music books. \nWe are a small shop that is entering the 21st century with our first e-commerce store! Currently we have plans to expand our \nmusic selection to include music books for instruments other than the piano in the future. Until then, please spend a moment \nto peruse our selection and hopfully give some lightly used music books a life!\n\n# UX\n## User Stories\n+ As a shopper I want to view all the merchandise in the store.\n    + I opened the home page of Eldridge Music Book Emporium. I clicked on **Music Books** on the header and I saw a drop-down menu. I then \n    clicked on, **All Music Books** and saw a list of all the music books on the site.\n+ As a shopper I want to view detailed information about a piece of merchandise.\n    + I opened the home page of Eldridge Music Book Emporium. I clicked on **Music Books** on the header and I saw a drop-down menu. I then \n    clicked on, **All Music Books** and saw a list of all the music books of the site. I found a book I liked and clicked on the merchandise \n    card and found all the detailed information I needed.\n+ As a shopper I want to see all discounted merchandise.\n    + I opened the home page of Eldridge Music Book Emporium. I clicked on **Specials** on the header and was taken to a page containing \n    all the discounted music books.\n+ As a shopper I want to view all the items in my cart.\n    + I was shopping and need to know the total of all my selected merchandise. I clicked on the **cart** button in the top right corner \n    of the page and I'm taken to a page where I could see all the items in my **cart** and the total cost.\n+ As a shopper I want to be able to search available products by their category.\n    + I opened the home page of Eldridge Music Book Emporium. I clicked on **Music Books** on the header and I saw a drop-down menu. I then \n    was able to select which category of music books I wanted to view.\n+ As a shopper I want to be able to search for an item by its name or composer.\n    + I opened the home page of Eldridge Music Book Emporium. I saw a **user input search bar** and input the composer I was searching for. I was \n    taken to a page that contains all available books composed by this composer.\n+ As a shopper I want to receive a confirmation email upon checkout.\n    + As I finish shopping I clicked the **Go to secure checkout** button and I am taken to a form that I must complete to check out. I finish \n    the form and I submit it. I checked my email account and found an invoice with detailed information about my purchase.\n\n+ As a new user I would like a create an account.\n    + I opened the home page of Eldridge Music Book Emporium. I clicked on the **profile** button on the top right corner of the page. A drop-down menu \n    appeared below the **profile** button and I clicked, **Create Account**. I was taken to a page where I started the process of creating an account.\n+ As a new user I would like to receive a confirmation email after registering.\n    + I opened the home page of Eldridge Music Book Emporium. I clicked on the **profile** button on the top right corner of the page. A drop-down menu \n    appeared below the **profile** button and I clicked, **Create Account**. I was taken to a page where I started the process of creating an account. \n    I checked my email account and found a confirmation email regarding my newly created account.\n\n+ As a returning customer I would like to rate products I have purchased.\n    + I opened the home page of Eldridge Music Book Emporium. I entered the title of a book I purchased in the **user input search bar** and clicked on the \n    merchandise card to get its **Details View**. I clicked on **Click to Rate**. I entered my rating in the text box that appeared and clicked **Rate me!**. \n    I was able to see the updated average rating.\n+ As a returning user I would like to easily login or logout.\n    + I opened the home page of Eldridge Music Book Emporium. I clicked on the **profile** button on the top right corner of the page. A drop-down menu \n    appeared below the **profile** button and I clicked, **Login**. I was taken to a page to login.\n+ As a returning user I would like to recover my forgotten password.\n    + I opened the home page of Eldridge Music Book Emporium. I clicked on the **profile** button on the top right corner of the page. A drop-down menu \n    appeared below the **profile** button and I clicked, **Login**. I was taken to the login page and I clicked the **Forgot Password?** button. This button\n    sent me to a password reset page.\n+ As a returning user I would like to have a personalized **profile** that has all my previous invoice information.\n    + I opened the home page of Eldridge Music Book Emporium. I clicked on the **profile** button on the top right corner of the page. A drop-down menu \n    appeared below the **profile** button and I clicked, **Login**. I was taken to the login page. After I finished logging in, I clicked on the \n    **profile** button on the top right corner of the page. A drop-down menu appeared below the **profile** button and I clicked **profile**. \n    Once on the **profile** page, I saw all of my previous invoices.\n+ As a returning user I would like to update my shipping information.\n    + I opened the home page of Eldridge Music Book Emporium. I clicked on the **profile** button on the top right corner of the page. A drop-down menu\n    appeared below the **profile** button and clicked, **Login**. I was taken to the login page. I finished logging in, then I clicked on \n    the **profile** button on the top right corner of the page. A drop-down menu appeared below the **profile** button and I clicked **profile**. \n    Once on the **profile** page, I saw all of my shipping information. I updated my shipping information and submitted the changes.\n\n+ As a store manager I want to be able to add merchandise.\n    + I logged in with my store manager account. I clicked on the **profile** button and selected, **Merchandise Management**. I was taken to a page \n    where I could add a merchandise items.\n+ As a store manager I want to be able to edit merchandise.\n    + I logged in with my store manager account. I searched for and found the item that needed editing. On the top right corner of the merchandise \n    card, I saw a button that said, **edit**. I clicked this button and I edited all the fields of the merchandise item.\n+ As a store manager I want to be able to delete merchandise.\n    + I logged in with my store manager account. I searched for and found the item that needed to be removed from the store. On the top right \n    corner of the merchandise card I saw a button that said, **delete**. I clicked the delete button and the item was removed from the store.\n\n## Design Choices\n### Base - Header\n+ Logo was given a layered effect which gives it a textured look.\n+ The **user search bar** can be used to search for a composer or name of an item.\n+ The **profile** button allows users to access log in/out functions, superuser functions, and their user profile.\n+ The **cart** button shows users the total cost of the selected items and will take them to their cart.\n+ The **specials header bar** displays the site's current specials or deals.\n\n### Home\n+ A musically themed hero image is used.\n+ A single container is used on this page to show the current specials. This container displays the site's new or discounted items to help give the site a hook.\n\n### All Account Login - Logout - Management Views\n+ Allauth's templates were used with Bootstrap 4's styling. This greatly simplified the programming process.\n+ Additional styling was added to give the templates a more unique look.\n\n### Merchandise\n+ A warm and inviting linear gradient was used for the background.\n+ Each merchandise item has its own card that helps it stand out from the background.\n+ A **used** and **discount** banner are added to merchandise with those tags. This helps users identify discounted books.\n+ Each card features general text, an image of the product, and a product rating which gives users all the necessary information at a glance.\n    + All merchandise information is limited to a maximum character count to keep cards brief.\n+ Each card is fitted with some **superuser edit/delete** options for ease of inventory management.\n+ A star rating feature allows users to see total ratings and the average rating of a product.\n\n### Specials\n+ A view that returns only discounted merchandise for the user to see in the same format as the **merchandise view**.\n\n### Used\n+ A view that returns only used merchandise for the user to see in the same format as the **merchandise view**.\n\n### Merchandise Details\n+ A warm and inviting linear gradient was used for the background.\n+ A single card is featured here with its unabbreviated content.\n+ A **used** tag is added to any used merchandise.\n+ A **discount** tag is added to all merchandise that is being sold at a discounted value.\n+ Any item being sold at a discounted value shows both the old price and the new price.\n+ Each card is fitted with some **superuser edit/delete** options for ease of inventory management.\n+ A star rating feature allows users to see total ratings and the average rating of the product.\n+ If a user is logged they can rate products.\n\n### Cart\n+ With nothing in the cart, this view directs users back to the **merchandise view**.\n+ This view allows users to see each item, its quantity, and subtotal, before preceding to the checkout.\n+ A **remove** button is placed in the quantity column for users to easily remove an item from their cart.\n+ A pair of quantity adjustment buttons are in each merchandise item row for users to easily adjust the amount of a merchandise item they want.\n+ A **update** button is placed in the quantity column for users to easily update an item's quantity in their cart.\n+ This view calculates the totals of each merchandise item and the delivery fee into a grand total.\n\n### Invoice - Checkout\n+ This view calculates the totals of each merchandise item and the delivery fee into a grand total.\n+ A Crispy Form that users must fill in with basic shipping and payment information.\n+ If the user is signed in, the invoice form will be prepopulated from the users preferred shipping information located on their **profile view**.\n+ The Crispy Form will allow users to update their preferred shipping information when they submit an invoice.\n\n### Profile\n+ This view allows users to see their basic shipping information and all previous invoices.\n+ Two buttons located at the top of the form allow users to select if they want to view their shipping information, previous invoices, or both.\n+ Users can update their shipping information from the preferred shipping form on this view.\n\n### Superuser Merchandise CRUD Views\n+ The **add_merch view** (Merchandise Management) returns a blank merchandise model so a superuser can create a fully functional new merchandise item.\n+ The **edit_merch view** returns a prefilled merchandise model so a superuser can edit any field of the item.\n+ The **delete** button removes the merchandise item from the database without a secondary view.\n\n### Return Emails\n+ Each email has a custom appearance which includes the user's name, all their invoice information, and shipping address.\n+ Each confirmation email includes a customer support email on it.\n\n## Wireframe and Live App\n### Wireframe\n+ Curley brackets found on wireframes will detail JS or button function.\n![Wireframe of the home page](readme/wireframes/merchandise-large.jpg \"Wireframe of the home page\")\n+ Balsamiq was used for the planning process and wireframe creation.\n+ Wireframes were made for all predetermined size variations of the application.\n+ [Click here to view all the wireframe images associated to this project.](readme/WIREFRAMES.md/ \"Location of wireframe images\")\n+ [Click here to view all the wireframe files associated to this project.](readme/wireframes/ \"Location of wireframe files\")\n\n### Live App\n+ [A fully functioning application can be found here, on Heroku](https://eldridge-music.herokuapp.com/ \"Deplayment location\").\n![Index page of Eldridge Music Book Emporium](readme/images/live-app.jpg \"Index page of Eldridge Music Book Emporium\")\n+ VSCode IDE was used for the programming process.\n+ GitHub houses the [master branch](https://github.com/Richardaeld/Eldridge_Music).\n\n## Scalability\n+ Music books for other instruments could be added to expand the ecommerce shop.\n+ The home page could have a second merchandise special container that features a single special. This special could be a captioned image, \nfor a specific product, with a timer to help entice users to make an impulse purchase.\n+ Allow images to show an image modal when clicked.\n+ Add a warning modal for superusers when they click the **delete** merchandise button. This could stop accidental deletions.\n+ A counter that tells the user how many merchandise items are being displayed in the current search or on the current page.\n+ Add different ways of sorting displayed merchandise items. These could include: price, composer, etc....\n+ Add ability to calculate tax.\n+ Rating system:\n    + Change number rating to a star count. This would look better and remove the need for a text input.\n        + This system could have its numbers updated to use a standard 5 or 10 star system.\n    + Add a validation system to allow only those who have purchased a product to rate it.\n\n# Technology and Languages\n+ HTML - Skeleton frame of the application.\n+ CSS - Beautifies the skeleton (HTML).\n+ JavaScript - Allows for user interaction and dynamic function on the application.\n+ Python - Allows dynamic function and back end programs to run. These programs (frameworks, libraries, and databases) are:\n    + Django - Allows use of templating, security, and other critical functions.\n        + Allauth - An app that allows logging in, logging out, password recovery and more.\n        + Stripe - An app that allows users to securely pay online with credit cards.\n        + Postgres - A type of SQL server used to store information.\n        + Crispy Forms - Allows for forms to be easily, quickly, and neatly created and configured.\n+ AWS - A Server used to store static and media files.\n\n# Testing\n+ The **Testing** documentation can be found on [TESTING.md](TESTING.md).\n\n# Bugs and Other Problems\n## Current Bugs\n+ Roman numerals in names for merchandise items display inaccurately.\n    + Caused by:\n        + The use of Django's tag title `{% | title %}`.\n    + Thought(s):\n        + If Django's title tag (`{% | title %}`) is removed from the name templating and superusers enter merchandise information in with \n        100% accuracy this could be avoided.\n        + If a `text-transfrom: uppercase` css command is used, it would solve this problem but this solution creates an overall poorer user experience.\n+ Checkbox on superuser/admin add/edit merchandise will not style border.\n    + Caused by:\n        + Unknown.\n    + Thought(s):\n        + `!important` was used to attempt to override any existing style, but this did not work. All the class styles were analyzed \n        though from browser inspect and a problem could not be found.\n+ On Safari browsers, the **invoice view** doesn't open to the correct responsive size.\n    + Caused by:\n        + Safari.\n    + Attempted fix(s):\n        + Various snippets of code from Stack Overflow.\n    + Thought(s):\n        + The problem seems to be a combination of having an HTML table in a responsive bootstrap design.\n+ Scroll bar doesn't show up in the success toast on Safari browsers.\n    + Caused by:\n        + Safari.\n    + Attempted fix(s):\n        + Various snippets of code from Stack Overflow.\n    + Thought(s):\n        + May be caused by a setting in Safari.\n+ Scroll bar doesn't show up in the success toast on Firefox browsers.\n    + Caused by:\n        + Firefox browser or missing vendor extensions.\n    + Attempted fix(s):\n        + None.\n    + Thought(s):\n        + The addition of `-webkit-` or `-moz-` vendor extensions to the scroll bar styles could fix this issue.\n\n## Other Problems\n+ Bootstrap's toasts do not show up on screen.\n    + Caused by:\n        + jQuery error.\n    + Fix:\n        + Wrote custom JS script to reveal any toasts.\n+ An active link header was originally used to display the name of the item a user was viewing, however, some names proved to be too long.\n    + Caused by:\n        + Names longer than 15 characters.\n    + Fix:\n        + Removed the active link that showed users the name of the product they were on.\n+ **User search bar** on the fixed header was askew from center.\n    + Caused by:\n        + Responsive design header that used Bootstrap's `col` and possibly other issues.\n    + Fix:\n        + A combination of `display: flex` and left/right percent margins.\n+ Favicon doesn't show up on all views.\n    + Caused by:\n        + Inability to push `MEDIA_URL` to all views for use.\n    + Fix:\n        + Added `MEDIA_URL` to all views possible.\n    + Thought(s):\n        + Still does not display correctly on all views because of an inability to push `MEDIA_URL` to Allauth templates.\n+ Create new account focuses on middle input when page opens.\n    + Caused by:\n        + Allauth.\n    + Thought(s):\n        + The focus could be changed with JS or locating where Allauth assigns focus.\n+ Phone landscape view is limited.\n    + Caused by:\n        + App header and phone on-screen keyboard.\n    + Thought(s):\n        + JS could be used to allow the header to scroll out of view until it is needed.\n            + This could conflict with Bootstrap's and Jquery's function.\n            + This could be implemented on all mobile sized screens and would greatly increase the viewable real-estate.\n+ User rating's **Rate Me!** button will not submit after it has been clicked once.\n    + Caused by:\n        + JS validation designed to stop users from submitting multiple ratings at a single time.\n    + Thought(s):\n        + Back end logic prepared to handle multiple submissions would make this JS validation obsolete.\n\n# Deployment\n## GitHub - GitPod\n+ Go to the location of the original repository in GitHub, [https://github.com/Richardaeld/Eldridge_Music](https://github.com/Richardaeld/Eldridge_Music).\n+ Click on the **Code** button to get the drop-down menu.\n+ Copy the HTTPS address provided.\n+ Create a new GitHub/GitPod project (to house the new clone) and then open this new project.\n+ Go to the Bash and type, `git clone \u003cHTTPS\u003e`, paste the HTTPS address found in the GitHub page (don't forget the space after \"clone\") and press enter.\n+ A clone will be created within a new folder called \"Eldridge_Music\" (name of the original repository).\n+ Unpack everything from this new folder to the root of the GitPod project tree and the foundation of the project will be setup.\n\n## Heroku\n+ Log into Heroku.\n+ Create a new app on Heroku by clicking **New** and following the directions.\n\n### Link Heroku and GitHub:\n+ Log into Heroku.\n+ From the **Personal Apps** page, click on the new app that was just created in Heroku.\n+ Click on **Deploy**.\n+ Click on **GitHub** from **Deployment Method** section.\n+ Enter your GitHub information and the name of the cloned repository into the \"Connect to GitHub\" section.\n\n### Create a Postgres SQL Server.\n+ From your new apps base page, click on **Resources**.\n+ Click on **Find More Add-Ons**.\n+ Select **Postgres**.\n+ Finish setup.\n\n### Enable Automatic Deployment or Manually Deploy Updates.\n+ Automatic Deployment:\n    + Click on **Deploy**.\n    + Click on **Enable Automatic Deploys** in **Automatic Deploys** section.\n    + Click on **Deploy Branch** in **Manual Deploy** section to start initial deployment.\n+ Manual Deployment:\n    + Click on **Deploy Branch** in **Manual Deploy** section any time there is content you want to update the active app with.\n\n## Stripe\n+ Go to **Stripe.com** and click **Start Now**.\n+ Create a new account.\n+ Click **Developer** tab.\n+ Click **API Keys** to find **Publishable Key** and **Secret Key**.\n+ Click **Webhooks** tab.\n+ click **Add Endpoint** and enter the new apps Heroku address with **/invoice/wh/** at the end of the address.\n+ Stripe will now provide you with a **Signing Secret Key**.\n\n## AWS\n+ Go to **aws.amazon.com**.\n+ Create a new account.\n+ Log in and click, **My Account** and then **AWS Management Console**.\n\n### Create S3 Bucket:\n+ Search for and select service **S3**.\n+ Click **Create Bucket**.\n+ Name the new bucket and uncheck **Block All Public Access**.\n+ Click **Create Bucket**.\n+ Configure bucket:\n    + Click on newly created bucket's name.\n    + Click on **Properites** tab.\n    + Click on **Static Website Hosting**.\n    + Click on **Use This Bucket To Host A Website** and fill out index/error document with default information and save.\n    + Click on **Permissions** tab.\n    + Click on **CORS Configuration** and paste in code [CORES config](readme/AWS.txt).\n    + Click on **Bucket Policy** tab and then click **Policy Generator**.\n    + For **Type of Policy** select **S3 Bucket Policy**.\n    + For **Principal** enter `*`.\n    + For **Actions** select **GetObject**.\n    + Enter the buckets **ARN** into this forms ARN input.\n    + Click **Add Statement** then **Generate Policy** and copy the policy generated.\n    + Paste this copied policy into the **Bucket Policy**.\n    + add a `/*` onto the end of the value of the key **Resource**.\n        + Ex. `\"Resource\": \"\u003cbucket ARN\u003e/*\"`\n    + Click save.\n    + Click **Access Control List** tab.\n    + Click on **Public Access** and set **List Objects** and save.\n\n### Create and Configure IAM\n+ Go to services menu and select **IAM**.\n+ Under **Access Management** click **Groups** and the **Create A New Group**.\n+ Enter a name, select **Next Step** twice, and then **Create Group**.\n+ Under **Access Management** click **Policies** and then **Create Policy**.\n+ Click **JSON** tab and then click **Import Managed Policy**.\n+ Search for **S3**, select **AmazonS3FullAccess**, and click **Import**.\n+ Replace the value of **Resource** with [IAM JSON Resource](readme/AWS.txt).\n+ Click **Review policy**.\n+ Give the policy a name and description.\n+ Click **Create policy**.\n+ Under **Access Management** click **Groups**.\n+ Click recently created group and **Attach Policy**.\n+ Search for policy that was just created, select this policy, and click **Attach Policy**.\n+ Under **Access Management** click **Users** and then **Add User**.\n+ Create a name for user (add suffix '-staticfiles-user'), give them **Programmatic access**, and click **Next**.\n+ Put newly created user in **IAM Group** and keep clicking **Next** until user has been created in **IAM Group**.\n+ Download **.csv** and save this file. You will not be able to download it again.\n\n## Return Emails with Gmail\n+ Log into a Gmail account.\n+ Go to **Settings** and click **Accounts and Import**.\n+ Under **Change Account Settings** click on **Other Google Account Settings**.\n+ Click on the **Security** tab, click on **2-Step Verification**, and then **Get Started**.\n+ Verify your setting choice and turn on **2-Step Verification**.\n+ Go back to **Other Google Account Settings** and click **Security**.\n+ Click on **App Passwords**.\n+ Select **Mail** for the app.\n+ Select **Other** for the device and enter **Django**.\n+ Gmail will provide you with an app password.\n\n## Heroku Variables\n+ Share `env.py` information with Heroku.\n    + Click on **Settings**.\n    + Click on **Reveal Config Vars** from **Config Vars** section.\n    + Add all of the `env.py` key and value pairs without their quotations.\n        + Ex. (key) == (value)\n        + Development == 0\n        + USE_AWS == True\n        + DATABASE_URL == (key provided from Postgres server)\n        + SECRET_KEY == (any Django secret key)\n        + STRIPE_PUBLIC_KEY == (provided by **Stripe** as **Publishable key**)\n        + STRIPE_SECRET_KEY == (provided by **Stripe** as **Secret Key**)\n        + STRIPE_WH_SECRET == (provided by **Stripe** as **Webhook Signing Secret**)\n        + AWS_ACCESS_KEY_ID == (provided by **AWS .csv** as **Access Key Id**)\n        + AWS_SECRET_ACCESS_KEY == (provided by **AWS .csv** as **Secret Access Key**)\n        + EMAIL_HOST_USER == (Gmail address return email will be sent from)\n        + EMAIL_HOST_PASS == (provided by **email provider** as **As Password**)\n\n## Django Settings\n+ Open the core django app.\n+ Open the settings.py file:\n    + Update **ALLOWED_HOSTS** to the web address of the deployed Heroku app.\n    + Update **STORAGE_BUCKET_NAME** to the name of the bucket created in [AWS](#aws).\n    + Update **AWS_S3_REGION_NAME** to the region the bucket was created in [AWS](#aws).\n\n\n# Tools and Credits\n## Tools\n+ [Adobe Color Wheel](https://color.adobe.com/create/color-wheel)\n    + Used to help pick color schemes.\n+ [Amazon Web Services](https://aws.amazon.com/)\n    + Used to store static and media files.\n+ [Balsamiq](https://balsamiq.com/)\n    + Used to produce the wireframes.\n+ [Bootstrap](https://getbootstrap.com/)\n    + Used as framework.\n+ [BrowserStack](https://www.browserstack.com/)\n    + Used to check for compatibility errors.\n+ [Django Secret Key Generator](https://miniwebtool.com/django-secret-key-generator/)\n    + Used to create random secret key for Django.\n+ [Font Awesome](https://fontawesome.com/)\n    + Imported icons are from here.\n+ [GitHub](https://github.com/)\n    + Used for version control and deploys application information to Heroku.\n+ [Google Fonts](https://fonts.google.com/)\n    + Imported font families found here.\n+ [Heroku](https://www.heroku.com/)\n    + Site where application is deployed.\n+ [Inkscape](https://inkscape.org/)\n    + Used to create scalable vector graphics (SVG).\n+ [Jigsaw (Validation Service)](https://jigsaw.w3.org/css-validator/)\n    + Used to identify errors in CSS.\n+ [JSFiddle](https://jsfiddle.net/)\n    + Used for tinkering and creating CSS art.\n+ [JSHint](https://jshint.com/)\n    + Used to identify errors in JavaScript.\n+ [JSON formatter](https://jsonformatter.org/)\n    + Used to read long strings of JSON\n+ [jQuery](https://jquery.com/)\n    + JS library used with Bootstrap.\n+ [Lighthouse](https://developers.google.com/web/tools/lighthouse)\n    + Used to check for performance, accessibility, best practices, and SEO.\n+ [PEP8 online](http://pep8online.com/)\n    + Used to identify errors in Python.\n+ [Pingdom](https://tools.pingdom.com/)\n    + Used to check load time.\n+ [Stripe](https://stripe.com/)\n    + Used to allow users to make payments with credit cards.\n+ [Techsini](https://techsini.com/multi-mockup/)\n    + Used for their viewable responsiveness PNG.\n+ [TinyPNG](https://tinypng.com/)\n    + Used to Minimize KB load per image.\n+ [VSCode](https://code.visualstudio.com/)\n    + Integrated development environment used.\n+ [W3C Validator](https://validator.w3.org/)\n    + Used to identify errors in markup.\n\n\n## Credits\n### References and Ideas\n+ [Allauth](https://django-allauth.readthedocs.io/en/latest/installation.html)\n    + Used for all login, logout, and account management.\n+ [Bootstrap](https://getbootstrap.com/)\n    + A framework used to help speed up development and provide a better overall UX.\n+ [MDN Web Docs](https://developer.mozilla.org/en-US/)\n    + Invaluable source of information about JavaScript, HTML, and CSS.\n+ [Stack Overflow](https://stackoverflow.com/)\n    + A great source of information to find a starting place for research.\n+ [TestLodge](https://blog.testlodge.com/how-to-write-test-cases-for-software-with-sample/)\n    + Used to help formulate the test syntax structure.\n+ [W3Schools](https://www.w3schools.com/)\n    + Extremely helpful for explaining base HTML, CSS, and JavaScript principles.\n+ [World Wide Web Consortium (W3C)](https://www.w3.org/)\n    + Used to understand basic standardization practices for web-based apps.\n+ [Django](https://docs.djangoproject.com/en/3.2/)\n    + A through guide to this intricate frame work.\n+ [Code Institute](https://codeinstitute.net/)\n    + Code Institute's Boutique Ado for a great foundation to make a ecommerce site\n\n# Acknowledgements\n+ Emily Eldridge for help with revising the grammar and flow of this README document.\n+ Felipe Souza Alarcon for his suggestion of simplifying this project, his help, and guidance.\n+ JoGorska_5p for being a great tester.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichardaeld%2Feldridge_music","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frichardaeld%2Feldridge_music","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichardaeld%2Feldridge_music/lists"}