Ohm-Azing Components - Portfolio Project 5

1. Key project information

Description : This Portfolio Project 5 website called Ohm-Azing Components is a site of imaginary online shop that sells electronic components, electronic kits, tools, books, etc. User can easily browse through the shop items, add/delete items from their Wishlist, express their opinion by commenting and liking/disliking shop items and most importantly order their selected items for home delivery including online payment.
Key project goal : To offer all visitors of Ohm-Azing Components site the option to buy their chosen products, select delivery option and finish payment online without the need of leaving the house.
Audience : There's no age or any other limit to audience of this page. Target audience are individuals at any level of experience that have interest in electronic components and electronic kits.
Live version : Live version of Ohm-Azing Components e-shop page can be viewed at https://ohmazing-components-1a5a0fcb9e95.herokuapp.com/.
Dummy Card : 4242 4242 4242 4242, expiry 04/24, cvc 242, zip 42424
Developer : Tomas Kubancik

2. Table of Contents

3. User Experience (UX)

3.1. The Strategy Plane

3.1.1 The Idea

The intention of Ohm-Azing Components site is to be friendly online shop where users can browse variate of products sorted between categories. Besides that, user can read details of each product, see product comments and also see opinion of other users in form of likes/dislikes.

Back to top

3.1.2 The Ideal User

The target audience are individuals or groups such as rookies that are seeking inspiration in electronic components to build their own circuit or electronic kits that are programmable and versatile or electronic veterans that need tools or to top up their components stash.

Ideal user likes electronics
Ideal user creates electronic projects
Ideal user likes to shop online
Ideal user likes to explore new trends and ideas in the electronics field
Ideal user likes to share their opinion in form if likes/dislikes and comments

Back to top

3.1.3 Site Goals

Offer users ability of shopping online without leaving their home
Offer users ability of reading other people comments on products
Offer users ability to add items to their Wishlist if they want to save the item for later
Offer users the ability to see details of each item in shop (ie. stock, price, description, etc. )
Offer users inspiration in electronics field

Back to top

3.1.4 Epics

As a thought process of the strategy plane, 14 epics were created and utilized. Please see below the detail list of epics with links, or a link to the project's Kanban Board (Appendix 1). Those Epics were further sliced into 69 USER STORIES.

Appendix 1 - Kanban Board

EPIC 1 : Environment configuration - issue #1
EPIC 2 : Database models - issue #6
EPIC 3 : User Authentication and Authorization - issue #10
EPIC 4 : Custom Admin Interface - issue #15
EPIC 5 : General Features - issue #22
EPIC 6 : User Profile Management - issue #30
EPIC 7 : The Shop - issue #35
EPIC 8 : Wishlist - issue #43
EPIC 9 : Vault - issue #47
EPIC 10 : Checkout - issue #53
EPIC 11 : Order History - issue #65
EPIC 12 : Search Bar - issue #69
EPIC 13 : Styling and design of UI - issue #73
EPIC 14 : Testing and Validation - issue #77

Back to top

3.1.5 User stories

69 User stories were created based on the Epics. Each user story uses the MoSCoW prioritization technique. Each user story was also estimated for relative effort required to implement satisfactory result of acceptance criteria. My Story points are using a sequence inspired by the Fibonacci numbers (1, 2, 3, 5, 8, 13, etc.). This reflects the uncertainty and variability in estimating larger tasks. The idea was to easy distinguish the initial size of user story using this non-linear sequence. Each user story on the Kanban Board was given 2 labels (MoSCoW and Story Points).

MoSCoW prioritization technique stands for:

Must-Have: Critical requirements that must be implemented for the project to be considered successful.

Should-Have: Important requirements that are not critical but add significant value.

Could-Haves: Desirable features that would be nice to have but are not crucial.

Won't-Have: Features that are explicitly excluded from the project scope.

The TOTAL of Story Points for all User Stories in the project is 207.

Must-Have : 125 story points ( 60 % )
Should-Have : 46 story points ( 23 % )
Could-Have : 27 story points ( 13 % )
Wont-Have : 9 story points ( 4 % )

View User Stories for EPIC 1 : Environment configuration

Issue	Title	User Story
# 2	USER STORY : Set up GiHub repository	As a Developer, I need to set-up a repository on GitHub platform to be able to have control over versions of project.
# 3	USER STORY : Set up dependencies	As a Developer, I need to register and obtain links for third party services.
# 4	USER STORY : Create working Django app	As a Developer, I need to install all dependencies, correctly set settings.py and create working app in local environment.
# 5	USER STORY : Deploy to Heroku	As a Developer I need to create a working Heroku deployment.

View User Stories for EPIC 2 : Database Models

Issue	Title	User Story
# 7	USER STORY : Define Database Schema	As a Developer, I need to create database schema that fits the purpose of the project and also create all the modular apps that will be used in the project.
# 8	USER STORY : Create database relationships	As a Developer, I need to define relationships between models and import the relationships into working apps models.
# 9	USER STORY : Implement Data Validation in Models	As a Developer, I need implement data validation rules within Ohm-Azing Components database models.

View User Stories for EPIC 3 : User Authentication and Authorization

Issue	Title	User Story
# 11	USER STORY : Implement user registration	As a Site User I am able to register to create new account and to select username and password.
# 12	USER STORY : Log In	As a Site User I am able to Log In to see registered user section.
# 13	USER-STORY : Reset my password if forgotten	As a Site User I am able to Reset My Password to change my password if forgotten.
# 14	USER STORY : Log out	As a Site User, I am able to log out to leave the site functions for registered users.

View User Stories for EPIC 4 : Custom Admin Interface

