Roll and Resin

By Melody Lisa.

This is the documentation for Roll & Resin - an ecommerce site aimed towards selling tabletop accessories. The site has been built using HTML5, CSS3 with bootstrap templating, Python and Django with a relational database stored with ElephantSQL.

User Experience - UX

Strategy

This project was built as a milestone project on my Diploma in Web Application Development with Code Institute as a learning tool for Full Stack Frameworks with Django. The aim was to create an ecommerce website with login functionality and Stripe implementation for users to pay for goods.

User Stories

New Site Users

As a new site user, I would like to easily navigate to the main categories of products, so that I can see what the site offers.
As a new site user, I would like to see my purchase total, so that I don't overspend.
As a new site user, I would like to view the site's latest news, so that I can understand the company better.
As a new site user, I would like a clear and straightforward checkout process, so that I can finalize my purchase smoothly.
As a new site user, I would like to see social media icons prominently displayed, so that I can follow the company on my preferred platforms for updates.

Returning Site Users

As a returning site user, I would like to receive email confirmation when I register, so that I can verify my account easily.
As a returning site user, I would like a secure login and registration process, so that I can protect my personal information.
As a returning site user, I would like a dashboard where I can view and manage my orders, so that I can track my purchases and manage my account.
As a returning site user, I would like to view the company's latest news, so that I can keep up to date with their products.
As a returning site user, I would like to be able to save products to buy later, without having to add them to my basket.

Site Admin

As a site administrator, I should be able to add new products.
As a site administrator, I should be able to edit existing products.
As a site administrator, I should be able to remove products.
As a site administrator, I should be able to add news articles.
As a site administrator, I should be able to edit existing news articles.
As a site administrator, I should be able to remove news articles.

^{_{Back to top}}

Scope

Taking all of the above into account I decided I would need 14 main pages for the content of the site, outside of the Django allauth account pages. These would be included in templates across 6 Django apps:

Home App:
- Home Page: When users first navigate to the site they are taken to the index.html page, where they can view the navigation at the top of the page, along with a call to action button that sends them to the main products page.
Products App:
- Products: This page lists all the products available on the site. Users can browse, search, and filter products based on various criteria.
- Product Details: This page provides detailed information about a specific product. It includes images, descriptions, prices, and ratings. Users can also add the product to their cart or wishlist from this page.
- Add Product: This page is used by administrators or authorized users to add a new product to the site. It includes fields for the product name, description, price, images, and other relevant details.
- Edit Product: This page allows administrators or authorized users to edit the details of an existing product. It is similar to the add product page but pre-populates the fields with the current product information.
- Wishlist: This page displays a list of products that the user has added to their wishlist. Users can view, remove, or move items to their cart from this page.
Bag App:
- Bag: This page shows the contents of the user's shopping bag. Users can view the products they have added, update quantities, remove items, and see the total price before proceeding to checkout.
Checkout App:
- Checkout: This page is where users enter their shipping and payment information to complete their purchase. It includes fields for address, payment details, and order summary.
- Checkout Success: This page is displayed after a successful checkout process. It thanks the user for their purchase and provides an order summary and confirmation number.
Profiles App:
- Profile: This page allows users to view and edit their personal information, such as name, email, and address. It also displays the user's order history and other account-related details.
News App:
- News: This page lists all news articles or blog posts on the site. Users can browse through the latest news and updates. Admin or authorized users can choose to edit or delete individual news items from here.
- News Item: This page provides detailed information about a specific news article or blog post. It includes the full text, images, publication date, and author information. Admin or authorized users can choose to edit or delete news items from here.
- Add News Item: This page is used by administrators or authorized users to add a new news article or blog post. It includes fields for the title, content, images, and publication date.
- Edit News Item: This page allows administrators or authorized users to edit the details of an existing news article or blog post. It is similar to the add news item page but pre-populates the fields with the current information.

^{_{Back to top}}

