CheesyStore
Welcome to CheesyStore, an online cheesemonger based in Ireland. Our website offers a handpicked selection of the finest cheeses from Ireland and around the world. CheesyStore goes beyond just selling cheese. Alongside the shop there is a blog featuring pairing guides, the stories behind our products, and the latest news from the dairy world. These insights, along with special offers, are shared across various social media platforms to keep our community engaged and informed.
CheesyStore is a B2C e-commerce store and blog. The site is targeted towards potential customers both in Ireland and internationally. The payment system uses Stripe.
Live Website here: Cheesy Store
Link to Main Project Board: Project Board
Table of Contents
- CheesyStore
- Table of Contents
- Concept
- Development
- User Stories
- Design
- Wireframes
- GitHub Projects
- Database and Data Models
- Features
- CRUD Functionality
- Authentication and Authorization
- Navigation
- Homepage
- CheesyStoreShop
- Product Detail
- Cheesy Blog
- Cheesy Blog Posts
- Bag
- Checkout
- Frequently Asked Questions
- Contact Us
- Success Page
- Product Management
- My Profile
- Sign In
- Footer
- Features Left to Implement
- Business Model
- Web Marketing and Search Engine Optimization
- Key Words
- Blog Keywords
- Sitemap and Robots.txt
- Social Media Marketing
- Email Marketing
- Technologies Used
- Core Development Technologies \& Languages
- Testing
- Deployment - Heroku
- Create the Heroku App:
- Attach the Postgres database:
- Update Heroku Config Vars
- Deploy
- AWS Set Up
- AWS S3 Bucket
- IAM
- Connecting S3 to Django
- Forking this repository
- Cloning this repository
- Credits
Concept
This web application is a submission for Portfolio Project 5, with a focus on e-commerce. The project required a concept that could process payments using Stripe and be marketable on social media platforms. The chosen concept is an online cheesemonger, which offers a variety of cheese products. The website is designed to cater to a wide audience and is structured for easy categorization of products.
To enhance marketing efforts and attract customers, the website includes a blog. The blog allows the site owners to publish posts related to cheese products, history, and culture. This feature aims to engage visitors and provide additional value beyond just e-commerce.
The current version of the website is a Minimum Viable Product (MVP), developed within the project's deadline constraints. Future expansions are planned to include features such as recipes, pairing guides, and an integrated chatbot using the ChatGPT API. These additions are intended to further enhance the user experience and the website's offerings.
Development
User Stories
- As a site administrator, I can manage user accounts, including activating, deactivating, and deleting accounts, so that I can maintain the site's user base and security.
- As a site user, I can subscribe to the newsletter to receive updates on new cheese arrivals, promotions, and blog posts so that I can stay informed.
- As a site user, I can read blog posts about cheese tasting, pairing tips, and cheese-making processes so that I can expand my knowledge and appreciation of cheese.
- As a site user, I can leave comments and reviews on cheeses and blog posts so that I can share my opinions and experiences with other users.
- As a site administrator, I can create and publish blog posts about cheese-related topics so that I can engage users and attract traffic to the site.
- As a site administrator, I can add, edit, and delete cheeses from the store inventory so that I can manage the product catalog.
- As a site user, I can create an account and log in so that I can track my order history and manage my profile information.
- As a site user, I can view detailed information about each cheese, including its origin, flavor profile, and suggested pairings, so that I can make an informed decision.
- As a site user, I can search for specific types of cheeses (e.g., soft, hard, aged) so that I can find cheeses that match my preferences.
- As a site user, I can add cheeses to my cart and proceed to checkout so that I can purchase them.
- As a site user, I can browse a variety of cheeses so that I can explore different options.
- As a user, I want to be able to set up an account and login in and log out so I can purchase items and leave a comment.
- As a user, I want to easily find answers to frequently asked questions so that I can make informed decisions about the products and policies without needing to wait for a response from customer service.
- As a user, I want to subscribe to a monthly cheese subscription service so that I can discover new cheeses and have a consistent supply of high-quality cheese without having to reorder manually each time.
- As a user, I want to participate in a loyalty program that rewards me for my purchases so that I can enjoy discounts, get early access to new products, and access exclusive content.
- As a potential customer, I want to interact with a chatbot on the cheese-selling website so that I can receive personalized recommendations, get answers to my questions about the products, and have assistance throughout the checkout process, making my shopping experience smoother and more enjoyable.
User Stories are tested in: TESTING.md
Link to User Stories + Tasks: User Stories Board
Design
This project does not have a specific color scheme. The header and footer feature a black background with white text. To maintain a clean appearance, especially due to the numerous images associated with products and blog posts, the design predominantly employs a monochrome palette. Most pages on the website display a background image, with the exception of the store and checkout pages. To avoid clutter on these pages, a white overlay has been applied. On pages where the overlay has not been applied, the content of the page rests on white card divs.
Imagery
CheesyStore contains a background image that is present on most of the pages on the site. It is from Pexels.com and it is called "Slice Cheese, Biscuits and Bowl of Fruits". I chose it because the centre of the image is blank which would have been nice for a call to action. A link can be found here.
Fonts
For CheesyStore, I selected the Rubik font due to its versatility. Being a sans-serif typeface, it's excellent for headings and titles. For body text or more extensive sections of text, I opted for the Lora font. Its readability paired well with Rubik so it was an ideal choice.
Wireframes
Wireframes were created at the start of the project to establish the website's structure. The initial framework has largely stayed consistent throughout the development process. These wireframes were used as a reference for the design, ensuring that it did not stray significantly from the intended direction. They were also designed with responsiveness in mind, knowing that Bootstrap could be used to adapt the layout for smaller screens.
Although there were some deviations from the original design, such as not including an "About Us" section, I made efforts to adhere to the initial wireframes as closely as possible. The wireframes proved to be valuable, providing a solid foundation for the design. They helped prevent excessive deviation during the styling process, which often led to cluttered HTML and CSS.
Home Page Initial Desktop Wireframe
Home Page Initial Mobile Wireframe
Product Page Initial Desktop Wireframe
Product Page Initial Mobile Wireframe
Product Page Initial Desktop Wireframe
Product Page Initial Mobile Wireframe
Product Page Initial Desktop Wireframe
Product Page Initial Mobile Wireframe
Bag Initial Desktop Wireframe
Bag Initial Mobile Wireframe
Checkout Initial Desktop Wireframe
Checkout Initial Mobile Wireframe
Blog Initial Desktop Wireframe
Blog Initial Mobile Wireframe
Blog Post Initial Mobile Wireframe
Contact Page Initial Desktop Wireframe
Contact Page Initial Mobile Wireframe
About Page Desktop Wireframe
About Page Desktop Wireframe
FAQ Page Mobile Wireframe
GitHub Projects
In the repository for CheesyStore, I initiated the project by creating sixteen User Story issues. Subsequently, I generated corresponding Tasks for each User Story. Three different project boards were created, and the User Stories were imported into each.
-
The main project board comprises three columns: to do, in progress, and completed. As development advanced, I transitioned User Stories from one column to another, aiding in tracking the project's progress.
-
A second project board was created, incorporating both User Stories and Tasks. This board was designed to provide an overview of the tasks associated with each User Story, with each User Story and its corresponding Task placed in a specific column.
-
A third project board was created to prioritize User Stories using the MoSCoW Prioritization method. This board featured columns for Must-Have, Should-Have, Could-Have, and Won't-Have, facilitating the prioritization of development tasks.
Link to Main Project Board: Project Board
Link to User Stories + Tasks: User Stories Board
Link to MoSCoW Prioritization Board: MoSCoW Board
User Stories are tested in: TESTING.md
Database and Data Models
CheesyStore has four app folders with models. The User model is handled by Django AllAuth.
cheesystoreshop
This app contains five models. These models are for the products, the categories for the products and the rating of the products.
Product
The Product model contains the information to store details of the product for sale. The origin, category, cheesetype and rating fields are linked with foreign keys to the others models in this folder in a one-to-many relationship. The rating model is linked to the Product model but in a many-to-one relationship.
- category (Foreign Key, Category)
- cheesetype (Foreign Key, CheeseType)
- origin (Foreign Key, Origin)
- sku
- name
- description
- price
- rating
- in_stock
- image_url
- image
Category
The main Category model is for the main category to place the product into:
- name
- friendly_name
Origin
The subcategory Origin model is for where the cheese comes from:
- name
- friendly_name
CheeseType
The second subcategory CheeseType is for the type of cheese it is:
- name
- friendly_name
Rating
The Rating model holds the User rating for the specific product.
- product (Foreign Key, Product)
- user
- stars
cheesyblog
This app contains two models. These models are the blog posts and the comments on the web applications blog. There is a many-to-one relationship between post and user, comment and post, and comment and user.
Post
The Post model is for the blog posts themselves to be written by a superuser or through django-admin:
- title
- slug
- author (Foreign Key, User)
- updated_on
- content
- featured_image
- excerpt
- created_on
- status
- keywords
Comment
The Comment model is the comments on the blog posts. It is linked to the Post model and User model through foreign keys:
- post (Foreign Key, Post)
- user (Foreign Key, User)
- body
- created_on
- approved
checkout
This app contains two models. These models are for the Order and Order Line Items - or the products themselves in the order. There is a one-to-many relationship from UserProfile to Order, and Order to OrderLineItem. There is a many-to-one relationship between Product and OrderLineItem.
Order
The Order model contains the information for each specific order including user, address, contact details and order number:
- order_number
- user_profile (Foreign Key, User Profile)
- full_name
- phone_number
- country
- postcode
- town_or_city
- street_address1
- street-address2
- county
- date
- delivery_cost
- order_total
- grand_total
- original_bag
- stripe_pid
OrderLine Item
The OrderLineItem model contains the products and the quantity of each in each order:
- order (Foreign Key, Order)
- product (Foreign Key, Product)
- quantity
- lineitem_total
profiles
This app contains the information for each User profile. The User model itself is handled by Django AllAuth but it is extended here to aid the creation of profiles for each user:
User Profile
The UserProfile model contains information to display for each registered user. There is a one-to-one relationship between UserProfile and User.
- user (Foreign Key, User)
- default_phone_number
- default_street_address1
- default_street_address2
- default_town_or_city
- default_county
- default_postcode
- default_country
Contact
The Contact model contains information to display to the admin. It is a standalone model. Every time someone fills out the contact form, an email is sent and the message saved in the database.
- name
- message
- created_at
Database Model Diagram
I created this Database Diagram Model with DrawSQL.
Data Model Diagram
Features
CRUD Functionality
Create
-
Superusers can add new products to the store via the "Product Management" link in the Navbar. This feature is only for administrators, allowing them to update the shop's inventory. The "Product Management" link is visible only to admins.
-
Registered users have the ability to post comments on blog entries. Administrators can create new blog posts through the Django admin panel.
Read
- Any user of the website irrespective of registration status can see the new products, blog posts or comments posted once they have been approved and posted by the admin.
Update
- Administrators, once logged in, will see a small "edit" button beneath each product listing on the "Products" page and the "Product Detail" page. Clicking this button directs them to a page where they can modify the product details. Similarly, a comment can be edited by bringing up a separate HTML page for editing a comment.
Delete
-
Administrators, once logged in, will notice a small "delete" button beneath each product listing on the "Products" page and the "Product Detail" page. Clicking this button triggers a form with text beneath the button to confirm the deletion of the product.
-
Similarly, registered users will see a "delete" button below their comments. Clicking this button triggers a form with text beneath the button to confirm the deletion of the comment.
Authentication and Authorization
Django All Auth is used for backend authentication:
- Users can create an account in the sign-up page.
- Users can sign-in to their account to leave comments, posts and likes using the sign-in page.
- Users can login back into their account using the login page.
- Only authorized users can visit the submit review page and update review page.
Navigation
On larger screens, the navigation bar contains tabs aligned to the right and aligned to the left. On the right, there is an icon for the store which serves as link to the homepage. It is followed by links to three dropdown icons for Products, Categories and More. By clicking Product we find links All Products, Cheeses and Other Products. By clicking Categories we find links the products in the store categorized by Cheese Type and Origin. By clicking More we find links to the FAQ, Contact and Blog Page.
On the left of the navigation bar, two dropdown icons and a link. The two dropdown links are for Search and My Account. By clicking Search, a dropdown appears with a Form to search the products in the store. By clicking My Account, links to login, register, sign-out and my profile appear. A further Product Management link appears if the user is a Superuser. The final link is a link to the Bag page contains products selected to purchase.
On smaller screens, the Navigation bar responds by turning the Icon into another Dropdown Menu. Remaining on the mobile Navigation bar are Search and Bag icons which have the same functionality as on Desktop. The CheesyStore Icon Dropdown menu contains all the other links from the Desktop navigation bar including a Home and My Account link.
Desktop Navbar
Mobile Navbar
Mobile Navbar Dropdown
Homepage
The Homepage is structured into three sections. The top section features a "Welcome" message alongside a brief description of the Store, accompanied by a "Shop Now" button designed as a prompt for visitors to explore the store further. The middle section displays three thumbnails, each linking to one of the three most recent blog posts. The inclusion of a new blog post dynamically refreshes this section to showcase the latest content. On devices with smaller screens, the display adjusts to highlight just a single post. The bottom section is divided into two parts: the first part highlights the most recent addition to the store's product range, and the second part provides a subscription form for the mailing list. When viewed on smaller screens, these parts stack vertically.
Desktop Homepage
Mobile Homepage
CheesyStoreShop
The products page layout remains consistent across all product categories, with products organized in rows. The number of products displayed per row varies with screen size: six products are shown per row on the largest screens, while only one product is displayed on the smallest screens. Each product card features an image, name, price, origin, cheese type, and rating. For administrators, additional "Edit" and "Delete" buttons are available for each product for easy management. The content is divided into multiple pages through pagination.
Cheesy Store Shop Desktop
Cheesy Store Shop Mobile
Product Detail
The product details page is designed with two-columns. On one side, there's a large image of the featured product. The opposite column displays the same product information found on the main store page, including specifics like name, price, origin, cheese type, and rating, along with a short product description. For users who are logged in, there's an option to rate the product with up to five stars. Below the rating, a quantity selector allows users to adjust how many units they wish to purchase, using plus and minus buttons for adjustment. The page concludes with two action buttons: one to continue shopping and another to add the selected product quantity to the shopping bag. On smaller screen sizes, the large image of the product will not display.
Product Detail Desktop
Product Detail Mobile
Cheesy Blog
The Blog section mirrors the store's design, organizing blog posts into rows of cards. Each card displays a featured image and an excerpt from the blog post, as well as the time and date it was submitted. To facilitate easier navigation, the blog pages are also paginated. On smaller screen sizes, the blog posts will display as a single column.
Cheesy Blog Desktop
Cheesy Blog Mobile
Cheesy Blog Posts
The layout for viewing individual blog posts is designed similarly to the product details page. The first part is divided into two columns: one for the main text of the blog post and another for the featured image. On smaller screens, the featured image is designed to be hidden for viewing space. The second part of the layout is dedicated to user interactions, specifically comments. It's split into two sections: one displaying existing comments and the other featuring a form for submitting new comments. Beneath each comment, "Edit" and "Delete" buttons are provided, visible only to the comment's author. On smaller screens, these two sections stack vertically.
Blog Post Desktop
Blog Post Mobile
Bag
The bag page features a table listing all the items added by the user. Each product has a separate row within the table, with columns to display the product's image, title, price, quantity, and subtotal. The quantity column includes a form for each product, allowing users to either remove the product or adjust its quantity. The final row of the table presents the grand total of the items in the bag, accompanied by two links: one to "Keep Shopping" and another to "Continue to Checkout." For better readability on smaller screens, the table layout shifts to a single-column, where each section presents the product's image, details, and the quantity adjustment form.
Bag Desktop
Bag Mobile
Checkout
The checkout page is divided into two main sections. On the left side, there is a summary of the order, providing an overview of the items selected for purchase. On the right side, users are presented with a form to enter their personal and shipping details, as well as a separate section designated for entering payment information i.e card details. For users who are logged in, the form fields for personal and shipping information are automatically populated with their stored details, streamlining the checkout process. These two sections stack vertically on smaller screen sizes.
Contact Desktop
Contact Mobile
Frequently Asked Questions
The Frequently Asked Questions (FAQ) Page is organized with a single, centrally aligned column that groups each question with its relevant answer. This layout facilitates easy navigation and readability, allowing users to quickly find the information they need.
FAQ Desktop
FAQ Mobile
Contact Us
The "Contact Us" page is split into two distinct sections. The first section features a form where users can fill out their name, email, and the message they wish to send to the administrators for various purposes. The second section includes the subscription form that is also found on the homepage, allowing users to subscribe to newsletters or updates directly from the "Contact Us" page. This dual-section setup serves both communication and engagement purposes on the same page.
Contact Us Desktop
Contact Us Mobile
Success Page
The success page displays an order summary for the user, providing details about their purchase. This summary includes the order number, the date of the order, and information regarding the shipping details. This layout ensures users have a clear confirmation of their transaction, including when and where their order will be shipped.
Success Desktop
Success Mobile
Success Toast
Product Management
The Product Management page features a comprehensive form designed for entering the details of new products, including an option to upload an image. The form incorporates dropdown menus, allowing for the selection of categories under which the new products will be placed. This setup facilitates organized product addition, ensuring each item is correctly categorized for easy browsing and management.
Product Management Page
My Profile
The profile page is divided into two main sections to enhance user experience. The first section lists all orders associated with the user. Each listed order includes a link to the relevant checkout success page. The second section of the profile page presents a form for updating the Default Delivery Information. This form includes fields for users to input or amend their standard shipping details.
Profile Page
Sign In
The Sign In page features a straightforward design, with a form that's centrally aligned for ease of use. This form contains fields for entering a Login and Password. Pages for registration, password recovery, and displaying errors follow a similar design ethos, ensuring a consistent and user-friendly experience.
Sign In Page
Footer
In the footer a link to the store's Privacy Policy is aligned to the right. In the center, social media links are displayed, offering a way for users to connect with the store. Also rightly aligned is a link to the Contact Page. On smaller screen sizes, the design simplifies to display only the social media links.
Footer
Features Left to Implement
-
I want to use ChatGPT API to create a chatbot for users of my store to use to help make purchases and navigate the store. I initially made a User Story that remains unfinished: As a potential customer, I want to interact with a chatbot on the cheese-selling website so that I can receive personalized recommendations, get answers to my questions about the products, and have assistance throughout the checkout process, making my shopping experience smoother and more enjoyable.
-
In the future, I will add more categorizations to the cheese. Part of the reason I decided on a cheesemonger was due to the many ways you could categories cheese. I will remove Goats cheese as a cheese type and created a dairy type category. I could create a texture model.
-
I want to add a subscription service whereby someone can subscribe monthly for a cheese board. The images for the cheeseboards are already in the media folder. I could implement Stripe to take monthly payments. Stripe has code to implement for this purpose. This was a user story from the start: As a user, I want to subscribe to a monthly cheese subscription service so that I can discover new cheeses and have a consistent supply of high-quality cheese without having to reorder manually each time.
-
I want to introduce a loyalty scheme. It was a User Story from the beginning: As a user, I want to participate in a loyalty program that rewards me for my purchases so that I can enjoy discounts, get early access to new products, and access exclusive content. This would reward users and incentivize them to return. I got into further detail in TESTING.md User Story testing section.
-
I would like to spend more time improving the sites design. It could be improved and it is something I will work on after submission. For example, when a user rates an item, the rating could automatically update. At the moment, the pages needs to be refreshed before it updates.
-
Another example is for Editing a comment. Similar to how a paragraph appears on the screen asking to confirm deletion, I would like a form to appear to edit the comment rather than having to edit the comment on an external page.
-
The user profile section could be updated. I want users who have placed an order to leave or a review or testimonial. I considered implementing it before submission but left it aside as what needed to be submitted was a minimum viable product and I considered a testimonial page to be not necessary for the deadline.
Business Model
Cheesy Store's Business Model is Business to Consumer (B2C). Products are sold directly from Cheesy Store to consumers who are the end-users.
A customer of Cheesy Store would be someone who is most likely an adult who is interested in cheese or cheese culture. The blog can potentially attract potential customers who may be interested in it's content. From there products can be marketed and the customer can be redirected to the store.
Web Marketing and Search Engine Optimization
Key Words
I chose a mixture of short-tail and long-tail keywords. I struggled to only pick ten. There are many permutations regarding keywords so I chose a mixture of all sustainable, organic, gourmet and artisan.
I used Google search to check Search results for other online cheese shops keywords. I also utilized WorkTracker and other word tracking services. Some screenshots are below. I learned that Sheridan's have the Irish cheese market cornered and run a monopoly for Irish cheese.
| Cheese | Cheesemonger | Cheese Shop |
|---|---|---|
| Irish Cheese | Irish Cheesemonger | Irish Cheese Shop |
| Sustainable Irish Cheese | Sustainable Irish Cheesemonger | Sustainable Irish Cheese Shop |
| Organic Irish Cheese | Organic Irish Cheesemonger | Organic Irish Cheese Shop |
| Gourmet Irish Cheese | Gourmet Irish Cheesemonger | Gourmet Irish Cheese Shop |
| Artisan Cheese | Artisan Irish Cheesemonger | Artisan Irish Cheese Shop |
| Buy Artisan Cheese | Online Artisan Irish Cheesemonger | Online Artisan Irish Cheese Shop |
| Award-Winning Irish Cheese | ||
| Small-batch Irish cheese | ||
| Rare Irish cheese |
Wordtracker Screenshot
Google Search
Cheesemonger Analytics 1
Cheesemonger Analytics 2
Cheesemonger Analytics 3
Blog Keywords
A blog can attract users to a website with interesting information. The blog on this website will attract people with an interest in cheese. The admins who make the posts can enter in a comma-separated string with keywords for the blog post. The keywords serve as tags which are rendered beneath the blog post. They are also rendered in the meta tag of base.html so these keywords are rendered in the metatag of the relevant blog posts. I created a blogtags.py to separate the string for the tags.
Blog Keyword Field
``` keywords = models.TextField( help_text="Enter specific comma-separated SEO keywords", blank=True) ``` ``` {% block seo_keywords %}{% endblock seo_keywords %} ```
Sitemap and Robots.txt
To enhance search engine optimization (SEO) and ensure search engines can effectively understand and navigate the site's structure, a sitemap file was created. This file, generated using xml-sitemaps.com, includes a list of important page URLs.
Additionally, a robots.txt file was established to guide search engines on which areas of the website they are restricted from accessing. This measure helps improve the site's SEO by focusing search engine crawlers on the most relevant and valuable content, thereby enhancing the quality of the site in search engine rankings.
Social Media Marketing
For this site, a Facebook business page has been created for social media marketing. The Facebook page includes a 'Contact Us' button which takes the user to the Contact Page on Cheesy Store. The Facebook page link is included in the footer so appear extended from base.html to every webpage.
Cheesy Store Facebook Page
Email Marketing
Users and visitors to the website can sign up to the newsletter. They do not need an account to do so. A sign-up box is present on the homepage and the contact page. This allows the business to stay in touch with customers. The newsletter can contain anything from special offers to new arrivals. Mailchimp was used for this purpose.
Technologies Used
Core Development Technologies & Languages
- Django
- JavaScript
- jQuery
- CSS
- HTML
- Django Templating Language
- Bootstrap
- Gunicorn
- psycopg2
- crispy_forms
- django_summernote
- PostgreSQL
- Heroku
- Amazon Web Services
- Wireframe CC
- AmIResponsive
- Heroku
- Stripe
- Chrome DevTools
- Mailchimp
- Font Awesome
- GitHub
- Google Fonts
- W3
- JSHint
- Table to Markdown
- Privacy Policy Generator
- XML Sitemaps
Testing
Full testing: TESTING.md
Deployment - Heroku
To deploy this page to Heroku from its GitHub repository, the following steps were taken:
Create the Heroku App:
- Log in to Heroku or create an account.
- On the main page click the button labelled New in the top right corner and from the drop-down menu select "Create New App".
- Enter a unique and meaningful app name.
- Next, select your region.
- Click on the Create App button.
Attach the Postgres database:
- In the Resources tab, under add-ons, type in Postgres and select the Heroku Postgres option.
- Copy the DATABASE_URL located in Config Vars in the Settings Tab.
- Go back to your IDE and install 2 more requirements:
pip3 install dj_databse_urlpip3 install psycopg2-binary
- Create requirements.txt file by typing
pip3 freeze --local > requirements.txt - Add the DATABASE_URL value and your chosen SECRET_KEY value to the env.py file.
- In settings.py file import dj_database_url, comment out the default configurations within database settings and add the following:
DATABASES = {
'default': dj_database_url.parse(os.environ.get('DATABASE_URL'))
}- Run migrations and create a superuser for the new database.
- Create an if statement in settings.py to run the postgres database when using the app on heroku or sqlite if not
if 'DATABASE_URL' in os.environ:
DATABASES = {
'default': dj_database_url.parse(os.environ.get('DATABASE_URL'))
}
else:
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}-
Create requirements.txt file by typing
pip3 freeze --local > requirements.txt -
Create a file named "Procfile" in the main directory and add the following:
web: gunicorn project-name.wsgi:application -
Add Heroku to the ALLOWED_HOSTS list in settings.py in the format ['app_name.heroku.com', 'localhost']
-
Push these changes to Github.
Update Heroku Config Vars
Add the following Config Vars in Heroku:
| Variable name | Value/where to find value |
|---|---|
| AWS_ACCESS_KEY_ID | AWS CSV file |
| AWS_S3_REGION_NAME | eu-west-1 |
| AWS_SECRET_ACCESS_KEY | AWS CSV file |
| AWS_STORAGE_BUCKET_NAME | cheesystore |
| DATABASE_URL | Postgres generated (as per step above) |
| EMAIL_HOST_PASS | Password from email client |
| EMAIL_HOST_USER | Site's email address |
| PORT | 8000 |
| SECRET_KEY | Random key generated as above |
| STRIPE_PUBLIC_KEY | Stripe Dashboard > Developers tab > API Keys > Publishable key |
| STRIPE_SECRET_KEY | Stripe Dashboard > Developers tab > API Keys > Secret key |
| STRIPE_WH_SECRET | Stripe Dashboard > Developers tab > Webhooks > site endpoint > Signing secret |
| USE_AWS | True (when AWS set up - instructions below) |
Deploy
- NB: Ensure in Django settings, DEBUG is False
- Go to the deploy tab on Heroku and connect to GitHub, then to the required repository.
- Scroll to the bottom of the deploy page and either click Enable Automatic Deploys for automatic deploys or Deploy Branch to deploy manually. Manually deployed branches will need re-deploying each time the repo is updated.
- Click View to view the deployed site.
The site is now live and operational.
AWS Set Up
AWS S3 Bucket
- Create an AWS account.
- From the 'Services' tab on the AWS Management Console, search 'S3' and select it.
- Click 'Create a new bucket', give it a name(match your Heroku app name if possible), and choose the region closest to you.
- Under 'Object Ownership' select 'ACLs enabled' and leave the Object Ownership as Bucket owner preferred.
- Uncheck block all public access and acknowledge that the bucket will be public.
- Click 'Create bucket'.
- Open the created bucket, go to the 'Properties' tab. Scroll to the bottom and under 'Static website hosting' click 'edit' and change the Static website hosting option to 'enabled'. Copy the default values for the index and error documents and click 'save changes'.
- Open the 'Permissions' tab, locate the CORS configuration section and add the following code:
[ { "AllowedHeaders": [ "Authorization" ], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [] } ] - In the 'Bucket Policy' section and select 'Policy Generator'.
- Choose 'S3 Bucket Policy' from the type dropdown.
- In 'Step 2: Add Statements', add the following settings:
- Effect: Allow
- Principal: *
- Actions: GetObject
- ARN: Bucket ARN (copy from S3 Bucket page)
- Click 'Add Statement'.
- Click 'Generate Policy'.
- Copy the policy from the popup that appears
- Paste the generated policy into the Permissions > Bucket Policy area.
- Add '/*' at the end of the 'Resource' key, and save.
- Go to the 'Access Control List' section click edit and enable List for Everyone (public access) and accept the warning box.
IAM
- From the 'Services' menu, search IAM and select it.
- Once on the IAM page, click 'User Groups' from the side bar, then click 'Create group'. Choose a name and click 'Create'.
- Go to 'Policies', click 'Create New Policy'. Go to the 'JSON' tab and click 'Import Managed Policy'.
- Search 'S3' and select 'AmazonS3FullAccess'. Click 'Import'.
- Get the bucket ARN from 'S3 Permissions' as per above.
- Delete the '*' from the 'Resource' key and add the following code into the area:
"Resource": [
"YOUR-ARN-NO-HERE",
"YOUR-ARN-NO-HERE/*"
]- Click 'Next Tags' > 'Next Review' and then provide a name and description and click 'Create Policy'.
- Click'User Groups' and open the created group. Go to the 'Permissions' tab and click 'Add Permissions' and then 'Attach Policies'.
- Search for the policy you created and click 'Add Permissions'.
- You need to create a user to put in the group. Select users from the sidebar and click 'Add user'.
- Give your user a user name, check 'Programmatic Access'.
- Click 'Next' and select the group you created.
- Keep clicking 'Next' until you reach the 'Create user' button and click that.
- Download the CSV file which contains the AWS_SECRET_ACCESS_KEY and your AWS_ACCESS_KEY_ID needed in the Heroku variables as per above list and also in your env.py.
Connecting S3 to Django
- Go back to your IDE and install 2 more requirements:
pip3 install boto3pip3 install django-storages
- Update your requirements.txt file by typing
pip3 freeze --local > requirements.txtand add storages to your installed apps. - Create an if statement in settings.py
if 'USE_AWS' in os.environ:
AWS_STORAGE_BUCKET_NAME = 'insert-your-bucket-name-here'
AWS_S3_REGION_NAME = 'insert-your-region-here'
AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
-
Then add the line
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'to tell django where our static files will be coming from in production.
-
Create a file called custom storages and import both our settings from django.con as well as the s3boto3 storage class from django storages.
-
Create the following classes:
class StaticStorage(S3Boto3Storage):
location = settings.STATICFILES_LOCATION
class MediaStorage(S3Boto3Storage):
location = settings.MEDIAFILES_LOCATION- In settings.py add the following inside the if statement:
STATICFILES_STORAGE = 'custom_storages.StaticStorage'
STATICFILES_LOCATION = 'static'
DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'
MEDIAFILES_LOCATION = 'media'
STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/'
MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'
-
and then add the following at the top of the if statement:
AWS_S3_OBJECT_PARAMETERS = { 'Expires': 'Thu, 31 Dec 2099 20:00:00 GMT', 'CacheControl': 'max-age=94608000', } -
Go to S3, go to your bucket and click 'Create folder'. Name the folder 'media' and click 'Save'.
-
Inside the folder, click 'Upload', 'Add files', and then select all the images that you are using for your site.
-
Then under 'Permissions' select the option 'Grant public-read access' and click upload.
-
Your static files and media files should be automatically linked from django to your S3 bucket.
Forking this repository
- Locate the repository at this link Cheesy Store.
- At the top of the repository, on the right side of the page, select "Fork" from the buttons available.
Cloning this repository
To clone this repository follow the below steps:
- Locate the repository at this link Cheesy Store.
- Under 'Code', see the different cloning options, HTTPS, SSH, and GitHub CLI. Click the preferred cloning option, and then copy the link provided.
- Open Terminal.
- In Terminal, change the current working directory to the desired location of the cloned directory.
- Type 'git clone', and then paste the URL copied from GitHub earlier.
- Type 'Enter' to create the local clone.
Credits
- Bootstrap documentation especially regarding Toasts:Bootstrap Toasts
- This YouTube video regarding Keyword research: How to Do Keyword Research for Free in 2024 & Beyond
- These Stack Overflow questions regarding a five star rating system: How to make simple star rating? 5 star rating system database design Star-rating with css [duplicate]
- Similarly from Code Review: Simple star rating system
- Code Institute Template and Boutique Ado
- W3 Schools especially sections on AJAX: AJAX Introduction
- This Markdown helped: Markdown Cheat Sheet
- Code Spell Checker
- The Code Institute Slack Channel for everything
- Special Thanks to my tutor Antonio