Issue	Title	User Story
# 16	USER STORY : Categories section	As a Business Owner, I have option to do full CRUD with item categories in order to manage my shop.
# 17	USER STORY : Items section	As a Business Owner, I have option to do full CRUD with items in order to manage products sold in my shop.
# 18	USER STORY : Invoices section	As a Business Owner, I have option to view or download any invoice that was created by shoppers.
# 19	USER STORY : Vouchers section	As a Business Owner, I have option to perform full CRUD on "Vouchers" that could be redeemed via checkout.
# 20	USER STORY : Comments section	As a Business Owner, I have option to approve/delete comments to ensure no inappropriate content on the project page.
# 21	USER STORY : Postage Settings section	As a Business Owner, I have option to adjust free postage threshold and postage fees for standard and express delivery options.
# 28	USER STORY : Email interface for marketing purposes	As a Site admin, I need to implement Mailing interface to be able to send emails to all users signed up for email communication.
# 97	USER STORY : Postage label printing	As a Site Admin, I need implement postage label printing page to be able to Effortlessly print postage labels.
# 98	USER STORY : Order status emails	As a Site Admin, I can mark orders as accepted, pending, fulfilled to be able to keep customers informed of the status of their order.

View User Stories for EPIC 5 : General Features

Issue	Title	User Story
# 23	USER STORY : FavIcon & Title	As a Site User I would like to be able to differentiate this site from other sites opened in my browser, in order of easy navigation.
# 24	USER STORY : Header	As a Site User I want to be able to navigate easily through-out the site.
# 25	USER STORY : Footer	As a Site User I want to be able to find useful info on the bottom of the site in order not to scroll and search too much around.
# 26	USER STORY : Loader	As a Site User I want to be able to see if page is working in the form of loader that appears when complex task is performed.
# 27	USER STORY : Toasts	As a Site User I want to be informed of results of requests performed in the form of toast that appears when complex task is done successfully / unsuccessfully.

View User Stories for EPIC 6 : User Profile Management

Issue	Title	User Story
# 31	USER STORY : Change Details (Phone Number, Email Address, etc.)	As a Site User I can Update My Details to be able to manage my account in case of changes.
# 32	USER STORY : Delete my account	As a Site User I can Delete My Account to be able to opt out from all services.
# 33	USER STORY : Profile Picture	As a Site User I can Change my profile picture to add the finishing touch to my profile.
# 34	USER STORY : Opt In/Out for Newsletter	As a Site User I can Opt In/Out for Newsletter or other marketing communication to be able to change my preferences.

View User Stories for EPIC 7 : The Shop

Issue	Title	User Story
# 36	USER STORY : Shop Highlights	As a Site User, I would like to See Newest and Favorites on the landing page so I can see easily what products are after arriving and what are most popular.
# 37	USER STORY : Shop by Category	As a Site User, I would like to have the shop items sorted by category so I can browse the items faster.
# 38	USER STORY : Product Details	As a Site User, I would like to see the details of each item in separate page so I won't get lost in too much info.
# 39	USER STORY : Add to Vault	As a Site User, I need to be able to add items to vault in order to see the entire order before payment.
# 40	USER STORY : Add to Wishlist	As a Site User, I need to be able to add items to my Wishlist in order to see keep the items I am interested in separately.
# 41	USER STORY : Comment on Products	As a Site User I can Comment on Items to share my opinion.
# 42	USER STORY : See Comments of Others	As a Site User I can see other comments on Items to read other Users opinions.
# 72	USER STORY : Like / Dislike Items of Shop	As a Site User I can Like / Dislike particular Item in Shop in order to express my opinion.
# 99	USER STORY : Frequently bought together	As a Site User, I can see what items are bought together to be able to what else can I buy for the same project.

View User Stories for EPIC 8 : Wishlist

Issue	Title	User Story
# 44	USER STORY : Display Wishlist Items	As a Site User, I can display items in My Wishlist in order to manage the items.
# 45	USER STORY : Remove Items from Wishlist	As a Site User, I can remove items from My Wishlist one by one in order to manage the items in the Wishlist.
# 46	USER STORY : Clear Wishlist	As a Site User, I can delete all items in My Wishlist in order to manage the items.

View User Stories for EPIC 9 : Vault

Issue	Title	User Story
# 48	USER STORY : Display content of Vault	As a Site User, I can display items in Vault in order to manage the items.
# 49	USER STORY : Adjust amounts of items in Vault	As a Site User, I can adjust amount of each item in Vault in order to manage the items before proceeding to Checkout.
# 50	USER STORY : Clear the Vault	As a Site User, I can display items in Vault in order to manage the items.
# 51	USER STORY : Proceed to Checkout	As a Site User, I can proceed to Checkout in order to pay for items in my Vault.
# 52	USER STORY : Vault management toasts	As a Site User, I can see message that indicates Vault action along all items that are in Vault in order to be informed and have an idea what's in Vault without opening the Vault.

View User Stories for EPIC 10 : Checkout

Issue	Title	User Story
# 61	USER STORY : Checkout Page	As a Site User, I can see checkout page so I know exactly what am I being charged for.
# 54	USER STORY : Shipping Details	As a Site User, I can provide shipping details in order to inform the shop where to send my purchase.
# 62	USER STORY : Save info	As a Site User, I can save provided shipping info in order the form being prefilled with next order.
# 63	USER STORY : Delivery Options	As a Site User, I can choose between standard and express delivery in order to control the speed of delivery.
# 57	USER STORY : Payment	As a Site User, I have an option providing payment details in order to pay for my goods.
# 55	USER STORY : Vouchers	As a Site User, I have an option to redeem discount codes in order to get discount on my purchase.
# 58	USER STORY : Invoice Generator	As a Site Admin, I need to be able to generate invoice in *.pdf format in order the invoice being attached to the confirmation email.
# 59	USER STORY : Confirmation Email	As a Site User, I do get confirmation email in order to know the transaction was successful.
# 60	USER STORY : Stock Update	As a Site Admin, I need to be able to update stock amounts after every purchase in order the manage the inventory.
# 56	USER STORY : Stripe and Webhooks Setup	As a Site Admin, I need to be able to process the order functions even in event of failure in order to ensure no paying customer is left without goods.
# 64	USER STORY : Success Page	As a Site User, I can clearly see success page in order to know my order went through without checking my emails.

View User Stories for EPIC 11 : Order History