Structure

Site Structure

Navbar?	Page	Logged Out	Logged In (non-admin)	Logged In (admin)
✔	Home Page	✔	✔	✔
✔	Products	✔	✔	✔
-	Product Description	✔	✔	✔
-	Add Product	-	-	✔
-	Edit Product	-	-	✔
✔	Wishlist	-	✔	✔
✔	Bag	✔	✔	✔
(In messages)	Checkout	✔	✔	✔
-	Checkout Success	✔	✔	✔
✔	Profile	-	✔	✔
✔	News	✔	✔	✔
-	News Item	✔	✔	✔
-	Add News Item	-	-	✔
-	Edit News Item	-	-	✔

Database Structure

^{_{Back to top}}

Skeleton

Wireframes

Home Page Wireframes

Home Page Wireframe Mobile

Home Page Wireframe Desktop

Products Page Wireframes

Products Page Wireframe Desktop

Products Page Wireframe Tablet

Products Page Wireframe Mobile

Add/Edit Product and News Wireframe

Product Details Wireframe

News Page Wireframes

News Details Wireframe

Bag and Checkout Wireframes

Bag Wireframe

Checkout Wireframe

Checkout Success Wireframe

AllAuth Wireframes

AllAuth Forms Wireframe

AllAuth Info Wireframe

^{_{Back to top}}

User Interface - Design

Surface

For the user interface design of the website, dark mode Bootstrap stylings have been chosen to create an aesthetically pleasing and user-friendly experience that aligns with the thematic elements of the content.

Dark Mode Benefits:
- Visual Comfort: Dark mode reduces eye strain, especially in low-light environments. This makes it easier for users to interact with the site for extended periods.
- Battery Efficiency: For users on mobile devices, dark mode can help conserve battery life, enhancing the overall user experience.
- Modern Aesthetic: Dark mode has gained popularity and is often associated with modern, sleek, and professional designs. This can make the site feel more up-to-date and appealing.
Color Scheme:
- Red and Green: These colors are chosen to align with the official Dungeons and Dragons branding, providing a familiar yet distinct look.
  - Red: This color has been used for call to action buttons.
  - Green: This colour has been used for secondary headings, muted text and hover effects over call to action buttons, turning them green from red to encourage them to go!
- Balancing the Colors: While integrating red and green, care will be taken to avoid overwhelming the user with too many contrasting colors. The primary focus will be on creating a harmonious balance that enhances readability and usability with the main content text being white for maximum readability.
Alignment with Dungeons and Dragons Branding:
- Similar, Not Identical: The design aims to capture the essence of Dungeons and Dragons without directly copying their branding. This ensures a unique identity for the site while still appealing to fans of the game.
- Subtle References: Using colors and design elements inspired by Dungeons and Dragons helps in creating a thematic connection.

By using dark mode Bootstrap stylings with strategically chosen red and green colors, the website will not only look appealing and professional but will also provide a user experience that resonates with the target audience. This approach ensures that the site stands out while maintaining an intuitive and enjoyable interface for users.

Typography

Fonts have been imported from Google Fonts.

Sedan: This is the font across the whole site. The font has been kept simple for readability and so as not to make the page look too busy along with the bold colours and imagery across the site.

Colours

Colors

Color Code	Description	Preview
`#343a40`	Bootstrap's "dark" grey-800 used as the background for all navbars and content boxes.
`rgb(0, 255, 38)`	Green, used for support messages and various accents across the site.
`rgb(253, 83, 26)`	Used for warning messages and various accents across the site.

Both the red and green colours have been adjusted for maximum contrasting and accessibility across the site when used with text, accounting for the dark grey background which could present difficulties with certain forms of colourblindness. White is used for the main text colour across the site to ensure users don't miss important information.

^{_{Back to top}}

Features

Favicon

Navbar

Navbar with Links

Description: This image shows the desktop navigation bar with visible links.

Mobile Navbar Open

