This website aims to be a 100% E commerce Platform, where shoppers can buy a wide variety of Argentine products in Ireland, whose main purpose is to make users feel of that nationality at home, offering quality products and providing a great service through a friendly user interface.
This project is part of my Code Institute Full Stack Software Development studies, and at the same time is my last project of this, so I decided to make a website 100% E commerce with Argentine products, using all the knowledge acquired throughout this course, hoping to bring this great idea to reality in the future.
Click here to view the project live
1. To Provide a 100% E Commerce Platform with a wide variety of Argentine products in Ireland.
2. To make the website interactive and easy to navigate for prospective shoppers.
3. To make the website simple to use for potential shoppers, allowing easy checkout, in which the shopper will be able to create their shopping list, review it, edit it or remove items. At the same time allow customers to shop with or without a user account.
4. To make a platform that allows potential customers to create a user account, where they can save their data for future purchases, facilitating the purchase time.
5. To make a website that has a good payment system, secure and bug free.
6. To create a design that would be fully responsive on all devices and screen sizes.
1. Who is Argentinean or South American and likes to consume the products offered by the website.
2. Who lives in the Republic of Ireland.
3. Who likes to shop online.
1. Who is not Argentinean or South American, but would like to try the products offered on the web site.
1. This is a great platform to buy Argentine products, because it shows the items in an orderly way and this one is simple to use.
2. This platform allows customers to create their shopping lists, review the items within it, edit or delete them as appropriate, in an intuitive and user-friendly way.
3. This platform allows customers to create a user account in a simple way, allowing them to save their shopping lists and personal data, resulting in less time spent making a purchase.
4. The website contains a wide variety of products, as well as a secure payment system.
5. The website has a beautiful design, very intuitive and easily adapts to any mobile device and screen size.
- View the website from any device (mobile phone, tablet or desktop)
- View a list of products and select one to buy.
- View an individual product details, being able to see its price, description and product image.
- Select the quantity of a product.
- View the total of my purchases at any time.
- Sort the list of available products by price.
- Sort the list of available products by category.
- Search for a product by name or description.
- Be able to update or delete an item from the shopping cart.
- Receive an email confirmation after my purchase.
- Create my own account.
- Be able to log in and log out.
- Receive an email confirmation after registering.
- Be able to recover my password in case I forget it.
- Have my own profile.
- Be able to read a blog post or comment on it.
- Be able to leave a review about the service offered.
- View information about the platform (About us and shipping)
- Be able to send a message from the Contact page.
- View information about website policies (Privacy Policy, Refund Policy and Terms of service)
- Add a new product.
- Edit/update a product.
- Delete a product.
- Add a blog post.
- Edit/update a blog post.
- Delete a blog post.
- Moderate comments on the blog posts or on the review page.
Use agile design to lay the foundations of an E commerce website that is attractive to users who want to buy a product. The strategy is to allow users to find the products in a fast and attractive way for the customer by searching by category, price, name, etc.
Offer a variety of Argentinean products, which are not easy to find within the Republic of Ireland, but which are required or desired by users of that nationality.
The strategy is to create an easy and intuitive to use online store, in which users can browse and find a variety of Argentinean products without problems or effort. In addition, the user is offered the possibility to create a profile within the website, which allows to save his/her personal data, facilitating the purchase through the E commerce website. It also allows to save the orders placed historically. In addition, the online store has a secure payment system.
In order to make the online store more interesting, we have also implemented a page with blog posts, with really interesting topics about the Argentinean culture.
In addition, to enhance the quality of the service offered, a review page has been implemented, where users can evaluate the service offered.
The scope will be to attract users by offering them simplicity and a quick search of the products offered in the online store with a fast and reliable payment, it will also allow them to create a profile in which they can save their personal data, orders made historically, while allowing them to access extra features of the website such as commenting on blog posts or leave a review evaluating the service offered.
The business user will be able to add his/her products quickly and easily, edit them or delete them when necessary. In addition the business user will be able to add blog posts, edit them or delete them as many times as required. He/she will also be able to moderate comments from blog posts or reviews written by the users of the E commerce website.
The site is structured to assist the user in the search for the desired product. Your Argentine Shop is an E commerce website set with the theme of the Argentine people, for it takes colors of the flag of this country as well as the most emblematic products and loved by all Argentine people. It also has a blog page, which provides interesting information about the argentine culture, arousing interest to learn more about it by users who don't necessarily belong to this country.
The website has a navigation bar with different links, it also has a logo of the website, a search bar on it, 2 icons, one for the users account and another for the shopping cart, and a footer that has some information and website copyright, these are the basic structures of the platform. The website has a home page, whose purpose is to welcome users, and every time the website is reloaded, it changes the products it displays. The online store is created to generate the desire to buy any product offered to the user, for this the importance of showing many images and play with nostalgia in users, since many consumers have been away from Argentina for a long period of time and wish to consume the products offered on the website.
The link options and drop down buttons guide the user intuitively from the home page to the product purchase stored in the database. Products stored in the database will drive all searches in the search bar. In addition the user will be able to sort his search by category, price, names, etc. In addition to product links, the navbar also contains information about the website (About Us, Shipping), a Contact page, blog and reviews.
The architecture of this website is user friendly and intuitive at the moment the client decides to make the purchase, selects a product, adjusts the shopping cart until the user reaches the checkout and makes the purchase. The information architecture is designed to allow rapid completion of all user objectives.
The images are stored in the AWS S3 bucket, providing a wide variety of images for the online store, and users can also add profile images, creating more identity when commenting on blog posts or leaving a review about the service provided.
In order to design the website we used elements related to the argentine culture as a reference, such as products, patriotic symbols or colors that make allusion to this country.
During the development process we tried to make the logo design as representative and faithful to the argentine culture as possible. For this purpose, an arduous research was done resulting in the creation of the current logo.
The bootstrap button and text colors were respected, signifying success, alert, warning, secondary and muted. Other colors were also incorporated, looking to make the online store more diverse.
The forms were kept very simple (crispy forms were used), in some cases only with placeholders. The focus was on the information provided and required.
A modern and easy to read font was chosen, creating a user-friendly interface that was pleasing to the eye.
The most popular and loved products by Argentineans were chosen, and the most representative images were selected to create a great experience when making a purchase.
Color Scheme
Palette for Header
| First Header | Second Header | Navbar | Text 1 | Text 2 | Links | Icons |
|---|---|---|---|---|---|---|
| #317ECE | #FAFAFA | #001C40 | #FAFAFA | #000000 | #FFC107 | #FFC107 |
Palette for Information Boxes
| Box 1 | Box 2 | Text 1 | Text 2 |
|---|---|---|---|
| #CAE1EC | #ECECEC | #183153 | #000000 |
Palette for Footer
| Color 1 | Color 2 | Text 1 | Text 2 | Links | Icons |
|---|---|---|---|---|---|
| #183153 | #001C40 | #FFFFFF | #FAFAFA | #FFC107 | #FFC107 |
Typography
2 Google fonts were used across of this website:
- Roboto
- Oswald
Logotype
To make the wireframes for this project, I used Pencil software version 3.1.0. They were made as part of the design process and were saved as a pdf document and stored in separate folder; wireframes. All pages are shown how the project would look like on different screen sizes (desktop, tablets and mobiles).
- Home Page
- Products
- Product Detail
- Empty Shopping Cart
- Shopping Cart
- Checkout
- Checkout / User logged
- Order Confirmation
- Sign Up
- Sign In
- Reset Password
- Profile
- Super User Profile
- Product Management
- Blog Management
- Blog
- Blogpost Detail
- Blogpost Detail / User Logged
- Reviews
- Add a Review
- Contact Page
- About Us Page
- Shipping
- Privacy Policy
- Refund Policy
- Terms of Service
The E commerce website has a variety of features designed to create a great shopping experience for the user.This project complies with all the features required in order to complete the latest milestone project, while I have added some extra features in order to create a better experience when shopping or visiting this website.
The header has a bar at the top of the website, which contains some online store data, such as phone number, email, and 4 icons with some social networks.
Inside the navigation bar, the first part of the navigation bar contains on the left side the website logo, in the central sector there is a search bar and on the right side there are 2 icons, one for the user profiles (which is drop down), which shows the "Register" and "Login" information, when the user is not logged in and the second icon is a shopping cart, which shows the amount of items added to it.
The second part of the navigation bar contains the following navigation links:
- Home
- Info
- About Us
- Contact
- Shipping
- Shop
- Dulce de Leche
- Yerba Mate
- Alfajores
- Cookies
- Candies
- Empanadas
- Accessories
- Misc
- Combos
- All Products
- By Price
- By Category
- All Products
- Blog
- Reviews
In addition, when the website is viewed from mobile devices or tablets, the navbar is fully responsive, adapting all elements to the new screen size. The website logo appears in the middle and the information bar is above it. The search bar is compressed into a magnifying glass icon, which when pressed by a user will show the entire search bar. The user profile and shopping cart icons will appear next to the search bar icon. Navigation links will appear in a toggle button on the left side of the navigation bar.
The footer is composed of 2 parts of different blue shades. The first part consists of 3 components which are:
- Information
- Privacy Policy
- Refund Policy
- Terms of Service
- About Us: Contains a brief description of the website.
- Contact Us: Provides information such as address, phone number and email address of the website.
Also, when the footer is viewed from mobile devices or tablets, it is responsive, and the same components can be viewed with accordion folding buttons.
The second part consists of 2 components, the left part contains the website copyright and the right part contains 4 icons with some social networks which are: YouTube, Facebook, Instagram and Twitter.
It is responsible for welcoming future users. It is divided into 4 sections:
-
Carrousel Images: It is located at top of the page, this has 5 images, which invite customers to buy products from the online store and are changing from time to time.
-
Featured Products: This section displays 8 random products (except for the combos category products), and these products change every time the website is reloaded.
-
Combos: This section shows 4 random products that only belong to the combos category. These products change every time the website is reloaded.
-
An info bar: This section contains 3 elements whose purpose is to provide some information to the user, and also aims to motivate customers to continue browsing through the online store.
- About Us: This page shows information about the online store, such as company goals and business vision.
- Contact: The contact page is designed to create direct communication between customers and the company, for this the user must fill out a contact form with his/her data such as name and email, also he/she must write the subject and the message he/she wants to write. If the user is logged in, the name and email text fields are automatically filled with the data provided at the time of registering with the online store. Once the message is sent, it will be received by the company's email, and the web site staff must answer the messages within 48hrs.
- Shipping: This page is responsible to provide information about the shipping system that has the online store. Here you will find information such as how long it takes to process the shipments, how the shipping price is calculated, how much the user has to spend to get free delivery, among other useful information.
On the Blog page you will find a variety of blogposts related to interesting topics about Argentine culture. Each blogpost has an image, date of publication and a brief description truncated in 195 characters, and in oder to read this blogpost, the user will have to press the button that says "Read more".
Once inside the selected blogpost, the user will find a title, date of publication, an image, and the content itself. In the final part of the blogpost appears the name of the user who wrote it, and 2 buttons that will take you back to the blog page or home page.
Each blogpost has a comments section, where only users who have an account created, can leave a comment on it.
On the Reviews page you will find the rating that users have made about the quality of service offered by the online store. The ratings range from 1 to 5 stars. Each review shows the user's profile picture, full name, date of publication, number of stars given, and finally, the comment written by the user.
In order to leave a review, the user must have created an account with the website, otherwise, when clicking on the "write my review" button, the user will be redirected to the login page.
To write a review, the user must fill out a form, which will ask the full name and email (which are autocompleted with the data provided at the time of registering on the website), comment and finally rate with stars.
Once the comment is written, it must wait to be moderated by the online store staff.
The website has more than 80 products, which are sorted by category, price and name. Each product appears with an image, its category (9 categories), its name and price. The product of interest can be accessed by clicking on its image.
The categories are as follows:
- Accessories
- Alfajores
- Candies
- Combos
- Cookies
- Dulce de Leche
- Empanadas
- Misc
- Yerba Mate
When the user types a keyword in the search bar, it will search through all the products on the website, trying to match that word with a product, otherwise, a message will appear that will let the user know that there is nothing related to the search done.
Inside each selected product you will find an image of it, the product name, its price, its category, a brief description of it, an input field to select the desired quantity, and 2 buttons, one to return and continue shopping and the other is to add the product into the shopping cart.
The shopping cart page displays all the items selected by the user. In this instance the user is responsible for adjusting the shopping cart to his/her needs, for example the customer can update the quantity of a selected product by pressing the "update" button, or delete products from the shopping cart by pressing the "remove" button.
In addition the shopping cart displays information about the shopping order such as information about the selected items, weight, subtotal, delivery costs and total price. It also has 2 buttons, one for "continue shopping" and the other for "proceed to checkout". At the bottom of the shopping cart page is an information bar, which consists of motivating the customer to continue shopping.
If there are no items in the shopping cart, an image of an empty shopping cart will appear with a message warning that there are no items selected, and at the bottom there will appear a button whose purpose is to motivate the user to continue shopping.
On the Checkout page, the user must fill out a form with essential information to be able to make the purchase and these are:
-
Your Details
- Full Name
- Email Address
-
Shipping Information
- Phone Number
- Street Address 1
- Street Address 2
- Town or city
- County
- Postal Code
- Select Country
-
Payment
In the form will appear a checkbox that will allow to save this information in the user's profile in case he/she is logged in. Also if the user is logged in, in the text fields of full name and email will be filled with information provided at the time of registering with the website.
At the end of the form 2 buttons will appear. The first one is to adjust the shopping cart and the second one to finalize the purchase.
Also the customer will be able to see a small summary of the products he/she is going to buy.
Once the purchase has been successful, the user will be taken to a page where the order confirmation will be displayed. Besides that, the user will receive a message in his/her email confirming that the purchase has been successfully completed.
The user has the possibility to register for free and create his/her own account. To do so, this project makes use of the Django-Allauth library for account authentication. To do this the user must fill out a form containing the following data:
- Email Address
- Email Address Confirmation
- Username
- First Name
- Last Name
- Password
- Password (again)
Once the account is registered, the user will receive a confirmation email so he/she can start using the profile account created.
Once the user has created an account, he/she has the possibility to log in as many times as needed by entering his/her email address or user name and adding his/her password.
If the user for some reason has forgotten his/her password, the website gives him/her the possibility to reset his/her password. To do so, the user must fill in a small form with his/her email address and click on the button that confirms that he/she wants to reset the password. When he/she does this, he/she will receive a message in his/her e-mail, with a link that will allow him/her to reset his/her password.
Inside the user's profile page you will find the following features:
-
A cover image, with a card on top that welcomes the user with his/her username, you will also find an avatar image there.
-
About me box, in which the user has the possibility to write a little about him/herself.
-
A form with text fields prefilled by the user and containing information about deliveries.
-
A section of historical orders placed by the user, which can be reviewed as many times as needed by the customer.
The user can update his/her profile as many times as he/she wants, for this purpose there is a button that says "Edit my profile", which when pressed, will show a modal window with the data that he/she wants to modify. The data that can be modified are the following:
- Select an image
- Edit Bio
- Edit delivery information
Users who have a profile account created, have access to extra features offered by the website, and these are the following:
- Comment within a blogpost (once the comment is made, the user must wait for his comment to be moderated by the website staff).
- Leave a review about the service offered by the online store (the user must also wait for the review to be moderated).
- Each time the customer makes a purchase, the checkout form will be autocompleted.
This profile contains the same as the common user profiles, but with the difference that this user can manage the website products or manage blogpost.
When this user logs in, the following links will appear in the profile icon:
- Product Management
- Blog Management
- My Profile
- Logout
The product management consists of the following:
-
Inside Product management you will find a form to complete in order to add new products. The form contains the following fields:
- Category
- Product Code
- Product Name
- Description
- Price
- Weight
- Weight Unit
- Select Image
-
Inside the product page, below each product you will find 2 links, one is "edit" and the other is "delete'. The edit link will take you to a form similar to the one for adding products, but if you select the delete link, an alert message will appear asking if you want to delete the selected product.
-
When viewing a product in detail, 2 extra buttons will appear under the product description. The first button is to edit the product, and the second is to delete the product. When you press the delete button, a message will appear in a modal window asking if you want to delete the selected product.
The blog management consists of the following:
-
Inside Blog Management you will find a form to add new blogposts. The form contains the following:
- Title
- Slug
- Author
- Content
- Snippet
- Status
- Select Image
-
Inside the blog page, below each blog you will find 2 links, one is "edit" and the other is "delete'. The edit link will take you to a form similar to the one to add blogposts, but if you select the delete link, an alert message will appear asking if you want to delete the selected blogpost.
-
When viewing a blogpost in detail, 2 extra buttons will appear next to the buttons to return to the blog page or to return to the home page. The first button is for editing a blogpost, and the second is for deleting a blogpost. When you press the delete button, a message will appear in a modal window asking if you want to delete the selected blogpost.
This feature is part of the Django framework. Inside the panel are all the modules created and that are part of this website. The Admin panel is composed of:
- Accounts
- Email Address
- Authentication and Authorization
- Groups
- Users
- Blog
- Comments
- Posts
- Checkout
- Orders
- Products
- Products
- Categories
- Profiles
- User profiles
- Reviews
- Reviews
- Sites
- Sites
- Social Accounts
- Social accounts
- Social application tokens
- Social Applications
In the Admin panel you can change the status of blogposts, as well as moderate comments and reviews left by users.
- Information pages
These are located in the footer and consist of the following:
- Privacy Policy: Contains all the privacy policies within the website.
- Refund Policy: Contains the policies that are based on the online store at the time of applying any refund to a customer.
- Terms of Service: Contains the terms of service that guide the use of the online store's service.
The only feature contemplated at the beginning of this project, but due to website features implementation priorities was the integration of 3 buttons to share the products on social networks. It is an interesting feature that I would like to implement in the near future.
Later on I would like to implement the following features:
- The possibility to evaluate the products quality with stars (from 1 to 5 stars).
- Allow users to leave reviews within each product.
- Add a button that allows users to save a product in favorites, and these appear within their user profile.
- Add buttons to share products on social networks.
- Add a like and dislike button within the blog posts.
- HTML 5
- The project uses HTML5 to define the structure of this website.
- CSS 3
- The project uses CSS3 to add styling to the website.
- JavaScript
- The project uses Javascript to add interactivity to the website, to update or delete items from shopping cart and other functionalities.
- Python
- The project uses Python 3.9.4 to build the backend of this website
- Django
- The project uses Django version 3.2 as the framework.
- PostgreSQL
- The project uses PostgreSQL version 13.3 database service provided directly by Heroku.
- SQlite3
- The project uses SQlite3 to program locally, in addition this database is provided by Django.
- JQuery
- The project uses jQuery version 3.6.0 JavaScript library to simplify HTML DOM manipulation.
- Bootstrap
- The project uses Bootstrap version 4.6.0 , to build responsive website.
- Popper.js
- Popper.js version 1.16.1 for the Bootstrap components that requires the use of JavaScript to function.
- FontAwesome
- The project uses FontAwesome as icon provider.
- Google Fonts
- Google Fonts is used to style the fonts of the website
- Django Allauth
- Django Allauth version 0.44.0 to supports multiple authentication schemes, as well as multiple strategies for account verification.
- Django Ckeditor
- Django Ckeditor version 6.0.0 to provides a RichTextField and CKEditorWidget.
- Django Countries
- Django Countries version 7.1 to provides country choices for use with forms, and a country field for models.
- Django Crispy Forms
- Django Crispy Forms version 1.11.2 to style django forms.
- Django Storages
- Django Storages version 1.11.1 to connects Django to S3 Buckets.
- VS Code
- VS Code version 1.56.2 to write the code for this website.
- GitHub
- GitHub is used to host the source code.
- Git
- Git is used to control the different versions and history of the code.
- Stripe API
- Stripe API was used as the payment platform to validate and accept credit card payments in a secure way.
- AWS S3 Bucket
- AWS S3 Bucket to store images that was entered into the database.
- Heroku
- Heroku used for "platform as a service" for app hosting.
- Psycopg2
- Psycopg2 version 2.8.6 as PostgreSQL database adapter for Python
- Gunicorn
- Gunicorn version 20.1.0 as WSGI server implementation used to run Python web application
- Boto3
- Boto3 version 1.17.84 to make use of Amazon S3
- Pillow
- Pillow version 8.2.0 to add support for opening, manipulating, and saving many different image file formats
- PIP
- PIP for installation of tools needed in this project.
- Python Dotenv
- Python Dotenv version 0.17.0 to read key-value pairs from a
.envfile and can set them as environment variables.
- Python Dotenv version 0.17.0 to read key-value pairs from a
- Black
- Black version 20.8b1 to fix and format python files.
- Adobe Photoshop
- Adobe Photoshop CS6 portable version 13.0.0, to improve the images used in the website.
- Adobe Illustrator
- Adobe Illustrator CS6 portable version 16.0.0, to draw vectorial images used in the website.
- Affinity Designer
- Affinity Designer version 1.6.5.123, to make the website logo and typography.
- Pencil
- Pencil version 3.1.0 to create the wireframes.
Please view the complete testing process in this separate document here.
-
Follow this link to the Project GitHub repository.
-
Scroll to the top of this repository and click on the "clone or download button".
-
Decide whether you want to clone the project using HTTPS or an SSH key and do the following:
- HTTPS: click on the checklist icon to the right of the URL.
- SSH key: first click on 'Use SSH' then click on the same icon as above.
-
Open the 'Terminal'.
-
Choose the location for the cloned directory.
-
Type
git clone, and then paste the clone URL.git clone https://github.com/USERNAME/REPOSITORY
-
Press 'Enter' to create your local clone.
For local deployment you must have an IDE, like for example VS Code (used in this project) and the following to be installed locally on
your machine: Git, PIP and Python 3. Keep in mind that the python commands described below are intended if you are going to deploy the
project locally using Microsoft Windows, otherwise replace the python command with python3. Do the same in the case of the pip
command replace it with pip3.
-
After cloning this project, navigate to the correct file location after unpacking the files.
cd <path to folder>
-
Create a
.envfile with your own credentials.STRIPE_PUBLIC_KEY = "Your Stripe public key here..." STRIPE_SECRET_KEY = "Your Stripe secret key here..." STRIPE_WH_SECRET = "Your Stripe WH secret key here..." SECRET_KEY = "Your Django secret key here..." DEVELOPMENT = True -
Go to
settings.pyfile and add your environment variables.import os from dotenv import load_dotenv load_dotenv() # Necessary to load .env file DEBUG = 'DEVELOPMENT' in os.environ STRIPE_PUBLIC_KEY = os.getenv('STRIPE_PUBLIC_KEY', '') STRIPE_SECRET_KEY = os.getenv('STRIPE_SECRET_KEY', '') STRIPE_WH_SECRET = os.getenv('STRIPE_WH_SECRET', '') -
Add
.env.pyto.gitignorefile -
Then run this command
pip install -r requirements.txtto install the required modules. -
Then, run the commands to makemigrations and migrate.
python manage.py makemigrationspython manage.py migrate
-
This project contains a fixtures folder, in order to read those JSON files, you have to type the following commands:
python manage.py loaddata categoriespython manage.py loaddata products
-
Now, run the command to create a super user.
python manage.py createsuperuserin order to access the Django Admin Panel
-
In the terminal, use the following command to launch this Django project:
python manage.py runserver
-
After that, this Django project should be running locally on
http//: 127.0.0.1:8000.
Once you have the project setup locally, you can proceed to deploy it remotely with the following steps:
-
First, type the command
pip install gunicorn, which will act as the webserver. -
Update the
requirements.txtfile using thepip freeze > requirements.txtcommand in the terminal to make all of the installed packages and libraries to go in to the file. -
Then, create a Procfile with the command
echo web: python app.py > Procfilein the terminal. -
In Heroku, create a new app. The app must have a unique name.
-
In the new Heroku app, Click on Deploy. In the section Deployment method, click on Github, then choose the correct GitHub repository to link it to the Heroku app.
-
In the section Automatic Deploys, click on Enable automatic deploys, from master branch.
-
Go to setting.py and update the
ALLOWED_HOSTSas follows:ALLOWED_HOSTS = ['your-argentine-shop.herokuapp.com', 'localhost', '127.0.0.1'] -
Then, we have to temporarily disable collectstatic by using Heroku config set or using the CLI-terminal.
-
Heroku config vars
DISABLE_COLLECTSTATIC = <1> -
CLI-terminal
$ python manage.py collectstatic
-
-
After that, go to Resources, within Add-ons search Heroku Postgres, choose Hobby Dev - Free version, then click on Provision button.
-
Now go to Settings and click on Reveal config vars, and set the following:
DATABASE_URL = <The database url> DISABLE_COLLECTSTATIC = <1> -
Return to terminal and run
pip install dj_database_url, and then installpip install psycopg2, and update the requirements.txt file usingpip freeze > requirements.txt. -
Go to settings.py and write the following:
import os import dj_database_url from pathlib import Path 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', } } -
After that, run the following commands:
python manage.py makemigrationspython manage.py migratepython manage.py loaddata categoriespython manage.py loaddata products
-
Then, create a super user.
python manage.py createsuperuser
-
Sign up for a free Amazon AWS account in order to host your staticfiles and media files.
-
From the S3 buckets section, you'll need to create a new unique bucket in order to host your static files. To do that, you have to follow these next steps:
-
Permissions > CORS configuration:
[ { "AllowedHeaders": [ "Authorization" ], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [] } ] -
Permissions > Bucket Policy:
{ "Version": "2012-10-17", "Id": "PolicyID", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::your-bucket-name/*" } ] } -
Into IAM section of AWS, you have to create a new group, don't forget to select your existing S3 Bucket details.
-
Then you have to create a new policy and a new user. After that, you have to attach these to the Group.
-
-
Return to terminal and run
pip install django-storagesandpip install boto3. Go to settings.py and add storages to INSTALLED_APPS. -
Inside settings.py type the following:
if 'USE_AWS' in os.environ: # Cache control AWS_S3_OBJECT_PARAMETERS = { 'Expires': 'Thu, 31 Dec 2099 20:00:00 GMT', 'CacheControl': 'max-age=94608000', } # Bucket Config AWS_STORAGE_BUCKET_NAME = 'your-bucket-name' AWS_S3_REGION_NAME = 'eu-west-1' AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID') AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY') AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com' # Static and media files STATICFILES_STORAGE = 'custom_storages.StaticStorage' STATICFILES_LOCATION = 'static' DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage' MEDIAFILES_LOCATION = 'media' # Override static and media URLs in production STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/' MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/' -
Return to Heroku, go to Settings and click on Reveal config vars, and set the following:
AWS_ACCESS_KEY_ID = <Your aws access key> AWS_SECRET_ACCESS_KEY = <Your secret aws access key> DATABASE_URL = <The database url> DEFAULT_FROM_EMAIL = <Your default email> DISABLE_COLLECTSTATIC = <1> EMAIL_HOST_PASS = <Your email password> EMAIL_HOST_USER = <Your email> SECRET_KEY = <Your Django secret key> USE_AWS = <True> -
Login in your Stripe account, navigate to Developers section, and get your API keys. Then type your secret keys in your Heroku config vars.
AWS_ACCESS_KEY_ID = <Your aws access key> AWS_SECRET_ACCESS_KEY = <Your secret aws access key> DATABASE_URL = <The database url> DEFAULT_FROM_EMAIL = <Your default email> DISABLE_COLLECTSTATIC = <1> EMAIL_HOST_PASS = <Your email password> EMAIL_HOST_USER = <Your email> SECRET_KEY = <Your Django secret key> STRIPE_PUBLIC_KEY = <Your Stripe public key> STRIPE_SECRET_KEY = <Your Stripe secret key> STRIPE_WH_SECRET = <Your Stripe WH secret key> USE_AWS = <True>
Note: Don't forget that before deploying this project to Heroku, you must do a git commit in order to Heroku takes the new changes.
The products used, as well as the written content within the blog page, as well as general information were consulted from the following websites:
- The pictures used for some images cover (Contact page, Shipping and Profile) were obtained from Google images and were improved using Adobe Photoshop.
- Some images used (Reviews cover, carousel images, About us, Reviews form cover) were made using Adobe Photoshop.
- Logotype and images for errors 404 and 500 were made using Adobe Illustrator and Affinity Designer.
- The images from Unsplash were used to create generic fake profile avatars.
- The images from Iconfinder were used for the shopping cart information bar and blog page.
-
These websites were really useful to troubleshooting the issues I faced:
-
To build the blog page, comments and reviews
-
To custom Allauth sign up views
-
The following YouTubers were really helpful in the most difficult moments doing this project:
-
Part of coding written for this project was based on the source code of the module provided by Code Institute Source Code.
Thank you to the following people who helped with support, inspiration and guidance at different stages in the project:
- My boyfriend.
- My friends and family.
- The guidance and support of my mentor Brian Macharia.
I want to thank Code Institute, especially Student Care for their support throughout this course, for supporting me in the most difficult moments and for giving me the opportunity to finish my studies, since last year was a very complicated year both in the family and personal sphere.
Disclaimer: The content of this Website is for educational purposes only.