BOHO Living - Good vibes only!
Home decor - Fashion - Free Spirit
BOHO Living (referred to "B.L" in readme) is an online home decor shop that offers a selection of trendy home decor and fashion items inspired by the modern bohemian style.
This is an e-commerce web application for a fictional company, created for the purposes of satisfying the requirements for the Code Institute Full Stack Development Course Milestone Project 4. The application features e-commerce functionality, payments using stripe, a blog section for admin as well as users to add blog posts, confirmation emails, CRUD functionality for admin to add stock items, and an admin section, for the admin user to access database records.
This website is only for educational purposes and the stripe functionality is set up to only accept the test card details below, please don't enter your personal card details.
When using the Payment Intents API with Stripe’s client libraries and SDKs, use the following test card number and details:
Card Number: 4242 4242 4242 4242
Month/Year: 04 / 24
CVC: 242
ZIP: 42424
An account with Super User privileges has been created for testing purposes. The username and password will be supplied when submitting the project.
-
- IDE
- Languages
- Database
- Storage
- Payment
- Frameworks
- Libraries, Tools, Editors
- Packages and Dependencies
The purpose of this project is to
"...build a full-stack site based around business logic used to control a centrally-owned dataset. You will set up an authentication mechanism and provide paid access to the site's data and/or other activities based on the dataset, such as the purchase of a product/service" using HTML, CSS, JavaScript, Python+Django, a relational database (recommending MySQL or Postgres), Stripe payments and possible additional libraries and API's.
Value provided:
- By authenticating on the site and paying for some of its services, users can advance their own goals. Before authenticating, the site makes it clear how those goals would be furthered by the site.
- The site owner is able to make money by providing this set of services to the users. There is no way for a regular user to bypass the site's mechanisms and derive all of the value available to paid users without paying.
This project has a full set of CRUD (creation, reading, updating and deletion of data records) features. CRUD at user interface level:
Operation | SQL | HTTP | DDS | Description |
---|---|---|---|---|
Create | INSERT | PUT/POST | Write | Create a resource: Users can create profiles by signing up. Users can create orders by adding items to bag annd then follow the checkout procedure. Users can create a blog post in BOHO Blog page. Admin can create products and blog posts. |
Read | SELECT | GET | Read | Retrieve a resource: Users can retrieve, search and view products. |
Update | UPDATE | PUT/PATCH/POST | Write | Update a resource: Users can update/edit the delivery information. Admin can update/edit products and blog posts. |
Delete | DELETE | DELETE | Dispose | Delete a resource: Admin can delete products, registered users and blog posts. |
This e-commerce website focuses on maximizing direct sales to new and returning customers/visitors (convert a website visitor into a customer) by simplify and optimize site content to be as easy as possible to make a purchase. This is made possible by having a user friendly and well designed online shop that enables secure purchases, inspire consumers and has a distinct and specialized sortiment (bohemian). Except that, another goal is to establishing brand recognition in the industry by presenting and stick to a bohemian nich and lifestyle. Mission statement: "To offer on trend, selected and exclusive boho inspired home decor and fashion items".
The target group for B.L is potential customers liking the bohemian style in home decor and fashion. Since this is e-commerce the conversions is the most important part, rather than traffic it self. Conversions take place when targeted traffic meets relevant offer. So it's important that B.L clearly defined what they offers. Thats why B.L has a really well defined business name, website and offer so it can avoid irrelevant traffic (traffic not interested in boho inspired e-commerce). By basic SEO and a distinct website (mainly the landing page) B.L defines that they offer boho inspired homedecor and fashion. E-commerce sales increaces worldwide, and develop the need to determine target group, particularly ecommerce stores. B.L ideal customer is a person (gender non relevant) that likes/has a boho inpired lifestyle, more than demographic data. Online, the location matters less due to home delivery. Age is not what it used to be, the age isn't the defining thing if somebody turns out to be a paying customer or not. While it's important to reach as many people as possible, and it often seems like focusing only on specific segments of the population could be limiting, you also need to reach potential consumers that isn't into boho style today, but has the potential to be.
B.L can also make use of the demographical information, such as name, address, user behavior etc. that B.L gets when users filling out the order form, where they also can get access to the newsletter.
In addition to the goals above;
This user story template consists of three sections; As a (decription of user), I want (functionality/goal), So that I (benefit). It has short descriptions, requirements (who and why), general guidance, no technical details.
ID | As a.. | I want to.. | So I.. |
---|---|---|---|
Viewing and Navigation | |||
1 | First Time Visitor | Be presented with an intutive site navigation that is user friendly and over all ease-of-use | Get a good impression about the site/business |
2 | First Time Visitor | Visit a structured, clean and modern website | Can understand the main purpose of the site/business and find key information |
3 | First Time Visitor | Get the impression af a professional website | Feel comfortable enough to make a purchase |
4 | First Time Visitor | Get visually impressed by the site | Find the site appealing |
5 | First Time Visitor | View structured lists of products | Can see what the website has to offer and make a purchase in just a few clicks |
6 | First Time Visitor | View details of the products | Easily can see price, description, image, sizes if any |
7 | First Time Visitor | Find items close to what I was searching online | Can find the items I was looking for |
8 | First Time Visitor | Be presented to contact information and social media links | Am feeling a sence of crediblity |
9 | First Time Visitor | Be able to reach out to siteowner | Get answers to any possible questions |
10 | Returning Visitor | Be presented with new/seasonal items | Experience that B.I is up to date and offer me new items than last visiting |
Registration | |||
11 | User | Register for an account | Can access to Boho Living |
12 | User | Be able to have an account | Save default delivery information and keep a record of order history, get mails with news and offers |
13 | User | Receive an email confirming my registration | Verify my account was registered successfully |
Login | |||
14 | Registered User | Sign in to my account | Can access my account |
15 | Registered User | Access my user profile | Can view my order history, manage my personal details |
16 | Registered User | Save my personal details (address etc) in my account | Can make a smooth purchase next time. |
17 | Registered User | Request a password reset | Receive an email to reset my password in case I forget it |
Logout | |||
18 | Registered User | Sign out of my account | Secure that nobody else makes a purchase from my account. |
Sorting and Searching | |||
19 | Shopper | Sort the list of available products | See the products in a list sorted by price, rating, name etc |
20 | Shopper | Be able to search by categories | Find what I am looking for |
21 | Shopper | Sort multiple categories simultaneously | Find the best rated or best priced across broad categories |
22 | Shopper | Search for products | Find a specific product I wish to purchase |
23 | Shopper | View a list of search results | See if the product I want is available to purchase |
24 | Shopper | View an image and details for each product | Can decide if I want to add to cart from the detail or search pages or not. |
Purchasing and Checkout | |||
25 | Shopper | Be able to add products to my shopping bag | Can buy the item |
26 | Shopper | Easily select the size and quantity whilst purchasing a product | Can get the size and quantity I want |
27 | Shopper | Get information about delivery charges, how much I need to spend to get free delivery | Can make an informed purchasing decision |
28 | Shopper | Be able to see my cart's total at any time | Can avoid spending too much |
29 | Shopper | Review my cart | Can make adjustments prior to checkout |
30 | Shopper | Adjust the quantity of individual items in my bag | Easily can adjust the amount of an item I intended to purchase (including removing) |
31 | Shopper | Easily enter my payment information | Have a smooth checkout experience |
32 | Shopper | Experience that my payment and personal information are secure | Can provide the needed payment and personal information, and feel like it is handled safely |
33 | Shopper | View summery of order before completing purchase | Can verify I haven't made any mistakes |
34 | Shopper | Receive a confirmation email of my purchase | Can be confident that the purchase has been made successfully |
35 | Shopper | Be presented by some kind of custom service contact information | Can get in touch |
Admin and Store Management | |||
36 | Administrator | Have access to an admin section | Can operate the e-commerce |
37 | Administrator | Add a product (Create), write information about the product (Read), edit product (Update) and remove product (Delete) | Can adjust the offers |
38 | Administrator | Delete users blog posts, if inappropriate | Can keep the site proffessional |
39 | Administrator | Have logical SKU:s | Get a general picture about what category, color etc the product is. (W=white MV=multicolor B=blue G=green BR=brown HD=home decor) |
Site manager | |||
40 | Site Manager | Be able to manage/edit the site | Can keep the site relevant and with correct information/sortiment |
41 | Site Manager | Feel the design harmonize with what B.L: sortiment and image | Am sure that it corresponds to B.L:s design profile |
Blog | |||
42 | Shopper | Get inspired | Can get home decoration/fashion ideas |
43 | Shopper | Be able to contribute with my own ideas by adding a post | Can share inspirational ideas |
Authentication & Security | |||
44 | User | Verify my email address | Ensure my account is set up securely |
45 | Registered User | Be confident that my password is stored securely | Feel safe from malicious activity |
The page consists of a white base with black, orange and yellow as accent colors. The combination of black and white offers the maximum contrast possible, as they come from opposite ends of the color spectrum. Black and white websites are classical, strong, and powerful. Apart from black and white being a risk-free combination and ensuring a design will look clean, removing color forces a designer to rely on other elements in their web designs such as the products, typography, layout, or grid to catch the viewers' attention. Boho style/the products has asymmetrical layouts, variegated patterns and handcrafted textures. Placed in a clean, contemporary space, layers of colorful textiles deliver an unexpected twist. Thats what I had in mind chosing colors and style for this website.
Orange is an attention-grabbing color that tends to stand out visually as an accent standing out against neutral colors. Orange is a very creative color that’s also associated with adventure and youth. It’s perceived as very energetic. Because of orange’s strong ties to 70s style, it can also evoke a retro feeling which corresponds well with B.L.
Orange has very high visibility, you can use it to draw attention and highlight the most important elements of your design. I used it as a compliment to the crisp and clean white and black colors.
I've used yellow text shadows in a few different places. This glowing yellow is an attention-getter and at the same time it gives a smooth and soft impression, and its contrast with white or black is one of the most visible color combinations.
Shop now button at landing page has a subtly animated shadow effect. Well-designed animation can improve usability and make the interaction with a site more engaging and delightful.Optimal speed for interface animation is between 200 and 500 ms. My animation is set to 300 ms. Too much animation can confuse the user and create a negative emotional effect and takes the focus away from the message.
The CTA button is used to help user navigate the site and to get visitors to do what I want them to do (look at the products and make a purchase). The CTA text used is "Shop now", ans is direct and clear. It engages the visitor and makes it crystal clear which action the visitor is expected to take (click and shop). The CTA copy simply states the website’s conversion goal. By adding the word "now", I'm creating a sense of urgency that is a necessary condition for successful CTA copy.
All buttons are either black, white or orange.
This project contains two different fonts, one type for headings and CTAs (buttons), and another for body. The color contrast between the black and white text, makes it clear and distinct. A reader tends to scan down the left side of the page, looking for interesting key words in left-aligned headings or text. They then tend to stop and read (to the right) when he or she comes to something interesting. The result looks something like an F, thats why this theory is called F-pattern and thats why this project is built with that in mind. There are generously spacing between the text which indicates an element’s meaning and importance using only visuals.
Lato is an open source, sans-serif font. Lato font is the main font used throughout the site with Architects Daughter font used to headers and logo. The font is created to give the letterforms familiar harmony and elegance. The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness. Lato is used in the body content for the site to appear to be approachable which is the main goal for this website.
Architects Daughter font incorporates the graphic, squared look of architectural writing, combined with the natural feel of daily handwriting. It is clean but unconventional and gives the site a relaxed vibe. The combination of these two fonts represents both the webshop/business side aswell as the relaxed boho approach.
This projects strong imagery complements the overall brand story and really takes advantages of the power of visual storytelling. Some say you only have up to 7–8 seconds to capture a user’s attention before they click through to another competitor’s site. The use of persuasive imagery is a good way to try and retain them. Humans tends to process visual information from an image far quicker than text, which makes imagery a powerful tool. When confronted with a powerful image, consumers immediately connect with the brand on an emotional level. Thats why the site has a full-width hero image that reflects the style the business wants to signal. The hero image on the landing page gives the site a dramatic appearance and sets the tone for the boho inspired page. It provides an immediate immersive experience by confronting the user first-off with a strong image which evokes an emotional response. There are a short, sharp and descriptive text-on-image that is not takning any of the power away from the hero image.
I use lot of space around the product images and content to get the visitor an uncluttered and comfortable browsing experience on all device sizes. The product images for the e-commerce part of the site is chosen to be more artistic than detailed/informative to fit the boho-tone. The appearance is aiming to be appealing to the target audience. All images are choosen to work in tandem with the content.
All icons used are taken from Font Awsome. The use of icons in web design is a proven method to modernize a website and help direct user flow. Adding icons to the site's content helps a user better process the information and provides a visual focus point that grounds a user to a specific section. I used an boho inspired arrow icon recurring throughout the site, to improve visual and keep a common theme throughout the site.
Every page of the website features a consistently responsive and intuitive layout and navigational system.
These feautures also proves that it meets the requirement of each user story.
General features shown at all pages
- Fixed navigation bar, including logo or home link that links to home page from all pages, search function, my account ("Sign in", "Sign up", "Product management" and "My profile") and bag total icon and eventual amount.
- Main navigations links in navigation bar shown as a collapsible navbar (hamburger button) shown at tablets and mobile devices.
- Footer with short presentaion/bait of the blog, a contact button, nav links, links to social media and copyright info.
- Delivery banner which indicates free delivery on orders over 50$.
- Back to top button.
- An account with Super User privileges has been created for testing purposes.
- Responsive site on all devices.
Home
The home page features three sections, apart from the header and the footer.
- Hero image with CTA (clicking "Shop now" redirects visitor immediately to the product page) and text.
- Intro text about B.L.
- Carousel with inspiring images of products that links to the actual product category.
Products
- Product section presents the category visiting at the time at the top of the page (except when choosing "All products"), and the number of items in this particular category and a by select box below. The products are presented in rows (1-4 rows depending on the device) including product name, price, category and rating.
- Product details displays a detailed view of the product with product name, price, category, rating, description, quantity input field and "Keep shopping" and "Add to bag" button all in one column.
Home Decor
- Home Decor section consists of following categories: "New in", "Furnitures", "Decor", "Textiles", "Incense" and "All home decor", which are presented at the top of the page.
Fashion
- Fashion section consists of following categories: "New in", "Clothes", Accessories", "Bags" and "All fashion", which are presented at the top of the page.
Outlet
- Outlet page contains products with discounted prices, category is presented at the top of the page.
Boho Blog
- Boho Blog page contains inspiring blog posts added by admin or users. It has an intro text about general boho style at the top and two "Create your blog post" buttons, one above the blog posts and one below. Each blog post has a title, author, date, text, "Read more" button and an image. All blog posts are presented in one column.
About us
- About us page contains short background information about B.L at the top and a contact form below. When filling out the form and submit it, an alert shows in the middle of the screen; "Your message has been sent". User also gets an email that confirms that B.L has received the question.
My account
If not signed in:
- Sign up - allows visitor to sign up. If user already has an account there is also a link to log in instead. When signing up a toast whit success message is shown and a confirmation mail is sent.
- Sign in - allows registered users to log in. When signed in, a welcome toast is shown.
If signed in:
- My Profile - if saved, users delivery information is shown, with the possibility to update the information. If user has an order history it is shown here.
- Logout - a confirmation text "Are you sure you want to signout?" and a sign out button.
If signed in as a superuser:
- Product management - when signed in a product management link is shown in "My Account" dropdown where you can add products by choosing category, SKU, name, description, size, prize, rating, image url.
Shopping cart
- When shopping cart is empty, an "Your bag is empty" message displays at a new page, along with a "Let's shop" button below the message.
- When shopping cart has items, the shopping bag page is displayed along with the products that are added in bag (including product info, prize, quantity, subtotal, product image, product name, size, update, remove, bag total, delivery cost, grand total, message of how much more to spend to get free delivery, "Keep shopping" and "Checkout" button). "Keep shopping" button links to "All products" page. "Checkout" button links to checkout page.
Checkout
- Checkout page contains of two sections, one column with a form including details, delivery and payment details, "Adjust bag" and "Complete order" button. The other section (second column) consists of an order summary. When completing the order, a success toast is shown in upper right corner and user get redirected to "Thank you for choosing BOHO Living" page that includes order information, a "Check out the latest deals" that links to "New in products". A confirmation mail is sent to user.
Toasts
Four different kind of toasts appears when a certain action has been triggered by user to get feedback on the action (For example adding something in bag, logging in etc.); "Success", "Info", "Warning", "Error". Toast example:
Django-allauth
- A Python package used to the sign up, login, logout, password change features.
Emailjs
- Used to send confirmation mail after user filled out the contact form and success message when submitting the form.
- Comments and ability to share blog posts to social media (potential to convert more readers into paying customers).
- Elaborate the SKU numbers, to make even more logical to Administrator.
- Allow the contact form confirmation mail (in About Us page) to send to the actual person that filled the form out (and not to me as it does to day).
- Social media login.
- More categories.
- Function to make users giving rating. To day set by Admin based on sales.
- Email notification functionality for users to be alerted when a new product or service is added.
- User profile picture functionality, allowing users to add profile pictures. Nice feature if posting blog posts.
- Allowing users to comment the products.
- Easier to get contacted by business partners regarding any collaboration, business deals and sponsorship if site has an more expanded contact/business information.
- Get more contact information about the registered users (by expanding the details in "My Account" to be able to reach out (newsletters, offers etc).
- Expand blog section to have different categories, ideas, what products are on sale, new in etc.
- Customize site based on Google Analytics statistic(and other sources). Who are the visitors and customers? What pages and products are popular and not and adjust sortiment/site according to that information to increases the ROI (return on investment).
-
To ensure that the website is secure, code has @login_required decorators in msp4 app, that makes Django check whether the user is logged in before executing the view. If not logged in user get redirected to sign in page. I also use this decorator for the Profile view, since only logged in users should be able to access. If somebody somehow found out the URL for the edit and delete product management, they could possibly delete all products, thats why the decorators are needed. Only superuser are able to edit and delete, just as it should be.
-
If user accendentally or intentionally closes the browser window after the payment is confirmed but before the form is submitted, there would be a payment in Stripe, but no order in the database. To prevent this situation; Each time an event occurs on Stripe (such as a payment intent being created) a payment being completed on Stripe a webhook is sent out that we can listen for. Webhooks are like the signals django sends each time a model is saved or deleted. Except that they are sent securely from Stripe to a url we specify. (from Boutique Ado project, Stripe, part 10)
Post wireframes design changes: While the project relied on these wireframes, there are some differences between the wireframes and the final product;
- No spinner icon and background image triggered while Stripe payment is processing.
- An "About Us" page with a contact form was added.
- iPhone eXpensive portrait · width: 375px
- iPhone 6-8 portrait · width: 375px
- iPhone 6-8 Plump portrait · width: 414px
- Android (Pixel 2) portrait · width: 412px
- iPad portrait · width: 768px
- iPad landscape · width: 1024px
- iPad Pro · width: 1024px height: 1366px
- iPad Pro Landscape · width: 1366px height: 1024px
- Galaxy S5 · width: 360px height: 640px
- Surface Duo · width: 540px height: 720px
- Desktop 1024x917px
- Desktop 1440x1126
Initial site map shown below:
During development the project used SQLite. The deployed app is using Heroku PostgreSQL. Initially the databases were built in JSON files, link here!
- Categories Database
- Products Database
Heroku PostgreSQL is used to host the backend database for this site.
B.L contains of these Django apps:
- About
- Bag
- Blog
- Checkout
- Home
- Products
- Profiles
Full list of data models used:
Profile model
Name | Database Key | Field Type | Validation Requirements |
---|---|---|---|
User | user | OneToOneField(User) | on_delete=models.CASCADE |
Phone Number | default_phone_number | CharField | max_length=20, null=True, blank=True |
Street Address 1 | default_street_address1 | CharField | max_length=80, null=True, blank=True |
Street Address 2 | default_street_address2 | CharField | max_length=80, null=True, blank=True |
Town or City | default_town_or_city | CharField | max_length=40, null=True, blank=True |
Postcode | default_postcode | CharField | max_length=20, null=True, blank=True |
Country | default_country | CountryField | blank_label='Country', null=True, blank=True |
Category Model
Name | Database Key | Field Type | Validation Requirements |
---|---|---|---|
Name | name | CharField | max_length=250 |
Friendly Name | friendly_name | CharField | max_length=250, null=True, blank=True |
Product Model
Name | Database Key | Field Type | Validation Requirements |
---|---|---|---|
Category | category | ForeignKey | null=True, blank=True, on_delete=models.SET_NULL |
Sku | sku | CharField | max_length=250, null=True, blank=True |
Name | name | CharField | max_length=250 |
Description | description | TextField | None |
Has sizes | has_size | BooleanField | default=False, null=True, blank=True |
Price | price | DecimalField | max_digits=6, decimal_places=2 |
Rating | rating | DecimalField | max_digits=6, decimal_places=2, null=True, blank=True |
On Sale | on_sale | BooleanField | default=False, blank=True |
Discount Percent | discount_percent | DecimalField | max_digits=2, decimal_places=0, blank=True, null=True |
Image Url | image_url | URLField | max_length=1025, null=True, blank=True |
Image | image | ImageField | null=True, blank=True |
Order Model
Name | Database Key | Field Type | Validation |
---|---|---|---|
Order Number | order_number | CharField | max_length=32, null=False, editable=False |
User Profile | user_profile | ForeignKey(UserProfile) | on_delete=models.SET_NULL, blank=True,null=True, related_name='orders' |
Full Name | full_name | CharField | max_length=50, null=False, blank=False |
Email. | EmailField | max_length=254, null=False, blank=False | |
Phone Number | phone_number | CharField | max_length=20, null=False, blank=False |
Country | country | CountryField | blank_label='Country *', null=False, blank=False |
Postcode | postcode | CharField | max_length=20, null=True, blank=True |
Town or City | town_or_city | CharField | max_length=40, null=False, blank=False |
Street Address 1 | street_address1 | CharField | max_length=80, null=False, blank=False |
Street Address 2 | street_address2 | CharField | max_length=80, null=True, blank=True |
Date | date | DateTimeField | auto_now_add=True |
Delivery Cost | delivery_cost | DecimalField | max_digits=6, decimal_places=2, null=False, default=0 |
Order Total | order_total | DecimalField | max_digits=10, decimal_places=2, null=False, default=0 |
Grand Total | grand_total | DecimalField | max_digits=10, decimal_places=2, null=False, default=0 |
Original Bag | original_bag | TextField | null=False, blank=False, default='' |
Stripe Payment Intent ID | stripe_pid | CharField | max_length=254, null=False, blank=False, default='' |
Order Line Item Model
Name | Database Key | Field Type | Validation |
---|---|---|---|
Order | order | ForeignKey(Order) | null=False, blank=False, on_delete=models.CASCADE, related_name='lineitems' |
Product | product | ForeignKey(Product) | null=False, blank=False, on_delete=models.CASCADE |
Product Size | product_size | CharField | max_length=2, null=True, blank=True |
Quantity | quantity | IntegerField | null=False, blank=False, default=0 |
Line Item Total | lineitem_total | DecimalField | max_digits=6, decimal_places=2, null=False, blank=False, editable=False |
Name | Database Key | Field Type | Validation |
---|---|---|---|
Title | title | CharField | max_length=150, null=False, blank=False |
Body | body | TextField | max_length=5000, null=False, blank=False |
Image | image | ImageField | upload_to='blogimages', null=True, blank=True |
Date Published | date_published | DateTimeField | auto_now_add=True, verbose_name="date published" |
Date Updated | date_updated | DateTimeField | auto_now=True, verbose_name="date updated" |
Author | author | ForeignKey | User, on_delete=models.CASCADE |
Slug | slug | SlugField | max_length=150, blank=True, unique=True |
- GitHub - Used to store the projects code after being pushed from Git.
- HTML - Used to create the site structure.
- CSS - Used to create the styling throughout the site.
- JavaScript - Used for the sidenav, back-to-top button, image preview.
- Python - Used to write the logic that operates the site.
- SQLite - Database used during development.
- Heroku Postgres - Database used for production/deployed app.
- Amazon AWS S3 - The Amazon Web Service s3 Bucket was used to store media and static files.
- Stripe - Payment platform.
- Bootstrap - Bootstrap 5.1 used to design and build responsive, mobile-first sites.
- Django - Web development framework.
- Am I Responsive - Used to validate the responsiveness.
- Balsamiq - Used to create wireframes.
- Bulma - Used for icon class.
- Chrome DevTools - Used Lighthouse to check sites performance and dev tool to check responsiveness.
- Dj-database-url - A utility to help you load your database into your dictionary from the DATABASE_URL environment variable.
- Django Allauth - Used to create the user sign-in function for the site.
- Django Countries - Used for the country select field in the order form.
- Django Crispy Forms - Used to utilise the Bootstrap form classes.
- drawSQL - Used to create database schema.
- Font-Awesome - Used for icons.
- FreeFormatter - Formats HTML code.
- Git - Used for version control to commit to Git and push to Heroku.
- Gitpod - Open-source application for ready-to-code developer environments in browser.
- Google fonts - Used to import fonts.
- Gunicorn - Used for deploying the project to Heroku.
- Imgur - Used to create url:s for images.
- Jinja - Jinja templating language was used to simplify and display backend data in html.
- JSHint - JavaScript code quality tool, used to detect errors.
- JQuery - Used for DOM traversal, HTML manipulation, and event handling.
- Unsplash - Images used throughout the site.
- PEP8 - Used to improve the readability and consistency of Python code.
- PEP8online - Used to check code for PEP8 requirements.
- Pillow - Python Imaging Library.
- pip - Used to install packages from the Python Package Index.
- Pixelmator - Used to resize images, creating logo and tab icon.
- Responsinator - Used for the responsive screenshoots on different device resolutions.
- Responsive Test Tool - Used for the responsive screenshoots on different device resolutions.
- Postimages - Used to create url for images.
- SweetAlert2 - Used to customise the contact form success message
- TechSini - Mockup generator used for preview of the website.
- Visual Studio Code - IDE used for code editing.
- W3C Validator - Used to test HTML code.
- W3C Validator CSS - Used to test CSS code.
Name | Purpose |
---|---|
asgiref | Allows web apps and servers to communicate |
Boto3 | AWS Management |
Botocore | AWS Management |
crispy-bootstrap5 | Bootstrap5 template pack for django-crispy-forms |
dj-database-url | Database Configuration |
Django | Framework |
django-allauth | Authentication |
django-countries | Country Form Field |
django-crispy-forms | Front End Form Rendering |
django-storages | Custom Storage Backends |
gunicorn | WSGI HTTP Server |
jmespath | Data driven testcases |
oauthlib | Framework |
Pillow | Images |
psycopg2-binary | PostgreSQL DB Adaptor |
python3-openid | Python packages |
pytz | Library |
requests-oauthlib | Authentication support for Requests |
s3transfer | Python library for managing Amazon S3 transfers |
sqlparse | Non-validating SQL parser for Python |
Stripe | Secure Payment Services |
Testing section is located here testing.md file
This project has been developed using Gitpod and GitHub. The project was regularly committed to GitHub during the initial development phase. The website was stored as a repository in GitHub, and has later been deployed using Heroku. Static files are stored using Amazon AWS in an Amazon Web Services S3 Bucket.
Requirements to deploy:
- An IDE (Such as GitPod or VSCode)
- Git for version control
- GitHub account
- Heroku account
- AWS S3 account
- Stripe account
- Email account
- Python3
- pip for Python package installation
Making a copy of the original repository on our GitHub account to view or to make changes without affecting the original repository, follow the steps below;
- Log into GitHub and locate the repository.
- Click on
Fork
on the top right of the page.
- You should now have a copy of the original repository in your GitHub account.
- Log in to www.github.com) with your GitHub account.
- Click the profile dropdown in the upper right corner.
- Choose
Your repositories
- Navigate to the relevant repository in the main page of the repositories.
- Click the
Code
button.
- To clone the repository using HTTPS, under
Clone with HTTPS
, click the icon marked in the screenshot. To clone the repository using an SSH key, including a certificate issued by your organization's SSH certificate authority, click Use SSH, then click the icon marked in the screenshot. To clone a repository using GitHub CLI, click Use GitHub CLI, then click the icon marked in the screenshot.
- Open terminal.
- Change the current working directory to the location where you want the cloned directory.
- Type git clone, and then paste the URL you copied earlier.
- Press
Enter
to create your local clone.
- Go to Project Code Repository Location on Github.
- Select the Code dropdown and choose the Download ZIP option.
- This will download a copy of the entire project locally as a zip file.
- Any required Python dependencies should be installed locally using the terminal command $ pip install -r requirements.txt.
To set up the local testing environment once the code has been Cloned or Forked, the following environment variables should be added to the Gitpod environment variables. Gitpod environment variables can be accessed from the top right of the Gitpod home screen, by clicking on the User icon and selecting Settings, then Variables from the left hand menu.
Variable | Value |
---|---|
DEVELOPMENT | True |
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_webhook_secret_key |
- Create an account at Heroku.
- Choose a name for your application, select the region closest to your, and then click
Create app
.
- After you created your app click on Resources tab, using the
Add ons
search field find, and selectHeroku Postgres
. - Select your plan and click confirm.
- In order to use Heroku Postgres you need to install two dependencies
dj_database_url
andpsycopg2-binary
- After installing the dependencies, freeze your requirements into
requirements.txt
- In your settings.py file import
dj_database_url
and replace your current Database settings to: YourDATABASE_URL
can be found in your Heroku AppsConfig Var
- After setting your Database, run the following commands to migrate models:
- Load the data to the database from the db.json file by running following command:
- Create a superuser for your app
- Heroku setup is complete, now add an if statement in your settings.py file to set the DATABASES:
- Install
gunicorn
and freeze your requirements
- Create a
Procfile
and add the following code in yourProcfile
- Connect to Heroku fom the terminal:
- Go to back to the Settings tab on your Heroku dashboard, and click "Reveal Config Vars" and add the following Config Variable, to temporarily disable
COLLECTSTATIC
:
- In your settings.py file add your Heroku app, and
localhost
-
In your Heroku app dashboard, click on
Settings
tab on your Heroku dashboard, and clickReveal Config Vars
and add the following Config Variables:Key Value SECRET_KEY YOUR_SECRET_KEY STRIPE_PUBLIC_KEY YOUR_STRIPE_PUBLIC_KEY STRIPE_SECRET_KEY YOUR_STRIPE_SECRET_KEY STRIPE_WH_SECRET YOUR_STRIPE_WH_SECRET EMAIL_HOST_USER YOUR_EMAIL_ADDRESS EMAIL_HOST_PASS YOUR_EMAIL_APP_PASSWORD -
Then push to Heroku:
- Navigate to
Deploy
tab on your Heroku apps Dashboard, and click onEnable Automatic Deploys
. - Site is successfully deployed, and any futher changes on the app will automatically be updated everytime they are commited and pushed on Github.
The deployed version of this website has static and media files hosted to it via the web based service; Amazon Web Services S3 Bucket.
- Create or login to your AWS account at aws.amazon.com and click on
Amazon S3
. - Create a new bucket with the following settings:
-
An appropriate name (your project name)
-
Region (closest to you)
-
Uncheck
Block all Public Access
-
Open the new bucket and
Enable Static Website Hosting
(bottom of page) -
In the permissions tab, edit the CORS configuration (near bottom) and use the following code to set up the required connection between the Heroku app and the bucket:
-
In the permissions tab, click
Edit
on the Bucket Policy and open the policy generator -
Use the following settings to setup the policy correctly:
-
Type of Policy:
S3 Bucket Policy
-
Principal:
*
to allow all principles -
Action:
Get Object
-
Amazon Resource Name (ARN): Paste your Bucket ARN and add * at the and of your Bucket Resource key arn:aws:s3:::bucket_name/ and then save*
-
IMPORTANT! Add "/*" to the end of the resource key to ensure all files are loaded
-
Click on Access Control List (ACL), and enable
List
onEveryone (public access)
tab. -
On the top of your AWS Management Console, Search for
IAM
orIdentity Access Management
-
- Click on
User Groups
on the left panel, andCreate Group
- Click on
-
- Click on
Policies
andCreate Policy
- Click on
-
- Click on JSON and select
Import Managed Policy
and search forAmazonS3FullAccess
and click import
- Click on JSON and select
-
- Copy your
Bucket ARN
and paste it in theResource
- Copy your
-
-
Click on Review Policy
-
Go back to
User Groups
and click on the group name you just created, click onPermissions
thenAttach Policies
and search for the policy you've just created and then click onAttach Policy
to attach the policy to the group -
Click on
Users
and then click onAdd Users
-
- Set your user's name and give
Programmatic Access
- Set your user's name and give
-
- Click
Next
and add the user in your New Group andCreate User
- Click
-
- After you created the user download user's
.csv
file which contains user's access key and secret access key.
- After you created the user download user's
-
-
Go back to your IDE and install the following dependencies in order to connect Django to AWS S3
- Freeze your requirements
-
Add it to your installed apps in your settings.py
-
Create
custom_storages.py
file in your project root and add the following code, and then save
- In your
settings.py
file add the following code
- Add the following config variables in your Heroku App, and remove
DISABLE_COLLECTSTATIC=1
Key | Value |
---|---|
USE_AWS | True |
AWS_ACCESS_KEY_ID | YOUR_AWS_ACCESS_KEY_ID |
AWS_SECRET_ACCESS_KEY | YOUR_AWS_SECRET_ACCESS_KEY |
- Deployment complete!
- Code Institute tutor support.
- Fellow students on Slack for a helping hand when I've got stuck.
- https://codingwithmitch.com/ for code and inspiration to my blog section.
- All images for the project was taken from Unsplash.
- Code Institute for inspiration from the Boutique Ado project.
- https://codingwithmitch.com/ for code and inspiration to my blog section.