Description: This image displays the mobile navigation bar with the menu expanded and menu items visible.

Mobile Navbar Closed

Description: This image shows the mobile navigation bar with the menu collapsed, displaying the menu icon.

Footer

Desktop Footer

Description: This image displays the desktop version of the footer on the website.

Mobile Footer

Description: This image shows the mobile version of the footer on the website.

Home

Products

Responsive Products Display

Description: This image showcases a responsive display of products on the website.

Description: This image shows a back to top button on the product page.

Products by Category

Description: This image displays products organized by category on the website.

Product Search

Description: This image shows the product search functionality on the website.

Sorting Products

Description: This image demonstrates sorting options for products on the website.

Product Details

Wishlist

Wishlist Item Not Added

Wishlist Item Added

Wishlist Toast Notification - Item Added

Wishlist Toast Notification - Item Removed

Wishlist Page

Bag

Bag Toast Notification

Bag Page

Checkout

Checkout Page

Checkout Success Page

Checkout Success Toast Notification

Profile

News

News Page

News Item

Register

Registration Page

Registration Verification Email

Registration Auth Toast

Log In

Password Reset Form

Password Reset Sent Toast

Log Out

Admin

Admin Account Navigation

Admin Products

Admin Product Deleted Toast

Admin Product Details

Admin Product Edit Toast

Admin Product Edit

Admin Product Edit Success Toast

Admin News

Admin News Add

Admin News Added Toast

Admin News Edit Toast

Admin News Edit

Admin News Updated Toast

Defensive Programming

Defensive programming is crucial for ensuring the reliability, security, and robustness of our Django application. Here's how defensive strategies have been implemented across the app:

User Authentication and Authorization

To safeguard sensitive areas and ensure proper user access:

`@login_required` Decorator

The @login_required decorator is used extensively throughout the views to restrict access to authenticated users only. This ensures that unauthorized users cannot access sensitive pages.

Example:

from django.contrib.auth.decorators import login_required

@login_required
def profile(request):
    """ Display the user's profile. """
    profile = get_object_or_404(UserProfile, user=request.user)

Superuser and Staff Checks

Conditional checks within views determine user roles and provide appropriate access:

Example:

@login_required
def edit_news_item(request, news_item_id):
    """ Edit a news item """
    if not request.user.is_superuser:
        messages.error(request, 'Sorry, only store owners can do that.')
        return redirect(reverse('home'))

Superuser Checks in Templates

In addition to backend views, checks have been implemented within the templates to facilitate easy access for superusers to specific pages or features. These template checks ensure that only users with superuser privileges can view and interact with designated elements.

Example:

{% if request.user.is_superuser %}
    <a href="{% url 'add_news_item' %}" class="btn-up text-red">Add Article</a>
{% endif %}

<div class="dropdown-menu border-0 bg-dark shade-invert text-saria-labelledby="user-options">
  {% if request.user.is_authenticated %}
  {% if request.user.is_superuser %}
  <a href="{% url 'add_product' %}" class="dropdown-item hover-underline-animation">Product Management</a>
  <a href="{% url 'news_items' %}" class="dropdown-item hover-underline-animation">News Management</a>
  {% endif %}
  <a href="{% url 'profile' %}" class="dropdown-item hover-underline-animation">My Profile</a>
  <a href="{% url 'view_product_wishlist' %}" class="dropdown-item hover-underline-animation">Wishlist</a>
  <a href="{% url 'account_logout' %}" class="dropdown-item hover-underline-animation">Logout</a>
  {% else %}
  <a href="{% url 'account_signup' %}" class="dropdown-item hover-underline-animation">Register</a>
  <a href="{% url 'account_login' %}" class="dropdown-item hover-underline-animation">Login</a>
  {% endif %}
</div>

^{_{Back to top}}

Future Implementations

Deleting Products and News Items