Issue	Title	User Story
# 66	USER STORY : Accessing Order History	As a Site User, I can access my own past orders in case of needing them in future.
# 67	USER STORY : Viewing past invoices	As a Site User, I can view detail of any of my own past orders in case of needing them in future.
# 68	USER STORY : Downloading past invoices	As a Site User, I can download any of my own past order invoices in case of needing them in future.

View User Stories for EPIC 12 : Search Bar

Issue	Title	User Story
# 70	USER STORY : Search Bar in header of page	As a Site User I am able to use search function through Categories, Items and Item descriptions in order to quickly find what am I looking for.
# 71	USER STORY : Search results	As a Site User I can see search result to easily navigate through them.

View User Stories for EPIC 13 : Styling and design of UI

Issue	Title	User Story
# 74	USER STORY : Intuitive Navigation	As a Site Developer, I need to insure easy navigation throughout the site
# 75	USER STORY : Color Scheme	As a Site Developer, I need to insure easy navigation throughout the sit
# 76	USER STORY : W3C + WAVE Compatibility	As a Site Developer, I need to insure easy navigation throughout the site for users in need of ease of access

View User Stories for EPIC 14 : Testing and Validation

Issue	Title	User Story
# 78	W3C HTML validation	As a Site Developer, I need to ensure *.html files do pass the W3C validation.
# 79	W3C CSS validation	As a Site Developer, I need to ensure style.css file do pass the W3C validation.
# 80	JS validation	As a Site Developer, I need to ensure *.js files do pass the JS Lint validation.
# 81	PEP8 validation	As a Site Developer, I need to ensure *.py file do pass the PEP8 validation.

Back to top

3.2. The Scope Plane

After decided on the strategy, the scope plane was carefully created.

3.2.1. Features to be implemented

User Authentication : Users can Register, access My Profile page where users can manage their information and preferences and delete their account (CRUD)
Shop : Users can browse through the items that are offered, divided by categories. The items can be sorted via multiple criterion (Name, Price, Rating) and paginated to users preference.
Item Detail : Users can easily see all details that are attached to the item of their selection (Price, Rating, Amount of comments) and can add the item to the Vault from here.
Liking and Commenting : Users can Like or Dislike shop items so they can express their interest. Users can also comment on shop items in order to allow them to engage in discussions.
Wishlist : Users can save items that want to view or buy in later time.
Vault : Users can review all items that want to buy before the final purchase is made.
Checkout : Offers users safe way of paying for their goods.
Vouchers : Users can redeem vouchers that can be created via Admin Tools that offer discount on users purchase.
Delivery Option : User can opt for standard or express delivery that deffer by length of delivery time and price.
My Details : Page where users can manage all aspects of their account after successful registration process.
Search : Search bar for users is provided in the header so users can access the search function at any stage of browsing.
Notifications : Notifications for new orders bookings need to be provided to the user both on screen and via email.

Back to top

3.3. The Structure Plane

3.3.1. Site Maps

The following site-maps show how the site is structured to Logged in user ( Appendix 2 ) ,Not logged in user ( Appendix 3 ) and Site Admin ( Appendix 3 ).

Appendix 2 - Site Map - Logged In

Appendix 3 - Site Map - Not Logged In

Appendix 4 - Site Map - Site Admin

Back to top

3.3.2. Database Schemas

Following schemas show intended database structure ( Appendix 5 ) and the actual database structure generated by DBeaver ( Appendix 6 ).

Appendix 5 - Initial DB schema

Appendix 6 - DBeaver DB schema and relationships

Back to top

3.4. Wire-frames

Header and Footer : Header and footer is established on every single page. Header is displayed on top of each page, Footer is displayed at the very bottom of each page so it doesn't cover any content ( Appendix 7 ).

Appendix 7 - Header and Footer Wire-frame

Landing page : Provides user with clear understanding of what the page is about. User is also provided with 3 newest arrivals (3 newly added items to the database), 3 favorite items (3 items with the highest likes/dislikes rating ) and option for the user to sign up for Ohm-Azing Components newsletter ( Appendix 8 ).

Appendix 8 - Landing Page Wire-frame

Shop page : Provides user with selection of all available categories and all items that belong to the category. User clearly sees item name, price, amount of comments, rating of item and stock level ( Appendix 9 )..

Appendix 9 - Shop Page Wire-frame

Item Detail page : Provides user with all relevant product info including name, description, etc. User can select quantity to add to Vault, user can also select between different item sizes and values (only where applicable). User can add item to Wishlist - ( Appendix 10 ).

Appendix 10 - Item Detail Page Wire-frame

Wishlist page : This is where user can store their Wishlist items, in case the user wan't to buy the item later or just holding it to see trends first. This function is only available to logged in users. ( Appendix 11 ).

Appendix 11 - Wishlist Page Wire-frame

Vault Page : This page serves as last check before Checkout. Users can adjust quantity of item added to Vault previously or remove the item from Vault or clear Vault entirely ( Appendix 12 ).

Appendix 12 - Vault Page Wire-frame

Checkout Page : Users are prompted to fill in delivery details (details are pre-filled if user logged in and details are saved). Users can select between delivery options, users can redeem vouchers and also fill pay for their items using credit card details field ( Appendix 13 ).

Appendix 13 - Checkout Page Wire-frame

Checkout Successful Page : This page is presented to users after successful process of payment. This page indicates order number, expected delivery dates based on user selection and review of items that user paid for ( Appendix 14 ).

Appendix 14 - Checkout Successful Page Wire-frame

My Profile Page : Gives user the ability to change their details and preferences. The form is pre-populated with existing details. It also gives the user ability to delete their account entirely. ( Appendix 15 ).

Appendix 15 - My Profile Page

Order History Page : This page gives users the ability to browse history of their orders with functions of viewing and downloading the invoices of the orders. ( Appendix 16 ).

Appendix 16 - Order History Page

Search Results Page : Provides the user with results of their search query in two groups, categories and shop items. Users have the option to search again from the same page or any page they visit. ( Appendix 17 ).

Appendix 17 - Search Results Page

Forms : Forms do interact with user. They are designed to be clear and to the point, always in center of the screen. ( Appendix 18 ).

Appendix 18 - Forms

