Version 1.0
Click me for live Site.
I recommend clicking any links found in this README with Ctrl + Left mouse click for (Windows) and Control + click (Mac).
- Project Overview
- User Experience
- Wireframes
- Database Models
- Project Design
- Project Features
- Code Validation
- Technologies Used
- Manual Testing
- SEO Research and Implementation
- Web Marketing
- Bug report
- Deployment
- Credits
Table of contents generated with markdown-toc
Project Portfolio 5 - Ecommerce for CodeInstitute Full-stack course (5P)
I have created this full-stack application using the Python, Django framework, Heroku PostgreSQL and front-end technologies, HTML, CSS, and Javascript.
In addition to this, I made extensive use of git, Gitpod, and Github functionality.
The goal for this project was to allow users to register and confirm their email address, create a profile that would store user order information, order history, and favourited products as well as be able to log back in and log out again.
Users also can browse filter and sort products by name, price, and category.
As well as allow purchases of products themed around coffee, with different weights that are reflective of pricing, favouriting products to save for later this also includes making reviews for products.
Visitors to the site may also subscribe or unsubscribe to a newsletter provided by MailChimp, and receive a confirmation email with their order, visitors may also use the contact form provided in the contacts section to contact an administrator and get a response within 1-2 working days.
The project's purpose is to enable customers/registered users to make purchases, register an account, and review products while enjoying a smooth user experience and user interface.
This project has been built with the future in mind, post 1.0 release I am eager to implement further features, optimisation, new technologies, modernised design, styling improvements, added responsiveness, and new features!
-
Live chat
- Customer Support
-
Ajax Queries
- Improved page loading
-
Improved Products
- Descriptions
-
Subscription Model
- Cancel anytime
-
Ability to checkout in different Currencies
- Easier checkout
-
Ability to change site language
- Improved access for users with different languages
-
Dark/Light Theme
- For greater UX
-
Expanded user-profile
- Greater customisability
-
FSC Blog
- Comments
- Likes
-
Performance optimisation
- Better Performance
-
Bug Fixes
-
Responsiveness Improvements
-
Extended security systems
-
Expanded SEO
User experience has been designed with a minimalistic, clean, and professional look. A light-colored background and bold dark colors for text as well as sharp images portray the purpose and goal of the e-commerce-site.
Customers can browse the site to find out more about featured products, as well as find out more about the benefits of coffee, User can open Facebook social links in a new tab, and subscribe to a newsletter. Users can reach out to the site owner with the contact page as well as read more about the company on the about us page.
Users can also make payments via the checkout app using a credit/debit card via stripe technology.
Payment testing use information below.
I have created my user stories and epics using an agile approach and would like to continue improving on this aspect in the future with newer and updated previous projects.
I am planning to expand my knowledge of user stories and epics in the future and greatly expand them.
Future user stories are planned for the next sprint review.
-
As a customer, I will experience greater performance on the site.
-
As a site owner I can the same products with different colors in one product.
-
As a customer, I can enter my postcode or zip code and can select my address from a drop-down input.
-
As a customer entering details I can see input validation while I am typing in my details so I can be reminded and correct them.
-
As a site administrator I can further customise the admin panel to enable easier management of the site and products.
All Github issues and project was created according to the MoSCoW to allow to plan and reach a consensus on resource allocation on the project.
How to Create a Kanban Board project and steps taken.
- Open project repository
- Navigate to issues
- Create issue tags
- 'Must have' (Most important features)
- 'Should have' (Should be implemented)
- 'Could have' (Implement if there is time)
- 'Won't have' (Features that have been outside of current scope)
- Create Github Project(Non-BetaVersion)
- Use Kanban board style.
- Create columns consisting of
- 'to do' (Work that needs to be done)
- 'In progress' (Feature in development)
- 'Done' (Feature complete and tested)
- 'Future content' (Content implemented post-release).
- Assign issues to columns as project progresses and development continues, deciding along the journey.
- All of the above have been Completed
- I have chosen Cloudinary over AWS as I am more comfortable with it.
- I increased scope of the project after initial plannig, as I had more time than I expected.
-
My mentor gave me feedback on the design and styling of my project, which I had acted upon, improving padding across different templates as well as improving color usage across the site.
-
I have received feedback from fellow student Joanna Gorska, she gave me feedback about review button colors and some responsiveness improvements.
-
I received feedback from the code review channel on slack also by getting feedback on the contact form not working as expected this has now been reworked and users should expect a reply within 1-2 working days.
-
I was also given feedback about the footer and subscribe not being the same width to improve consistency this has also been resolved successfully.
-
I asked my brother to test the site and he tested the site with an iPhone 13 Pro max as well as his desktop pc (2560x1440) he logged in with provided user details and tested purchasing an item as well without an account, This test passed successfully.
-
My friend tested my contact page form after the bug fix and I can confirm that emails are being sent out to the admin.
class UserProfile(models.Model):
"""
A user profile model for maintaining default
delivery information and order history
"""
user = models.OneToOneField(
User,
on_delete=models.CASCADE
)
default_phone_number = models.CharField(
max_length=20,
null=True,
blank=True
)
default_street_address1 = models.CharField(
max_length=80,
null=True,
blank=True
)
default_street_address2 = models.CharField(
max_length=80,
null=True,
blank=True
)
default_town_or_city = models.CharField(
max_length=40,
null=True,
blank=True
)
default_county = models.CharField(
max_length=80,
null=True,
blank=True
)
default_postcode = models.CharField(
max_length=20,
null=True,
blank=True
)
default_country = CountryField(
blank_label='Country',
null=True,
blank=True
)
def __str__(self):
return self.user.username
@receiver(post_save, sender=User)
def create_or_update_user_profile(sender, instance, created, **kwargs):
"""
Create or update the user profile
"""
if created:
UserProfile.objects.create(user=instance)
# Existing users: just save the profile
instance.userprofile.save()class Contact(models.Model):
email = models.EmailField()
subject = models.CharField(max_length=255)
message = models.TextField()
def __str__(self):
return self.emailclass Order(models.Model):
"""
Model saves instances with user and purchase information.
"""
order_number = models.CharField(
max_length=32,
null=False,
editable=False
)
user_profile = models.ForeignKey(
UserProfile,
on_delete=models.SET_NULL,
null=True,
blank=True,
related_name='orders'
)
full_name = models.CharField(
max_length=50,
null=False,
blank=False
)
email = models.EmailField(
max_length=254,
null=False,
blank=False
)
phone_number = models.CharField(
max_length=20,
null=False,
blank=False
)
country = CountryField(
blank_label='Country *',
null=False,
blank=False
)
postcode = models.CharField(
max_length=20,
null=True,
blank=True
)
town_or_city = models.CharField(
max_length=40,
null=False,
blank=False
)
street_address1 = models.CharField(
max_length=80,
null=False,
blank=False
)
street_address2 = models.CharField(
max_length=80,
null=True,
blank=True
)
county = models.CharField(
max_length=80,
null=True,
blank=True
)
date = models.DateTimeField(
auto_now_add=True
)
delivery_cost = models.DecimalField(
max_digits=6,
decimal_places=2,
null=False,
default=0
)
order_total = models.DecimalField(
max_digits=10,
decimal_places=2,
null=False,
default=0
)
grand_total = models.DecimalField(
max_digits=10,
decimal_places=2,
null=False,
default=0
)
original_cart = models.TextField(
null=False,
blank=False,
default=''
)
stripe_pid = models.CharField(
max_length=254,
null=False,
blank=False,
default=''
)
def _generate_order_number(self):
"""
Function generates a randomised unique
order number using UUID
"""
return uuid.uuid4().hex.upper()
def update_total(self):
"""
Update grand total each time a line item is added,
accounting for delivery costs.
"""
self.order_total = self.lineitems.aggregate(
Sum('lineitem_total'))['lineitem_total__sum'] or 0
if self.order_total < settings.FREE_DELIVERY_THRESHOLD:
sdp = settings.STANDARD_DELIVERY_PERCENTAGE
self.delivery_cost = self.order_total * sdp / 100
else:
self.delivery_cost = 0
self.grand_total = self.order_total + self.delivery_cost
self.save()
def save(self, *args, **kwargs):
"""
Override the original save method to set the order number
if it hasn't been set already.
"""
if not self.order_number:
self.order_number = self._generate_order_number()
super().save(*args, **kwargs)
def __str__(self):
return self.order_number
class OrderLineItem(models.Model):
"""
Model to save each item in an Order instance as a lineitem.
"""
order = models.ForeignKey(
Order,
null=False,
blank=False,
on_delete=models.CASCADE,
related_name='lineitems'
)
product = models.ForeignKey(
Product,
null=False,
blank=False,
on_delete=models.CASCADE
)
product_weight = models.CharField(
max_length=50,
null=True,
blank=True
)
quantity = models.IntegerField(
null=False,
blank=False,
default=0
)
lineitem_total = models.DecimalField(
max_digits=6,
decimal_places=2,
null=False,
blank=False,
editable=False
)
def save(self, *args, **kwargs):
"""
Override the original save method to set the lineitem total
and update the order total.
"""
self.lineitem_total = self.product.price * self.quantity
super().save(*args, **kwargs)
def __str__(self):
return f'SKU {self.product.sku} on order {self.order.order_number}'class Category(models.Model):
"""
The Category model class, with fields for the category name.
"""
class Meta:
"""
Meta class to return plural name of category.
"""
verbose_name_plural = 'Categories'
name = models.CharField(max_length=254)
friendly_name = models.CharField(
max_length=254,
null=True,
blank=True
)
def __str__(self):
"""
Returns the category name as string.
Args:
self (object)
Returns:
The category name field as string
"""
return self.name
def get_friendly_name(self):
"""
Returns the user readable category name as string.
Args:
self (object)
Returns:
The category friendly name string
"""
return self.friendly_name
class Product(models.Model):
"""
The Product model class, used to generate an instance of a product
"""
category = models.ForeignKey('Category', null=True, blank=True,
on_delete=models.SET_NULL)
sku = models.CharField(
max_length=254,
null=True,
blank=True
)
name = models.CharField(
max_length=254
)
description = models.TextField()
coffee_amounts = models.BooleanField(
default=False,
null=True,
blank=True
)
price = models.DecimalField(
max_digits=6,
decimal_places=2
)
image_url = models.URLField(
max_length=2024,
null=True,
blank=True
)
image = models.ImageField(
max_length=2024,
null=True,
blank=True
)
def __str__(self):
"""
Returns the product name
Args:
self (object)
Returns:
The product name field as string
"""
return self.name
def get_rating(self):
total = (sum(int(review['star_rating']) for review
in self.reviews.values()))
if self.reviews.count() > 0:
return total / self.reviews.count()
else:
return 0
class Review(models.Model):
"""
The review model class, with fields for
user and products using a foreign key (unique value)
A prod_description and review_time
"""
user = models.ForeignKey(UserProfile, related_name='reviews',
on_delete=models.CASCADE)
product = models.ForeignKey(Product, related_name='reviews',
on_delete=models.CASCADE)
description = models.TextField(max_length=450, null=False,
blank=False)
star_rating = models.IntegerField(validators=[
MaxValueValidator(5),
MinValueValidator(1)
])
review_time = models.DateTimeField(auto_now_add=True)
class FavouritesList(models.Model):
"""
Class based model for storing users favourited items.
"""
user = models.OneToOneField(
User,
on_delete=models.CASCADE
)
product = models.ManyToManyField(
Product,
blank=True
)-
The database models above populate the database and perform their functions as expected.
-
User - Django built-in User model with basic information.
-
Category - Products are grouped into categories.
-
Product - Product model for displaying models.
-
Contact - Contact model displays contact form and sends mail.
-
Review - Review model to enable users to make reviews and rate products.
-
Order - When a user makes a successful purchase, an instance of the Order model is created, which stores delivery and user information.
-
OrderLineItem - a model that holds product information for a particular product and connects the product model and the order model.
-
UserProfile - Model storing user's personal and order information.
-
FavouritesList - A Model that handles creating a list of products that a user has saved, which appears on the users profile page as a list.
-
My Schema of models used in this application made with lucidchart it was created at project conception and I have added after contact, reviews, rating, and favourites models.
- Heading Fonts:
- I have used Lato for my heading fonts as I like the style of this font and I feel like it compliments my project design.
- Body Text Fonts:
- I have used Montserrat as this font style goes with Lato and I feel like they work well together for the purpose of this website.
- Font size:
- has been kept to mostly default with css and otherwise handled by bootstrap 5.
-
The idea for the site is minimalistic and clean
-
Color: #000000
- I have chosen this color for my headings to keep them minimalistic and visible.
- This color is also used for the button-custom background.
- as well as a profile background form
- I am using #000000 for hovers on the main navbar to create an animation and indicate to users what they are hovering over
-
Color: #ffffff
- This color is used for the site background as well as white text on button-custom
- Delivery message at the top of the screen
-
Color: #e9ecef
- This color is used by the mail chimp signup form to make it stand out.
- as well as the footer links.
-
Color: #68bb7d
- This color is used for the footer a: hover links and list hover
-
Color: #00008B
- This color is used when the cart has products inside.
-
Color: #212934
- This color is used to create the hover effect for the footer icons
-
Color: #dc3545 Is used for custom checkboxes in product form.
- Easy to navigate with the main navbar with clear colours, function and design made with Bootstrap5.
- Carousel is used on the home page with 3 automatically scrolling images on the right with educational and inspirational text on the left.
- The featured products section shows two coffees that are featured as well as a coding mug to entice coders to purchase a product as well as help bring attention to potentially good products.
- Mailchimp newsletter allows users to subscribe on unsubscribe and receive an email within 2-3 days.
- The footer includes links to products as well as links to the sites other pages in addition it contains contact details.
- Products view image is an admins version of products view, non-super-users will not have the ability to edit or delete products, this area shows product name, price, category, image (placeholder if none), and allows users to click on the image to be taken to the product details page.
- The product details page shows an enlarged product image for improved viewing, product name, price, how good the ratings are, a product description, product weight drop down, product quantity selectors as well as a go back button and add to cart button.
- Add product page contains form fields for adding products.
- Edit product page contains form fields for editing products.
- Add review page contains content and a star rating to rate and review product.
- The user review section shows a user review with a rating and content as well as username.
- The shopping cart page shows products added to the cart as well as details about the products and also allows the user to change product quantity as well as see the unit price, subtotal, and grand total as well as go to the checkout button.
- Order summary page shows products that are in the cart and the total price, as well as form fields to checkout using stripe with a country fields drop-down box and secure checkout button.
- This page shows an invoice after a successful purchase displaying order information and order number with a button to check out other products.
- The profiles page shows favourites, order history, and personal details.
- Fat stack coffee company ethos with a thumbnail image.
- Fat stack coffee company services are animated with font awesome animations.
- Google map embedded with a location using HTML.
- Fat stack coffee company Contact form allows users to contact an administrator.
- Contact details display when the shop is open and address.
- Allows user to sign in or reset password.
- Allows user to sign out and asks to confirm.
- Allows users to register an account.
- I used HTML Beautify to help improve the layout of HTML jinja templates and format code for better viewing.
- HTML Validation using nu-html - all passed!
- Only error encountered was an issue with mailchimp in the footer if followed instructions breaking mailchimp (Mailchimp code).
-
Project Level base.html - all passed!
-
fsc_users user_profile.css - all passed!
-
fsc_checkout checkout.css - all passed!
-
fsc_contact contact.css - all passed!
-
Product detail and Products template - all passed!
-
fsc_users stripe_elements - all passed!
-
fsc_checkout country_fields - all passed!
-
Project level - all passed!
-
fsc_cart - all passed!
-
fsc_checkout - all passed!
-
fsc_contact - all passed!
-
fsc_product - all passed!
-
fsc_users - all passed!
-
Coding Languages
-
HTML5. - Site structure.
-
CSS3. - Site Design.
-
Python3.2. - Used with Django.
-
Javascript - Used mainly for front-end tweaking of numbers especially quantity and pricing.
-
-
Libraries, Frameworks & Tools
-
Django - Framework used to build the site and admin page.
-
HerokuSQL - Database used in the project.
-
Python OS. - Used for
os.environto help with automated developmentDEBUG -
Markdown. - Used for creating README.md document.
-
Bootstrap 5. - Used for styling the site a framework addition to CSS3.
-
Stripe - Handling Payments
-
jQuery - Minimising Code
-
Font Awesome- Used for icons and their animations
-
Django Allauth - Used to handle user authentication
-
Sending Mail - Used in conjunction with gmail for sending mail from contact to user
-
Gmail - Used to acquire app password
-
-
Hosting Technologies
-
Heroku. - Deployment and hosting environment.
-
Cloudinary. - Storing images and static files.
-
Github. - Hosting Repository code.
-
-
Testing Technologies
-
Nu Html Checker. - Validate HTML.
-
W3C CSS3. - Validate CSS.
-
DiffChecker. - Comparing code changes.
-
Pylint. - Analysing python code.
-
Beautify - Improving layout of html templates.
-
- Testing Signup I have tested local and production with success on both ends
- User has to enter email to register as well as verify it.
- Cannot enter password similar to username/email.
- The user now has to verify the email which works as expected.
- Example of email confirmation from the console .
- Working email confirmation from production on Temp-Mail
- Prompt to confirm email address.
- Success message after verifying email.
- Sign in window with user entering their details
- Success message upon signing in with correct details.
- Signing out prompt.
- Signed out and recieved a success message.
- Checkout Summary showing Users personal details(test-details) and order summary.
- Checkout success with loading overlay and a message success after completion.
- Thank you for ordering page after successfully checking out with order.
- Newsletter, thank you for subscribing and an email after 2-3 days from MailChimp(Due to free account)
- Admin panel after using Jazzmin with bootstrap styling.
- Adding product in the admin panel.
- Logging in the admin panel.
- Admin sign-out message.
- Testing Product weight changing unit price in the shopping cart.
- Adding product in production.
- Product successfully added in production.
- Editing product in production.
- Product has been edited.
- Deleting product in production with modal to confirm this action as it is irreversible.
- Deleting product modal to confirm deleting product.
- Image of reviews before adding a review.
- Adding Review as a user.
- Review added and showing up correctly with rating.
- Page pagination functions as intended.
- Contact form inputting details into fields.
- A confirmation email of contact being established successfully.
- Automated tests have not been created due to time constraints during the development of this project.
Code Institute, Lesson Excercise
-
Who are your users?
-
Coders.
-
Developers.
-
Coffee Drinkers.
-
Nerds.
-
-
Which online platforms would you find lots of your users?
-
Twitter.
-
Reddit.
-
Slack.
-
Instagram.
-
Facebook.
-
Forums.
-
-
Would your users use social media? If yes, which platforms do you think you would find them on?
-
Twitter.
-
Reddit.
-
Slack.
-
Instagram.
-
Facebook.
-
Forums.
-
-
Would your business run sales or offer discounts? How do you think your users would most like to hear about these offers?
- Run sales during months with high engagements to keep increasing customer base. Email marketing/newsletter. Pop up ads.
-
What are the goals of your business? Which marketing strategies would offer the best ways to meet those goals?
-
Goal of the business is to make buying high-quality coffee easier for busy developers.
-
Ease of use across the site.
-
Increasing customer value.
-
Boosting brand engagement.
-
Acquire new customers.
-
Increasing brand awareness.
-
-
Would your business have a budget to spend on advertising? Or would it need to work with free or low-cost options to market itself?
- At the beginning, the business would need to focus on free advertisement And market itself Once the business picks up the budget could increase according to the business revenue.
-
What do your users need?
- My users need a product “coffee” for their daily work because they are coders who typically spend a long time in front of a computer screen and it may help them with a high-quality coffee.
-
What information and features can you provide to meet those needs?
- Add to cart button, product description, the volume of product, pricing, and product search.
-
How can you make the information easy to understand?
- Clear font and font colors as well as an accessible color scheme across the site.
-
How can you demonstrate expertise, authoritativeness, and trustworthiness in your content?
-
Keep content up to date
-
Wikipedia page
-
User reviews
-
Hire experts
-
Trusted sources
-
Contact details
-
-
Would there be other pages within your site you could link to from your chosen page?
-
Index page
-
Footer all/pages
-
About us page
-
Contact page
-
Accounts page
-
-
Are there opportunities to link back to external websites that already rank highly on Google?
-
Facebook
-
Github
-
Linkedin
-
Wikipedia
-
-
How can you help users discover other relevant parts of your web application?
- Clear navigation on the site with the use of a navigation bar and social links that open in another tab
I have used a newsletter from MailChimp where users will get a welcome email within a few days as I am on the free plan this may be quicker or slower depending on service. Users can subscribe or unsubscribe whenever they wish.
Fat stack coffee is on has a Facebook business page for marketing and research purposes as well as to post and advertise, create engaging content and attract visitors and customers.
-
MultidictKeyerror.
- Cause = more than 1 superuser with same email.
- Fix = Ensure only 1 user with same email
-
NoReverseMatch.
- Cause = Incorrect url
- Fix = Repair url link and urls.py path
-
Unsubscribe button mailchimp
- Cause = Unknown/Error with MC source code
- Fix = Remove element
-
Sorting via star rating
- Cause = Unknown/Views
- Fix = Disable sorting via ratings
-
Cloudinary Media/Static images with relative paths
- Cause = Cloudinary Bug
- Fix = Use cloudinary links for images in production.
- Fix = None
-
Circular import error fsc_reviews/fsc_products
- Cause = Circular import
- Fix = Move fsc_reviews model and views to fsc_products app.
-
Imagefield not working
- Cause = Max_length too low
- Fix = Increase Max_length, migrate.
-
Weight not changing price of products
- Cause = Not enough login
- Fix add javascript to product_details page
- None reported as of 1.0 release
I have set debug to be automatic using the following.
-
settings .py
SECURITY WARNING: don't run with debug turned on in production! DEBUG = "DEVELOPMENT" in os.environ -
env.py
os.environ["DEVELOPMENT"] = "True" -
urls.py
from django.conf import settings from django.conf.urls.static import static urlpatterns = [ path(...... ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
-
Create an Account with Github
-
Login To Github account.
-
Access my repository using the above link.
-
In the File menu, click Clone Repository.
- Search for repo
- Or
-
In the repository page select code next to Gitpod.
-
Button, make sure HTTPS is selected.
-
Click on the copy button on the right (Two overlapping squares)
-
Open a new workspace in Gitpod.
-
Once the workspace loads in the terminal type.
git clone https://github.com/Matex600/Fat-Stack-Coffee
-
To Fork and continue working on the project without affecting the main branch follow the steps outlined below.
-
Navigate to Github repositories and select this repository.
-
Navigate to the top right of the web page and click on Fork.
-
After this has been done a fork will be created for you to use!
-
-
Development Environment
-
Create Github Account
- Login
- Create project using Code Institutes Project template.
- Open workspace using gitpod button, Only do this once.
- Install required dependencies.
asgiref==3.5.0 cloudinary==1.29.0 crispy-bootstrap5==0.6 dj-database-url==0.5.0 dj3-cloudinary-storage==0.0.6 Django==3.2 django-allauth==0.41.0 django-countries==7.2.1 django-crispy-forms==1.14.0 django-jazzmin==2.5.0 gunicorn==20.1.0 oauthlib==3.2.0 Pillow==9.1.0 psycopg2-binary==2.9.3 python3-openid==3.2.0 pytz==2022.1 requests-oauthlib==1.3.1 sqlparse==0.4.2 stripe==3.0.0
- In gitpod terminal use code
pip3 freeze > requirements.txt
-
This will create a requirements file used by Heroku
-
Create Procfile containing application name and ensure proper formatting or else deployment will fail..
web: gunicorn app_name_goes_here.wsgi:application -
Create env.py it needs to contain these 9 variables.
-
Cloudinary can be obtained here URL
-
A secret key is a password of your choosing make it a strong one KEY
-
Obtain Heroku postgreSQL HERE
-
Obtain Stripe Keys Here
- Stripe public and secret key found under Developers tab
- Stripe Wh Secret found when creating Webhook
-
EMAIL_HOST_USER = Gmail, Email address
-
EMAIL_HOST_Pass = Gmail, App Password
- Create App password
import os os.environ['DATABASE_URL'] = 'postgres:// '...' os.environ['SECRET_KEY'] = '...' os.environ["DEVELOPMENT"] = "True" os.environ['CLOUDINARY_URL'] = '...' os.environ["STRIPE_PUBLIC_KEY"] = "..." os.environ["STRIPE_SECRET_KEY"] = "..." os.environ["STRIPE_WH_SECRET"] = "..." os.environ["EMAIL_HOST_PASS"] = "..." os.environ["EMAIL_HOST_USER"] = "..."- Add these in to Heroku Variables as well
-
Create Procfile containing the application name to ensure proper formatting or deployment will fail.
-
Commit and push changes to Github.
-
Move to the Heroku part of the deployment.
-
Create an account with Heroku.
-
Create a new app
- Choose region
- Choose the appropriate app name
- Add app name to Procfile
-
In Resources add Heroku Postgres hobby plan.
-
Within your newly created app go to settings go to Config Vars use the DATABASE_URL Value and add it to your env.py file and connect it via settings.py.
import dj_database_url if os.path.isfile('env.py'): """ Conditional import to prevent application error if it cannot find env """ import envif '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 a SECRET_KEY Key and the Value as the desired key.
- Add to env.py
-
Next go to the Deploy tab next to Deployment Method click GitHub connect your account and repository.
- You may choose manual deployment Here Using Heroku Cli
-
I Recommended enabling automatic deploys as it makes the process much easier and you update Github and Heroku at the same time.
-
At the bottom of the page click deploy branch making sure it is set to main / master
This project uses Python and has to be deployed with a hosting platform such as Heroku as it handles backend functionality.
-
All of these images below have been acquired for non-commercial use and education and teaching purposes only I do not intend to profit from said images.
- Site Bear Logo I purchased this logo from Creative Fabrica and have a license to use it.
-
Placeholder Produt Image (No Image for Product) this Image was procured from Nayemdevs.com
-
De'Longhi KG210 Electric Coffee Grinder, Stainless Steel, Black
Procured from
-
Ecommerce Inspiration - This Video by Dennis Ivy gave me inspiration on how to create this application.
-
Intro To Python Programming: Beginners - Helping me improve further knowledge by reading this book by John Elder
-
Django Documentation. - Reading up to improve my knowledge further and understand why and how things are done
-
Send_mail-Django - Documentation
-
Pagination-Django - Documentation
-
Deploying static files - Documentation
-
-
Code-Institute - For preparing me for this project with their template and lessons.
-
Boutique Ado Walkthrough Project
- helping me understand e-commerce using stripe
-
Code-Institute Slack channel
- Code Review
-
Code-Institute Tutor support
-
Code-Institute Mentor support
- Thank you to my mentor Maranatha Ilesanmi, for guiding me through this course and helping me overcome anxiety about my projects as well as helping me resolve issues I have come across with my code and projects as well as teaching me!
-
-
Stack Overflow - Has helped me countlessly on fixing issues and incompatibilites with my project such as pip errors and send_mail not functioning properly and many more!
-
Microsoft Excel - Creating tables for my documentation
-
Microsoft Paint - Editing pictures
-
Balsamiq - Helping me create wireframes for this project.
-
Favicon - For converting my logo into a favicon.
-
Font-Awesome - For icons in my website.
-
Intl.NumberFormat() - Helping me better format product price after weight change.
-
Markdown best practices - Guiding on syntax for writing README document
-
Bootstrap5 - Styling classes and site layout
-
Site layout Inspiration - I took inspiration on templating and creating styles for my site.
-
Mailchimp - Mailchimp Subscribe form
-
Lucid-Chart - Database Schema
-
AmiResponsive - Hero Image README.md