Currently there is no extra defense in place when deleting products or news items. Future versions of the site will prioritise adding extra steps in the deletion process.

Reviews and Ratings

Enhancing the current review functionality to allow user contributions will foster greater engagement and provide valuable feedback on products or services offered by the application. Key enhancements will include:

User Contributions: Allowing authenticated users to submit reviews and ratings for products or services they have experienced.
Review Moderation: Providing moderation tools to manage and ensure the authenticity and appropriateness of user-contributed reviews.

Improved Navigation Bar Styling

Enhancing the navigation bar styling will improve the overall aesthetics and usability of the application, making it easier for users to navigate and access different sections. Key improvements will include:

Visual Design: Enhancing the visual appeal of the navigation bar with modern styling and clear, intuitive icons or labels.
Responsive Design: Ensuring the navigation bar remains functional and visually appealing across various devices and screen sizes.
Accessibility: Optimizing navigation bar elements for accessibility standards to ensure all users can easily navigate the application.
Dropdown Menus: Implementing hierarchical dropdown menus where necessary to organize and categorize navigation options effectively.

Frontend Admin to Replace Django Admin Panel

Implementing a frontend admin interface offers a more intuitive and customizable alternative to Django's default admin panel, enhancing administrative capabilities and user experience. Key features will include:

Dashboard Overview: Providing administrators with a comprehensive dashboard displaying key metrics and insights.
CRUD Operations: Enabling administrators to perform Create, Read, Update, and Delete operations on application data directly from the frontend.
Customization: Tailoring the frontend admin interface to match the application's branding and workflow requirements.
Security: Implementing robust security measures to safeguard sensitive administrative functions and data.
Integration: Seamlessly integrating with existing backend functionalities while enhancing usability and accessibility for administrators.

These future implementations aim to enhance user engagement, improve usability, and streamline administrative tasks within your Django application.

^{_{Back to top}}

Accessibility

Alt Text

Alt text has been implemented across the site, with template syntax to ensure any image that appears via for loop displays the correct alternative.

Example:

{% if product.image %}
<a href="{% url 'product_detail' product.id %}">
  <img class="card-img-top img-fluid" src="{{ product.image.url }}"
                                    alt="{{ product.name }}">
</a>
{% else %}
<a href="{% url 'product_detail' product.id %}">
  <img class="card-img-top img-fluid" src="{{ MEDIA_URL }}noimage.png"
                                    alt="{{ product.name }}">
</a>
{% endif %}

Aria Labels

Aria labels have been implemented across the site where applicable.

Colours

Contrasting colors are strategically employed throughout the site to enhance readability, complemented by the implementation of text shadows for further clarity.

Fonts

The site maintains a professional and uniform appearance by using a simple font, ensuring maximum readability.

^{_{Back to top}}

Technologies Used

Languages

HTML
CSS
Jquery
Javascript
Python

Frameworks

Django - Used as the primary web framework for backend development.
Bootstrap v4.6 - Implemented for frontend styling and layout.

Libraries

Font Awesome - For the iconography on the website.
Jinja - Templating engine.
Google Fonts - To import the fonts used on the website.

Programs

Flaticon - To create the favicon for the site.
Figma - For wireframes and other graphics in readme.
Git - For version control.
Google Dev Tools - To troubleshoot and test features, solve issues with responsiveness and styling.
Heroku - For website deployment.
ElephantSQL - The database used for storing information for the site.
Pip - To install Python packages.
Red Ketchup - To convert background image to webp format.

Testing and Validation Tools

Samsung Talkback - To test accessibility.
JS Hint - To check the JavaScript code for errors.
UI.dev - To show the site on a range of screen sizes.
W3C Markup Validation Service - To validate HTML and CSS code.
CI Python Linter - To Validate python code.

^{_{Back to top}}