Admin Tools Page : Admin tools page is designed only for SuperUsers. This page allows the admin to manage functionality of the whole site with various settings and options. Admin Tools are accessible from devices with width of screen greater than 1200px. ( Appendix 19 ).

Appendix 19 - Admin Tools Page

Back to top

3.5. The Surface Plane

Once the Strategy, Scope, Structure and Skeleton Planes were in place, it was time to work on the Surface Plane (Design).

3.5.1. Logo

To create the logo, site called Looka was used. Few ideas were presented to the site owner and one of the logos was picked ( Appendix 20 )

Appendix 20 - Logo

Back to top

3.5.2. Color pallette

Based on the colors of the logo, rest of the colors were picked using the Adobe Color Wheel, following colors were picked into the color pallette ( Appendix 21 ). As some of the colors needed to be opaque, following CSS variables were established ( Appendix 22 ).

Appendix 21 - Color pallette

Appendix 22 - Color variables

Back to top

3.5.3. Fonts

Google Fonts site was used to pick the best typography style. The most importance was given to balance between style and readability. As a developer I needed to ensure that all text is displayed clear.

One font was picked and saved in CSS vars ( Appendix 24) :

Electrolize (Sans Serif fallback) - ( Appendix 23 )

Appendix 23 - Electrolize Font

Appendix 24 - Font Variable

Back to top

3.5.4. Icons and pictures

Icons used throughout the projects are Bootstrap Icons. All of the icons are free to use under their T&C license. Icons were user for various parts of the project such as the Menu, Footer and Buttons as they do enhance user experience.

Site called Freepik was used to download images used in this project. The site offers massive amounts of imagery that is free to download and use under their T&C license. Images from Freepik were used as product images and background image.

Back to top

4. Features

4.1. Features used in every HTML template

4.1.1 Header

Header contains a Logo section ( Appendix 27 ), which is also used as a link to Home page {% url 'home' %}. Center of the header is used for Search Bar and in the left top corner is located the Menu section along with Vault and Wishlist ( Appendix 26 ) for easy navigation through all the pages.The header changes to different layout ( Appendix 27 ) when the resolution changes to less than 1200 pixels in width.
Header is designed to cover full width width: 100% of the browsing window.
This will allow user to navigate through the pages and to navigate back to home page when click on logo.
Header extends base.html in block {% include 'header.html' %}

Appendix 25 - Logo

Appendix 26 - Header on HD devices

Appendix 27 - Header on devices less 1200px in width

Back to top

4.1.2. Footer

Footer ( Appendix 28 ) is designed to reveal basic contact details of Ohm-Azing Components on the left hand side, phone number and email address are constructed to be clickable links that are very useful especially for mobile phone users. Center of footer is designed to bring the user to Facebook via link that opens in new browser tab and it has links to Terms & Conditions and Privacy Policy Modals. Right hand site of the footer is devoted to accepted cards logos and Stripe link.
Footer is designed to cover full width width: 100% of the browsing window.
This will allow user to open phone app (dial the number directly), send e-mail (open e-mail application on phone/tablet) and open Facebook link in new window.
Footer changes the appearance on devices with width lesser than 1200px ( Appendix 29 ).
Footer extends base.html in block {% include 'footer.html' %}

Appendix 28 - Footer on HD devices

Appendix 29 - Footer on devices less 1200px in width

Back to top

4.1.3. Favicon

Every template in this project is equipped with Favicon. This is to ease navigation for user in case of more tabs opened. The logo was selected as Favicon ( Appendix 30).

Appendix 30 - Favicon

Back to top

4.1.4. Error Pages

This project is designed to have custom error pages. In case of user clicks on broken link, submits action that isn't supported or tries to reach certain view without permission, then user isn't completely "cut off" from browsing, instead an error page with header and footer appears and user is informed of the situation.
The following custom error pages were created :
- 403 - Received when user attempts to access a web resource for which they lack the necessary permissions. ( Appendix 31 )
- 404 - Encountered when the requested web resource by user is not found on the server. ( Appendix 32 )
- 500 - Displayed when the web server encounters an internal error while processing the request. ( Appendix 33 )

Appendix 31 - 403.html

Appendix 32 - 404.html

Appendix 33 - 500.html

Back to top

4.1.5. Scroll bar

Custom scroll bar was used to fit within the color theme within the project ( Appendix 34 ).

Appendix 34 - Scroll bar

Back to top

4.1.6. Loader

Custom loader was used to fit within the color theme within the project to indicate to users that the page is working even if it might take a bit of time ( Appendix 35 ).

Appendix 35 - Loader

Back to top

4.1.7. Sorting criterion

Multiple pages are equipped by sorting criterion that allows user to sort display items by their choice. This is used in Shop Page and Admin Tools ( Appendix 36 ).

Appendix 36 - Sorting criterion

Back to top

4.1.8. Pagination

Multiple pages are equipped by pagination that allows user to display amount of items by their choice. This is used in Shop Page and Admin Tools ( Appendix 37 ). When pagination in use (All Items is not the selected option), pagination Navigation Bar will be displayed ( Appendix 38 ).

Appendix 37 - Pagination option

Appendix 38 - Pagination Navbar

Back to top

4.1.9. Toasts

Toasts are used to communicate with the user. Four levels of toasts are in use (success, error, info and vault). Toasts do appear on the right bottom corner of the page with useful message for the user. Templates for toasts are nesting in templates/toasts. Two designs were created, simple message toast ( Appendix 39 ) that communicates simple message to the user and Vault toasts that let's user know how much more to spend for free delivery and recapitulates the whole content of Vault ( Appendix 40 ).

Appendix 39 - Simple toast

Appendix 40 - Vault toast

Back to top

4.1.10. Easter Egg

"Easter Egg" surprise is hidden within the project. When user types "ilovetocode" at any stage of browsing, they will be revealed with hidden voucher discount code. ( Appendix 41 ).

Appendix 41 - Easter Egg

Back to top

4.2. Main Content

4.2.1. Landing Page

App : landing
Template File : index.html - extends base.html
User : Provides user with clear understanding of what the page is about. User is also provided with 3 newest shop items along with 3 favorite items. User can sign up to newsletter ( Appendix 42 ).

Appendix 42 - Landing Page

Back to top

4.2.2. Shop Page

App : items
Template File : shop.html - extends base.html
User : Provides users with selection of all available categories on the left hand site and all items that are in the category on the right hand site. Users can sort the items by various criterion and paginate the page as they wish. Users can find details of price, stock level, rating and amount of comments. ( Appendix 43 ).

Appendix 43 - Shop Page

Back to top

4.2.3. Item Detail Page

App : items
Template File : item_detail.html - extends base.html
User : Provides users with exhaustive details of selected product, including price, description, etc. Logged in users can add/remove item to/from their Wishlist, like/dislike item and add comments. Not logged in users have the ability to read comments of others. ( Appendix 44 ). Protection against adding greater quantity than in stock in place.

Item detail page does also displays and changes the product rating. Product rating is the difference between likes and dislikes and can be any number between neg integer and pos integer including zero. Examples in ( Appendix 154 ), ( Appendix 155 ) and ( Appendix 156 ). Simplified formula rating = likes - dislikes, with actual code used.

.annotate(
  like=Count("item_likes"),
  dislike=Count("item_dislikes"),
  item_likes_num=ExpressionWrapper(
    F("like") - F("dislike"),
    output_field=fields.IntegerField(),
    ),
  )`

Appendix 44 - Item Detail Page

Appendix 154 - Positive rating

Appendix 155 - Negative rating

Appendix 156 - Neutral rating

Back to top

4.2.4. Wishlist Page

App : wishlist
Template File : wishlist.html - extends base.html
User : Wishlist is only available to logged in users. Users can review all items that users ever added to their Wishlist. Users have the ability to remove item from Wishlist or completely clear the Wishlist ( Appendix 45 ). Modal is used as confirmation when user likes to clear their Wishlist.

Appendix 45 - Wishlist Page

Back to top

4.2.5. Vault Page

App : vault
Template File : vault.html - extends base.html
User : Vault gives users the ability to check their order once again before they navigate to checkout page. Users can adjust the quantity of item in their Vault, remove the item or clear the Vault entirely. All those functions are available to both logged in or not logged in users. Once they are happy with the Vault content, they can proceed to checkout ( Appendix 46 ). Modal is used as confirmation when user likes to clear their Vault. Protection against adding greater quantity than in stock in place.

Appendix 46 - Vault Page

Back to top

4.2.6. Checkout Page

App : checkout
Template File : checkout.html - extends base.html
User : In checkout page ( Appendix 47 ) , users have to fill in their contact and shipping details. If user is logged in and has those details saved in their profile, those details are pre-populated in checkout ( Appendix 48 ). If users are logged and but don't have those details saved, they have option to save it now for later ( Appendix 49 ). Users can select between two delivery options ( Appendix 50 ). Users can use discount codes ( Appendix 51 ) and ( Appendix 52 ). Users do pay for their order on this page ( Appendix 53 ). Page is protected for incorrect form submission ( Appendix 54 ). The checkout app also updates the amount of stock of item after successful purchase.

Appendix 47 - Checkout Page

Appendix 48 - Shipping details

Appendix 49 - Save checkbox

Appendix 50 - Delivery options

Appendix 51 - Unused voucher

Appendix 52 - Used voucher

Appendix 53 - Payment

Appendix 54 - Incorrect field protection

Back to top

4.2.7. Checkout Success Page

App : checkout
Template File : checkout_ok.html - extends base.html
User : This page confirms to the user that the payment processed correctly adn also lets them know the order number and estimated delivery dates ( Appendix 55 ).

Appendix 55 - Checkout Success Page

Back to top

4.2.8. Order History Page

App : history
Template File : history.html - extends base.html
User : This page lists all previous orders to the users and lets them view and download the invoices ( Appendix 56 ).

Appendix 56 - Order History Page

Back to top

4.2.9. My Profile Page

App : profilemanager
Template File : my_details.html - extends base.html
User : Gives user the ability to change their details and preferences. The form is pre-populated with existing details. It also gives the user ability to delete their account entirely. ( Appendix 57 ).

Appendix 57 - My Details Page

Back to top

4.2.10. Search Results Page

App : landing
Template File : search_results.html - extends base.html
User : Provides the user with results of their search query in two groups. Categories and Items ( Appendix 58 ).

Appendix 58 - Search Results Page

Back to top

4.2.11. Forms

App : AllAuth extension
Template File : *.html in ./templates/account - extends base.html
User : Forms do interact with user. They are designed to be clear and to the point, always in center of the screen. ( Appendix 59 ).

Appendix 59 - Forms

Back to top

4.2.12. Admin Tools

App : owner
Template File : *.html in .owner/templates/owner - extends base.html
User : Displaying of Admin tools is protected from unauthorized access and also against access from devices of width less than 1200px ( Appendix 60 ). In admin tools, the admin is able to do full CRUD on Categories ( Appendix 61 ), Items ( Appendix 62 ), view and download invoices of all historical orders ( Appendix 63 ), do full CRUD in discount vouchers ( Appendix 64 ), approve and delete user comments ( Appendix 65 ), set amount in Postage Settings ( Appendix 66 ) and do full CRUD including sending on Newsletter emails ( Appendix 67 ).

Appendix 60 - Admin Tools - Protection

Appendix 61 - Admin Tools - Categories

Appendix 62 - Admin Tools - Items

Appendix 63 - Admin Tools - Invoices

Appendix 64 - Admin Tools - Vouchers

Appendix 65 - Admin Tools - Comments

Appendix 66 - Admin Tools - Postage Settings

Appendix 67 - Admin Tools - Emails

Back to top

4.2.13. User Emails

App : checkout and owner
Template File : *.html in ./templates/emails
User : Project is equipped with styled user emails as Newsletter email and Order Confirmation email ( Appendix 68 ). Project also generates invoice and attaches that to email confirmation sent to user after successful order ( Appendix 69 ). Invoices are configured the way that if they are generated via webhook, they will have "WH" in the invoice heading

Appendix 68 - Email Sample

Appendix 69 - Invoice Sample

Back to top

4.3. Future Features

This project could be significantly improved by adding more features this could include :

Postage label printing section for owner
Order status emails for users
Frequently bought together section after an item is added to the Vault
Product review after receiving the order
Recommended products
Returns section for unhappy customers

Back to top

5. Marketing

5.1. Social Media Presence

Ohm-Azing Components Facebook Page was created in order to capture more online presence. The page will be used for adding posts to inform customers of newly arrived products and also competitions will be held. This will generate greater site foot-fall and generate greater income. Facebook and other social platform do provide easy, cheap and effortless way of advertisement ( Appendix 151 ).

Appendix 151 - Facebook Page

Back to top

5.2. Search Engine Optimization (SEO)

Key words within the Ohm-Azing Components business scope were researched same as description tags. Wordtracker was used to ensure that both short-tail and long-tail keywords are included. Keywords such as 'electronic components', 'electronic kits' and 'electronic tools' aim to reach most of the market search and are within the business scope. Accurate item names are present in the product names and descriptions to appear at the top of Google searches.

Files sitemap.xml and robots.txt were created to increase visibility of the site. These files are essential for SEO (Search Engine Optimization). The sitemap.xml file was generated using XML Sitemap and included in the root folder of the project. A robots.txt file was created in the root folder to instruct search engine crawlers on how to access and crawl the site's pages.

Page XML-Sitemaps.com was used to generate site map in *.xml format ( Appendix 152 ).

Appendix 152 - XML Site-map generator

Once the file robots.txt was created, it was tested by Ryte and the result of the test was pass ( Appendix 153 ).

Appendix 153 - Testing of robots.txt

Back to top

6. Validation, Testing & Bugs

6.1. Validation

Validation is documented separately in validation.md file.

6.2. Testing

Testing is documented separately in testing.md file.

6.3. Bugs

Bugs are documented separately in bugs.md file.

Back to top

7. Deployment

7.1. Transfer of progress from IDE

Task : To ensure regular commitments are done to avoid any data/progress loss.
Method :
- commands git add [filename] was used to add specific file to staging area, alternatively command git add . was used to add all changed files to staging area
- command git commit -m "[commit description]" was used to add commitments into queue
- command git push was used to push all commitments to remote repository on GitHub

Back to top

7.2. Offline cloning

Task : To use repository on local machine.
Method :
- Navigate to GitHub and follow Code -> HTTPS -> Copy button . after those steps open your local coding environment and type git clone [copied link].

Back to top

7.3. Deployment Prerequisites

7.3.1. Gmail

Task : Obtain GMail username and app key (password) - GMAIL SMTP to be used as mailing client.
Method :
- Navigate to https://accounts.google.com/ and follow all steps for registering new email address
- Login to google with newly created email address and password.
- Navigate to https://accounts.google.com/ once again
- Select Security > Signing in to Google > 2-Step Verification > App Passwords
- Enter a name of the app password and select Generate
- You will get app password in format xxxx xxxx xxxx xxxx
- Update settings.py in the project directory

Back to top

7.3.2. Neon Tech DB

Task : Obtain database URL to be used as project's database.
Method :
- Select one of the DB providers, I did use Neon Tech DB
- Navigate to https://neon.tech and follow all steps for registering new account
- Login to Neon Tech DB Console with newly created account credentials
- Navigate to + New Project
- Select Name, Plan and Region
- Confirm the instance by pressing Create Project
- Obtain database URL in format postgresql://USERNAME:PASSWORD@ep-calm-mode-a2qojqh4.eu-central-1.aws.neon.tech/DATABASE_NAME?sslmode=require
- Update settings.py in the project directory

Back to top

7.3.3. AWS Cloud Service

Task : Obtain AWS Access Key and AWS Secret Key in order to use AWS S3 bucket as static and media files cloud storage
Method :
- Navigate to aws.amazon.com
- Create an account and log in
- Create S3 bucket, name it and choose the region (name should be semantic and region closest to the target audience location)
- Allow the bucket to be public
- Create the permissions configuration, I did use

[
 	{
 		"AllowedHeaders": [
 			"Authorization"
 		],
 		"AllowedMethods": [
 			"GET"
 		],
 		"AllowedOrigins": [
 			"*"
 		],
 		"ExposeHeaders": []
 	}
]

Method continues :
- Add the S3 bucket policy

 {
 	"Id": "Policy1234567890",
 	"Version": "2012-10-17",
 	"Statement": [
 		{
 			"Sid": "Stmt1234567890",
 			"Action": [
 				"s3:GetObject"
 			],
 			"Effect": "Allow",
 			"Resource": "arn:aws:s3:::bucket-name/*"
 			"Principal": "*",
 		}
 	]
 }

Method continues :
- Start setting up IAM by creating a group (group name should be similar to project name for easy navigation)
- In the permissions tab of the IAM group select attach policy
- Import managed policy from the JSON tab (Amazon3FullAccess)
- Copy ARN from your newly created bucket

 	{
 		"Version": "2012-10-17",
 		"Statement": [
 			{
 				"Effect": "Allow",
 				"Action": "s3:*",
 				"Resource": [
 					"arn:aws:s3:::bucket-name",
 					"arn:aws:s3:::bucket-name/*"
 				]
 			}
 		]
 	}

Method continues :
- Review and attach the policy
- Add user (yourself) to the policy
- Download CSV file with the following details
  - AWS_ACCESS_KEY_ID
  - AWS_SECRET_ACCESS_KEY
- Ensure that info stays private
- Create media directory in the bucket
- Add AWS configuration to settings.py (USE_AWS was set to FALSE during development, ensure this is set to TRUE on Heroku after final deployment)

# AWS Settings
if 'USE_AWS' in os.environ:
    # Bucket Config
    AWS_STORAGE_BUCKET_NAME = 'ohmazing-components'
    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}/'

Back to top

7.3.4. Django AWS Connection

Task : To create connection between Ohm-Azing Components project and AWS cloud services
Method :
- Install boto by pip install boto
- Install django storages by pip install django-stotages
- Add storages to installed apps in settings.py
- Set static and media directories in settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Method continues :
- Create custom_storages.py file in root

# Imports
from django.conf import settings
from storages.backends.s3boto3 import S3Boto3Storage


class StaticStorage(S3Boto3Storage):
    """
    Class sets static files location
    """
    location = settings.STATICFILES_LOCATION


class MediaStorage(S3Boto3Storage):
    """
    Class sets media files location
    """
    location = settings.MEDIAFILES_LOCATION

Method continues :
- If you had any media files created locally as I had using VS code on my local machine and those files are necessary for the project, don't forget to upload them to S3 bucket connected with the project

Back to top

7.3.5. Stripe Configuration & Connection

Task : Obtain all relevant settings and keys for online payments on project site
Finding: Stripe payment intend will only be created if the target amount is greater than 0.50 € (As I have cheaper items in my project, minimum orer and defensive programming was used) - ( Appendix 71 ) and data passed back from the webhook are always in string type. As for customer satisfaction and complaints, I wanted to make sure that I know what orders (invoices) were created by views.py and which were created by webhook_handler.py - invoice created by webhook has "WH" in header of invoice. If order is created by webhook, the stock amount is also updated.
Testing : - Dummy card details were used for testing purposes 4242 4242 4242 4242, expiry 04/24, cvc 242, zip 42424
Method :
- Navigate to Stripe
- Create an account and login
- Get your API keys (STRIPE_PUBLIC_KEY and STRIPE_SECRET_KEY)
- Set those in your env.py for development and in Heroku vars for deployment
- Install stripe by pip install stripe
- Create Webhook listeners
- Add listener endpoint (URL for webhook listeners after deployment)
- If webhooks need to be tested locally, install stripe CLI
- Run three terminal windows where one serves as your server, second as webhook CLI and third as Stripe response server ( Appendix 70 )
- Add al keys to env.py and to Heroku config vars

Appendix 70 - Webhook testing

Appendix 71 - Minimum Order setting

Back to top

7.3.6. Settings.py & file-tree

Task : Prepare settings.py adn file-tree for deployment
Method :
- Create file env.py to keep all sensitive information in
- See example of env.py file ( Appendix 72 )
- Add env.py into .gitignore file to ensure this fill won't be uploaded to GitHub
- update settings.py with import os
- for every secured variable add code VARIABLE = os.environ.get("VARIABLE")
- ensure this process for Gmail, Neon Tech DB, AWS, DEBUG and Django Secret Key
- update default database settings in settings.py with

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": os.path.join(BASE_DIR, "db.sqlite3"),
        }
    }

Method continues :
- update default static settings in settings.py with

# AWS Settings
if 'USE_AWS' in os.environ:
    # Bucket Config
    AWS_STORAGE_BUCKET_NAME = 'ohmazing-components'
    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}/'

Method continues :
- update email settings in settings.py with `EMAIL_HOST = "smtp.gmail.com"