Deployment & Local Development

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).
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-roll-resin (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-roll-resin (policy + the project name)
- Provide a description:
  - "Access to S3 Bucket for tech-treasures static files."
- Click Create Policy.
From User Groups, click your "group-roll-resin".
Click Attach Policy.
Search for the policy you've just created ("policy-roll-resin") and select it, then Attach Policy.
From User Groups, click Add User.
- Suggested Name: user-roll-resin (user + the project name)
For "Select AWS Access Type", select Programmatic Access.
Select the group to add your new user to: group-roll-resin
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

This project uses Stripe to handle the ecommerce payments.

Once you've created a Stripe account and logged-in, follow these series of steps to get your project connected.

From your Stripe dashboard, click to expand the "Get your test API keys".
You'll have two keys here:
- STRIPE_PUBLIC_KEY = Publishable Key (starts with pk)
- STRIPE_SECRET_KEY = Secret Key (starts with sk)

As a backup, in case users prematurely close the purchase-order page during payment, we can include Stripe Webhooks.

From your Stripe dashboard, click Developers, and select Webhooks.
From there, click Add Endpoint.
- https://roll-and-resin-60438760f385.herokuapp.com/checkout/wh/
Click receive all events.
Click Add Endpoint to complete the process.
You'll have a new key here:
- STRIPE_WH_SECRET = Signing Secret (Wehbook) Key (starts with wh)

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.

How to Fork

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:

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

How to Clone

You can clone the repository by following these steps:

Go to the GitHub repository
Locate the Code button above the list of files and click it
Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
Open Git shell or Terminal
Change the current working directory to the one where you want the cloned directory
In your IDE Terminal, type the following command to clone my repository:
- git clone https://github.com/Melody-Lisa/roll-and-resin.git
Press Enter to create your local clone.

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. If you are using gitpod, you can add these variables under the variables section of your user settings.

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

^{_{Back to top}}

Testing

Please see TESTING.md for all testing elements of this site.

^{_{Back to top}}

Credits

On top of the learning materials provided, the following past projects aided in the understanding of the project and documentation as a whole:

Content

All written content has been created by the developer.

Media

Dreamstime - Stock photos used for the background image and news image.
All product images are the property of the developer.

Acknowledgements

Amy Richardson - Cohort Facilitator: For providing great resources to help with everyone's projects through weekly stand ups.
Class of June 2023: Everyone in my class channel on slack who is involved with the stand ups and group chat for contributing to the great atmosphere and supportive environment.
The wider slack community: For quick responses to various issues and questions I had at all stages of the project.
Friends and Family: For helping me to test my site on various devices and provide feedback.

^{_{Back to top}}

Melody-Lisa/roll-resin

Roll and Resin

User Experience - UX

Strategy

User Stories

New Site Users

Returning Site Users

Site Admin

Scope

Structure

Site Structure

Database Structure

Skeleton

Wireframes

Home Page Wireframes

Products Page Wireframes

Product Details Wireframe

News Page Wireframes

Bag and Checkout Wireframes

AllAuth Wireframes

User Interface - Design

Surface

Typography

Colours

Colors

Features

Favicon

Navbar

Footer

Home

Products

Product Details

Wishlist

Bag

Checkout

Profile

News

Register

Log In

Log Out

Admin

Admin Account Navigation

Admin Products

Admin News

Defensive Programming

User Authentication and Authorization

@login_required Decorator

Superuser and Staff Checks

Superuser Checks in Templates

Example:

Future Implementations

Deleting Products and News Items

Reviews and Ratings

Improved Navigation Bar Styling

Frontend Admin to Replace Django Admin Panel

Accessibility

Alt Text

Aria Labels

Colours

Fonts

Technologies Used

Languages

Frameworks

Libraries

Programs

Testing and Validation Tools

Deployment & Local Development

ElephantSQL Database

Amazon AWS

S3 Bucket

IAM

Final AWS Setup

Stripe API

Heroku Deployment

Local Deployment

How to Fork

How to Clone

Testing

Credits

Content

`@login_required` Decorator