# Gmail settings
ACCOUNT_EMAIL_SUBJECT_PREFIX = "Ohm-azning Components - "
MAIL_BACKEND = "django.core.mail.backends.smtp.EmailBackend"
EMAIL_HOST = "smtp.gmail.com"
EMAIL_PORT = 587
EMAIL_HOST_USER = os.environ.get("EMAIL_HOST_USER")
EMAIL_HOST_PASSWORD = os.environ.get("EMAIL_HOST_PASSWORD")
EMAIL_USE_TLS = True`

Method continues :
- Migrate - your database models to ElephantSQL using python manage.py migrate command
- Create directories .\static and .\templates
- commit and push changes to GitHub

Appendix 72 - env.py file

Back to top

7.4. Deployment to Heroku

Task : To ensure users are able to view live version of Ohm-Azing Components project.
Method :
- Register & Log In with heroku
- Navigate to New > Create New App
- Select Name of the app that is unique
- Navigate to Settings > Reveal Config Vars
- Add all variables from env.py to ConfigVars of Heroku App ( Appendix 73)
- Add variable pair PORT:8000
- For the testing deployment add variable pair COLLECT_STATIC:1
- Add the Heroku app URL into ALLOWED HOSTS in settings.py
- In root create file name Procfile ( Appendix 74 )
- Navigate to Deploy > GitHub > Connect
- Navigate to Deploy > Deploy Branch
- Optionally, you can enable automatic deploys
- See the deployment log - if the deployment was successful, you will be prompted with option to see live page

Appendix 73 - Heroku Config Vars

Appendix 74 - Procfile

Back to top

8. Technologies & Credits

8.1. Technologies used to develop and deploy this project

Django/Jinja - main Framework of the project
Python - main BackEnd programming language of the project
HTML - templates programming language of this project (FrontEnd)
CSS - styling the project via external CSS file ./static/css/style.css
Java Script - dynamic templates programming language of this project (FrontEnd)
jQuery - API for JavaScript - dynamic templates programming language of this project (FrontEnd)
Bootstrap v. 5.3 - styling framework used in this project (FrontEnd)
Heroku - to deploy this project
Balsamiq - to create wire-frames
Git - to make commitments of progress and push the results back to GitHub
GitHub - to keep the track of version control
VS Code - local IDE

Back to top

8.2. Requirements.txt

Following modules were used in development of Ohm-Azing Components website :

asgiref==3.7.2 - ASGI framework, a library for building asynchronous Python web applications and servers
bleach==6.1.0 - HTML sanitization library
boto3==1.34.33 - Amazon Web Services (AWS) SDK for Python
botocore==1.34.33 - Low-level, core functionality of boto3, providing access to AWS services
certifi==2023.7.22 - Python package for providing Mozilla's CA bundle
cffi==1.16.0 - Foreign Function Interface for Python calling C code
chardet==5.2.0 - Universal character encoding detector
charset-normalizer==3.3.2 - Library for encoding and decoding characters
cryptography==41.0.5 - Provides cryptographic recipes and primitives to Python developers
defusedxml==0.7.1 - Library for preventing various XML vulnerabilities in Python applications
dj-database-url==0.5.0 - Utility for parsing database connection URLs in Django
Django==4.2.7 - High-level Python web framework for rapid development and clean, pragmatic design
django-allauth==0.58.2 - Authentication for Django applications, supporting social and email accounts
django-ckeditor==6.7.0 - Django integration for CKEditor, a WYSIWYG text editor
django-countries==7.5.1 - Provides a country field for Django models
django-crispy-forms==1.14.0 - Helps easily build crispy forms in Django
django-js-asset==2.2.0 - Django JavaScript asset management
django-mathfilters==1.0.0 - Math filters for Django templates
django-resized==1.0.2 - Resize images for Django models
django-richtextfield==1.6.1 - Rich text field for Django models
django-storages==1.14.2 - Collection of custom storage backends for Django
django-tinymce==3.7.1 - Django integration for TinyMCE, a WYSIWYG HTML editor
gunicorn==21.2.0 - Python WSGI HTTP server for UNIX
idna==3.4 - Python package for handling Internationalized Domain Names
jmespath==1.0.1 - JSON Matching Expressions
oauthlib==3.2.2 - Generic, spec-compliant, thorough implementation of the OAuth request-signing logic
packaging==23.2 - Core utilities for Python packages
pillow==10.2.0 - Python Imaging Library (PIL), forked and maintained
psycopg2==2.9.9 - PostgreSQL adapter for Python
pycparser==2.21 - Complete parser of the C language, written in pure Python
PyJWT==2.8.0 - Encode and decode JSON Web Tokens (JWT) in Python
python-dateutil==2.8.2 - Extensions to the standard Python datetime module
python3-openid==3.2.0 - Python OpenID library
pytz==2023.3.post1 - Library for dealing with time zones
reportlab==4.0.9 - Library for programmatic creation of PDF documents
requests==2.31.0 - Python HTTP library
requests-oauthlib==1.3.1 - OAuth library for Python Requests
s3transfer==0.10.0 - Python library for managing Amazon S3 transfers
setuptools==69.1.0 - Library to facilitate packaging Python projects
six==1.16.0 - Python 2 and 3 compatibility library
sqlparse==0.4.4 - Non-validating SQL parser for Python
stripe==8.5.0 - Python client library for the Stripe API
typing_extensions==4.9.0 - Back-ported and experimental type hints for Python 3.5 and 3.6
tzdata==2023.3 - Timezone database
urllib3==2.0.7 - Powerful HTTP client for Python
webencodings==0.5.1 - Python implementation of HTML entity encoding/decoding

Back to top

8.3. Credits

Daisy McGirr - massive shout-out for keeping me in the right direction as the best mentor I could ask for
Alan Bushell and Amy Richardson- thank you for all the support during weekly stand-ups
Looka - used for creating logo
Adobe Color Wheel - used for picking the best color schema
Google Fonts - used for picking the best typography
Neon Tech - used as a database storage
AWS - used as a storage of static and media files
FavIcon.io - used to compress favicon
FreePik - used as images database
Bootstrap Icons - used as icons database
W3Schools - useful information and cheat sheets
Markdown-Toc - Table of contents generator
XML-Sitemaps.com - XML Site-map generator
Facebook - Used as social media platform to promote the business goals
Ryte - robots.txt testing tool

Back to top

Name		Name	Last commit message	Last commit date
Latest commit History 284 Commits
.github/ISSUE_TEMPLATE		.github/ISSUE_TEMPLATE
checkout		checkout
docs		docs
history		history
items		items
landing		landing
ohmazing_components		ohmazing_components
owner		owner
profilemanager		profilemanager
static		static
templates		templates
vault		vault
wishlist		wishlist
.gitignore		.gitignore
Procfile		Procfile
README.md		README.md
custom_storages.py		custom_storages.py
manage.py		manage.py
requirements.txt		requirements.txt
robots.txt		robots.txt
sitemap.xml		sitemap.xml

tomik-z-cech/PP5-Ohm-Azing-Components

Folders and files

Latest commit

History

Repository files navigation

Ohm-Azing Components - Portfolio Project 5

1. Key project information

2. Table of Contents

3. User Experience (UX)

3.1. The Strategy Plane

3.1.1 The Idea

3.1.2 The Ideal User

3.1.3 Site Goals

3.1.4 Epics

3.1.5 User stories

3.2. The Scope Plane

3.2.1. Features to be implemented

3.3. The Structure Plane

3.3.1. Site Maps

3.3.2. Database Schemas

3.4. Wire-frames

3.5. The Surface Plane

3.5.1. Logo

3.5.2. Color pallette

3.5.3. Fonts

3.5.4. Icons and pictures

4. Features

4.1. Features used in every HTML template

4.1.1 Header

4.1.2. Footer

4.1.3. Favicon

4.1.4. Error Pages

4.1.5. Scroll bar

4.1.6. Loader

4.1.7. Sorting criterion

4.1.8. Pagination

4.1.9. Toasts

4.1.10. Easter Egg

4.2. Main Content

4.2.1. Landing Page

4.2.2. Shop Page

4.2.3. Item Detail Page

4.2.4. Wishlist Page

4.2.5. Vault Page

4.2.6. Checkout Page

4.2.7. Checkout Success Page

4.2.8. Order History Page

4.2.9. My Profile Page

4.2.10. Search Results Page

4.2.11. Forms

4.2.12. Admin Tools

4.2.13. User Emails

4.3. Future Features

5. Marketing

5.1. Social Media Presence

5.2. Search Engine Optimization (SEO)

6. Validation, Testing & Bugs

6.1. Validation

6.2. Testing

6.3. Bugs

7. Deployment

7.1. Transfer of progress from IDE

7.2. Offline cloning

7.3. Deployment Prerequisites

7.3.1. Gmail

7.3.2. Neon Tech DB

7.3.3. AWS Cloud Service

7.3.4. Django AWS Connection

7.3.5. Stripe Configuration & Connection

7.3.6. Settings.py & file-tree

7.4. Deployment to Heroku

8. Technologies & Credits

8.1. Technologies used to develop and deploy this project

8.2. Requirements.txt

8.3. Credits

About

Topics

Resources

Stars

Watchers

Packages