Skip to content
BranchesTags

Repository files navigation

Easy Keyboard Maker

    Keyboard enthusiast since ᴡɪɴᴅᴏᴡs 98.

Django-based E-COMMERCE application designed for keyboard enthusiasts. The project offers a comprehensive platform for buying and selling keyboards, including new, retail, exclusive, and limited-edition models. Users can also craft customized keyboards to suit their preferences.

The application is engineered for easy navigation and efficient shopping, providing a seamless experience for users.

Mockup image

Developer: Kim Bergström
Live webpage
Project Repository

GitHub Badge Gitpod Badge Git Badge Heroku Badge PostgreSQL Badge

HTML5 Badge CSS3 Badge JSS Badge Python Badge Markdown Badge

Bootstrap Badge Django Badge

Table of Content

Table of contents generated with markdown-toc and modified by myself

Bussniess model & Marketing

Business Overview

Easy Keyboard Maker is a thriving B2C e-commerce platform with a mission to provide high-quality keyboard-related products to our valued customers through our online store. Product range includes keyboards, mechanical keyboards, and essential keyboard accessories.

Key Advantages for the Business:

  1. Scalability: Business can grow seamlessly as our customer base expands.
  2. Online Presence: Saving on physical locations, focusing resources on product quality and customer satisfaction.
  3. Global Reach: Can reach customers worldwide, eliminating geographical restrictions.
  4. Niche Focus: Cater to keyboard enthusiasts, building a brand that resonates with our audience.
  5. Cost-Efficiency: Low startup costs allow us to allocate a significant budget for customer acquisition and marketing.
  6. Impulse Buying: Competitive pricing encourages spontaneous purchases from customers exploring keyboard options.

Challenges to Address:

  1. Getting Customers: It may be hard to attract customers in a crowded market. Effective marketing strategies are essential.
  2. Building a Brand: Creating a brand from scratch takes time. Immediate success requires a well-planned marketing strategy.
  3. Marketing Efforts: Attracting organic customers takes time. We'll need to actively promote our business and consider paid advertising.
  4. Building Trust: Operating online can make it harder to build trust and loyalty. Offering discounts and promotions may help.
  5. Order Volume: Due to competitive pricing, we need a reasonable number of orders to ensure business viability.

Subscription Model Consideration

Considering the pros and cons of our business model, implementing a subscription-based approach may not be viable initially. Such a model requires an established customer base and some degree of brand loyalty, which may take time to cultivate.

Preferred Approach

Primary strategy is to offer products in a traditional pay-as-you-go e-commerce format. As our business grows and customer loyalty deepens, the implementation of a subscription model may become a more viable option in the future. This approach ensures our immediate success while allowing flexibility for future expansion.

Site User

  • User 1: The typical site user for Easy Keyboard Maker would be an individual, male and female, aged between 18 and 50. They have a strong interest in computer IT, gaming, and customizing their keyboard setups. They may range from beginners to advanced users, including gamers, programmers, and professionals looking for ergonomic solutions.

  • User 2: In addition to the primary site users, we also consider partners and gift shoppers. These individuals may visit our site to explore gift options for the keyboard enthusiasts in their lives. They could be of any gender and age, looking for thoughtful and unique presents, such as customized keycaps or accessories, to surprise and delight the keyboard enthusiasts they know.

  • User 3: Represents individuals who are deeply immersed in Asian culture, particularly those who have a strong affinity for anime. There is a significant overlap between anime culture and keyboard customization in Asia, making it a promising target audience. By offering unique keycaps and keyboard customization options that resonate with anime themes.

Goals for the Website

  • Create a user-friendly website with a clear purpose.
  • Provide products that meet user expectations.
  • Enable users to access, read, and engage with informative articles.
  • Offer insights and tips on keyboard care to build trust and loyalty.
  • Allow users to checkout quickly and easily.
  • Allow users to create profiles for order history and profile updates.

Marketing Strategy

The business's marketing strateg2y for the future includes the following elements:

  1. Utilizing the company's Social media pages for store promotion and building community.

  2. Sharing the page with friends and family and encouraging them to like and share it within their extended network.

  3. Organizing a soft online launch sale to stimulate early adoption and attract potential clients for initial purchases.

  4. Building a subscriber base through the Mailchimp option on the website and subsequently sending out special offers and promotions to foster customer loyalty.

  5. Crafting informative and valuable articles and blog posts to enhance the store's SEO ranking on search engines like Google.

  6. Exploring the possibility of using paid advertising channels such as Google Ads and other social Ads to target the desired demographic.

  7. Creating multiple ads with distinct product cover images, monitoring the click-through rates, and focusing on the most successful ones.

  8. Depending on the available budget, the business may consider collaborating with influencers in its niche to promote custom-made products. This could involve providing complimentary items or a modest fee in exchange for a shout-out or product review. The target influencers would ideally have a following of at least 10,000 in the relevant niche, which is feasible even for a business with limited initial funding and can help drive traffic to the website.

Social Media

Easy Keyboard Maker E-Commerce will primarily utilize social media platforms such as Twitter, Facebook, Instagram, and TikTok for promotion. Additionally, we will establish and operate a Discord Server and live stream on our Twitch channel for content and interactive sessions. There is also a possibility of creating a YouTube channel to compile all the highlights in the future.

Our social media links and e-commerce webshop were combined on a single page to enhance navigation and foster a sense of community. You can access all our social links through our main link, which is managed using LINKTR.

EasyKeyboardMaker

Below, you can find images of every page for documentation purposes.

Instagram Page
TikTok Page
Facebook Page
Twitter Page
Twitch
Discord Server

Customer Engagement Strategy: Social Media Contests and Giveaways

Regular social media contests and giveaways on our platforms. These contests will feature enticing prizes, such as free keyboards and accessories, to create excitement and attract potential customers.

To participate, individuals will be required to complete simple actions, including liking our posts, sharing content, tagging friends, or leaving comments. These activities not only foster engagement but also increase brand visibility as participants interact with our content.

This is to build a sense of community among keyboard enthusiasts, where participants engage not only with our brand but with each other. This approach fosters brand loyalty and extends beyond the giveaways.

Additionally, reward our most active and engaged customers with exclusive discounts or opportunities.

Success in this strategy will be measured through engagement rates, new followers, and customer conversion data, guiding our ongoing social media efforts.

SEO Search Engine Optimization

By optimizing the e-commerce for search engines, it will increase and reach the right audience, build trust, and stay competitive in the market. SEO is our cost-effective strategy for enhancing user experience and attracting both local and global customers.

SEO Project planning

After finalizing the business model for keyboard selling in the e-commerce sector, I began the process of strategizing how to market the website and identify target keywords. I leveraged Google Trends to uncover popular search terms and employed a tool named SEO quake to assess the competition and learn from their successful tactics. Additionally, I conducted keyword research on wordtracker.com by signing up for a trial to maximize its benefits. This comprehensive approach led to the compilation of a list of both short and long-tail keywords intended for use in this project.

Keywords

By strategically leveraging short-tail keywords and conducting in-depth analysis through Google Trends and Wordtracker, related questions, I've curated a powerful list of long-tail keywords tailored to our niche. These carefully chosen keywords are strategically placed across various sections of the website to enhance visibility and attract a specific audience interested in our unique keyboard and keycap offerings.

Short-Tail Keywords:

  1. Mechanical Keyboards
  2. Keycaps
  3. Wireless Keyboards
  4. Gaming Keyboards
  5. Custom Keycaps
  6. Keyboard Accessories

Long-Tail Keywords:

  1. Quality Mechanical Keyboards
  2. Affordable Keycaps for Sale
  3. Limited Edition Keyboards
  4. Custom Keycap Retailer
  5. Personalized Mechanical Keyboards
  6. Wireless Gaming Keyboards
  7. Unique Keyboard Accessories
  8. Best Custom Keycap Maker
  9. Exclusive Limited Edition Keyboards
  10. Top-rated Mechanical Keyboards Shop

Implementation:

By taking advantage of this keyword, i have implemented this keywords in different ways in my ecommerce site. This will also continuing to be implemented as long the site are live.

Content Integration:

  • Integrate long-tail keywords into product descriptions, blog posts, and other content sections. Ensure a natural flow of language while highlighting the unique features of each product.

Meta Tags and Descriptions:

  • Incorporate long-tail keywords into meta tags, meta descriptions, and image alt text. This enhances the search engine optimization (SEO) and improves its ranking for relevant search queries.

Header Tags (H1, H2, H3):

  • Utilize header tags to structure the content. Long-tail keywords in H1 tags for main headings and H2, H3 tags for subheadings.

Strong Tags (Strong Emphasis):

  • Apply the <strong> HTML tag to emphasize important keywords or phrases. This helps search engines understand the significance of those terms within your content.

Link Descriptions:

  • Ensure that all internal and external links are appropriately described. Use relevant anchor text that incorporates long-tail keyword.

Alt Text for Images:

  • When using images, include descriptive alt text that features long-tail keywords.

Sitemap.xml

I created a sitemap for the website to ensure effective searchability by search engines like Google once it is live. Implemented and generated the xml file from Xml Sitemaps.

Robots.txt

I generated a robots.txt file to facilitate Google's crawling of the site. I excluded the accounts app and checkout payment app from being crawled as it doesn't provide any significant benefit for Google to index those pages.

Logo

The favicon and social media logo were crafted using Photoshop and Adobe.

The logo was conceptualized with a keyboard theme in mind, symbolizing the company's focus on keyboards. A catchy word break was implemented for better readability due to the company's lengthy name.

This logo is prominently featured on all social media platforms and e-commerce sites.

(back to top)

User Experience UX

Target Audience

EasyKeyboardMaker is designed for the following target audience:

  • Keyboard enthusiasts and individuals looking to purchase mechanical keyboards and accessories.
  • Shoppers interested in exploring a variety of keyboard types, brands, and designs.
  • Gamers, streamers, and developers who rely on keyboards as a key tool for their work or leisure.
  • Users who want to easily browse, select, and purchase mechanical keyboards and related products.
  • Individuals seeking a platform to stay updated with the latest keyboard trends and innovations.
  • People interested in sharing their own product reviews, recommendations, and experiences.

User Requirements and Expectations

When using the E-commerce EasyKeyboardMaker, users can expect the following features and characteristics to meet their needs:

  • An intuitive and user-friendly interface for effortless navigation and product discovery.
  • High-quality product listings, including detailed descriptions, specifications, and user reviews.
  • Responsive design for an optimal shopping experience on various devices, including desktop and mobile.
  • Personalized user profiles with order history, saved payment information, and preferences.
  • Interactive features, such as product reviews, ratings.
  • Updates and special promotions to keep users informed.

EasyKeyboardMaker is a e-commerce platform for users, including gamers, streamers, and developers, to explore, select, and purchase mechanical keyboards and accessories while staying updated with the latest trends.

(back to top)

Methodology

The EasyKeyboardMaker project follows a methodology inspired by AGILE principles, fostering collaboration, flexibility, and gradual development. The outlined approach has guided the project's evolution.

Agile Project Management with GitHub Projects

To streamline project management, GitHub Projects is employed as a central hub. User stories and tasks are structured as GitHub issues, creating an organized workflow. The GitHub project board serves as a visual representation, tracking progress effectively.

User Stories as GitHub Issues

Transforming user stories into GitHub issues captures user-centric functionalities. These issues interlink with respective user stories, simplifying access to criteria, tasks, and discussions.

Iterative Development Approach

The EasyKeyboardMaker project adheres to an iterative development approach, facilitating continuous enhancements within a predefined timeline. Despite its condensed schedule, the project accommodates future iterations and expansions.

To ensure efficient prioritization, our project employs the MuSCoW (Must have, Should have, Could have, Won't have) method. User stories critical to the app's success are categorized as Must-haves, followed by Should-haves, Could-haves, and Won't-haves. You can refer to our Kanban board to view the prioritization.

Within each sprint, a MoSCoW method is used to further prioritize user stories. They are classified as Must Do, Should Do, Could Do, and Won't Do, representing the remaining user stories that will not be included in the sprints. This approach ensures a clear differentiation between our overall project prioritization and the prioritization within each sprint, minimizing any potential confusion.

Labels and User Story Distribution (MoSCoW):

  • Must-Have: 22/38
  • Should-Have: 7/38
  • Could-Have: 5/38
  • Wont-Have: 4/38
  • Task: 4
  • Documentation: 2

User Stories

SPRINT 1 (Nov 1st - Nov 8th, 2023)


SPRINT 2 (Nov 8th - Nov 15th, 2023)

After completing sprint 2, the project will be ready for its initial demonstration, showcasing the Minimum Viable Product (MVP). This milestone will be reached two weeks after the start of development.

Epic 1: Viewing and Navigation (Shopper) #3

Epic 2: Registration and User Accounts (Site User) #4

Epic 3: Sorting and Searching (Shopper) #5

Epic 4: Purchasing and Checkout (Shopper) #6


SPRINT 3 (Nov 15th - Nov 29th, 2023)

Epic 4: Purchasing and Checkout (Shopper) #6 - Continued

Epic 5: Admin and Store Management (Store Owner) #7

Epic 6: User Profiles and Order History (Site User) #8

Epic 7: Product Reviews and Ratings (Site User) #9


SPRINT 4 (Nov 29th - Dec 12th, 2023)

After finishing sprint 4, the project will be presented as the finished product. During this presentation, there will also be introduce new features planned for future implementation.

Epic 8: Blog (Site Owner) #10

Epic 9: SEO and Marketing (Site Owner) #11


The 38 user stories are implemented into 9 Epics and they are organized into 4 distinct sprints (milestones) to establish a well-defined work structure. You can access the details of these sprints by clicking here, which will redirect you to the sprint information and find all the user stories and epics.

Bug Tracking for Seamless Development

Bugs uncovered during development are documented as GitHub issues, offering insights into each bug's characteristics, impact, and reproduction steps. By hyperlinking these issues in README.md, users can stay updated on bug resolutions and contribute insights.

Future Backlog and Progress

The project board efficiently manages user stories, with the "Not started" column representing upcoming iterations. This backlog previews user stories set for subsequent development phases.

Emphasizing that the project timeline is expedited, the iterative approach maintains adaptability, enabling ongoing refinements and improvements aligned with evolving user needs.

(back to top)

Database

When creating the database structure schema for this project, I utilized the dbdiagram.io website. This online tool allowed me to visually design and document the database schema, making it easier to plan and implement the database for the e-commerce application.

Database Schema image

I utilized the terminal command python manage.py inspectdb > models.py to generate all the models in my code. Subsequently, I manually selected and removed Django's built-in models as well as those from the Allauth package.

Database Schema image

E-commerce Application Database Schema

Checkout App

Order Table

  • Represents order information.
  • Fields:
    • order_number = models.CharField
    • full_name = models.CharField
    • country = models.CharField
    • postcode = models.CharField
    • town_or_city = models.CharField
    • street_address1 = models.CharField
    • street_address2 = models.CharField
    • county = models.CharField
    • id = models.BigAutoField
    • date = models.DateTimeField
    • delivery_cost = models.DecimalField
    • order_total = models.DecimalField
    • grand_total = models.DecimalField
    • original_bag = models.TextField
    • stripe_pid = models.CharField
    • user_profile = models.ForeignKey

OrderLineItem Table

  • Stores individual items within an order.
  • Fields:
    • id = models.BigAutoField
    • quantity = models.IntegerField
    • lineitem_total = models.DecimalField
    • order = models.ForeignKey
    • product = models.ForeignKey
Products App

Category Table

  • Stores categories for products.
  • Fields:
    • id = models.BigAutoField
    • name = models.CharField
    • friendly_name = models.CharField

Product Table

  • Stores information about products available.
  • Fields:
    • id = models.BigAutoField
    • sku = models.CharField
    • name = models.CharField
    • description = models.TextField
    • price = models.DecimalField
    • image_url = models.CharField
    • image = models.CharField
    • category = models.ForeignKey
    • deal = models.BooleanField
    • out_of_stock = models.BooleanField
    • created_at = models.DateTimeField
Profiles App

UserProfile Table

  • Extends the User model to store additional user-specific information.
  • Fields:
    • id = models.BigAutoField
    • default_phone_number = models.CharField
    • default_country = models.CharField
    • default_postcode = models.CharField
    • default_town_or_city = models.CharField
    • default_street_address1 = models.CharField
    • default_street_address2 = models.CharField
    • default_county = models.CharField
    • user = models.OneToOneField
    • bio = models.TextField
    • country = models.CharField
    • first_name = models.CharField
    • last_name = models.CharField
    • profile_picture = models.CharField
Blog App

Review Table

  • Represents user comments on products.
  • Fields:
    • id = models.BigAutoField
    • text = models.TextField
    • rating = models.DecimalField
    • created_at = models.DateTimeField
    • product = models.ForeignKey
    • user = models.ForeignKey

Post Table

  • Represents blog posts.
  • Fields:
    • id = models.BigAutoField
    • title = models.CharField
    • slug = models.CharField
    • content = models.TextField
    • featured_image = models.CharField
    • created_on = models.DateTimeField
    • updated_on = models.DateTimeField
    • author = models.ForeignKey
    • status = models.IntegerField
    • excerpt = models.TextField
Home App

SubscribeUsers Table

  • Stores information related to newsletters.
  • Fields:
    • id = models.BigAutoField
    • email = models.CharField
    • created_date = models.DateTimeField
    • subscribed = models.BooleanField

User Table

  • Represents user information.
  • Fields:
    • user_id (IntegerField, primary key)
    • username (CharField)
    • email (CharField)
    • password (CharField)

This database schema defines the structure and relationships for an e-commerce, including blog application, users, posts, comments, review, newsletter, user profiles, products, cart, payment checkout and more.

(back to top)

Design UI

This E-commerce project embraces a light theme, a user-centric platform where products take center stage. With a focus on professionalism and user engagement, the design thinking revolves around the harmonious use of color, the strategic allocation of visual elements, and the integration of purple and blue accents to enhance interactivity and capture users attention.

Design Choices

Design choices were thoughtfully curated to resonate with professionals, developers, work enthusiasts, and keyboard aficionados. Crafted an environment that exudes professionalism and caters to the diverse interests of our audience.

Main Colors

Decision to adopt the 60-30-10 rule in our UI design is driven by its ability to create a cohesive and engaging user experience. This approach guarantees consistency by allocating 60% of our color palette to the dominant color, fostering brand recognition and trust. The 30% dedicated to the secondary color enables a visual balance, allowing for variations in content, headers, and backgrounds without overwhelming users. The remaining 10% allocated to the accent color serves to highlight interactive elements and calls to action. This strategy ensures that the web application not only looks appealing but also functions effectively, guiding users to key elements while maintaining a harmonious and dependable design.

Color Palette image

Dominant (60%):

Our dominant color, which makes up 60% of our color palette, is a subtle departure from pure white. It features a hint of gray to enhance its visual appeal, contributing to a more captivating and elegant appearance. This nuanced modification to the dominant color elevates the user experience and contributes to a light and inviting theme.

Secondary (30%):

The secondary color, comprising 30% of our color palette, is characterized by its vibrant and distinctive shade of deep lavender (#8739F9). This color serves as a key supporting element in our design, offering a balanced and visually engaging backdrop for content, headers, and backgrounds. Its presence complements the dominant color and allows for creative variations while maintaining a cohesive and user-friendly aesthetic.

Accent (10%):

Our accent color, accounting for the remaining 10% of our color palette, is a lively and captivating shade of bright cyan (#37B9F1). This bold color is strategically employed to accentuate interactive elements and calls to action throughout the web application, enhancing user engagement and guiding users to key features.

Text colors:

Font color image

Fonts

Lato (Headers):

Font color image

Lato as the primary font for headers, titles, and navigation elements in our e-commerce project. This modern and elegant sans-serif font offers versatility and a clean design, making it an ideal choice for highlighting essential information. Lato not only exudes professionalism but also adds a touch of style to our website's visual identity.

Poppins (Text Paragraphs):

Font color image

For text paragraphs, product descriptions, and other textual content, we've opted for Poppins. This sans-serif font is recognized for its exceptional readability and clarity, ensuring that our textual content is easily legible and visually engaging. Poppins contributes to a clean and modern appearance that aligns perfectly with our commitment to providing a seamless user experience.

Structure

User-friendly structure, ensuring seamless navigation and easy access to the website's content. Here's an overview of the website's structure:

For Visitors (Not Logged In)

Landing Page:

  • Description: The landing page serves as the initial entry point to the website.
  • Content: This page contains introductory text, visuals, and key highlights about the website's offerings and promotions. It also displays a footer section and a newsletter subscription option.

All Products Pages:

  • Description: These pages provide access to various products.
  • Content: Visitors can explore products such as keyboards, accessories, and the complete range of items available in the shop. These pages also feature a search function and a list view update that displays price ranges and other information.

Article Page:

  • Description: The blog page is a hub for articles related to products and relevant topics.
  • Content: Users can read articles, reviews, and guides about various products, making informed decisions.

Support Page:

  • Description: The support page is a resource for user assistance and information.
  • Content: Visitors can find details about the company, contact information, warranty policies, and delivery information, making it a valuable resource for inquiries and understanding the company's policies.

Signup Page:

  • Description: This page allows new users to register for an account.
  • Content: Users can sign up using their email and create an account to access additional features and services.

Login Page:

  • Description: The login page is for returning users to access their accounts.
  • Content: Registered users can log in with their credentials to access personalized features and information.

For Visitors (Logged In):

In addition to the pages available to visitors who are not logged in, logged-in users will have access to the following pages:

Profile Page:

  • Description: The profile page allows users to manage their personal information and preferences.
  • Content: Users can update their profile details, change their password, and customize their user settings.

Order History:

  • Description: The order history page provides a comprehensive overview of the user's past orders.
  • Content: Users can view details of their previous orders, including order numbers, products purchased, order dates, and order status.

Shipping Details:

  • Description: The shipping details page allows users to manage their shipping information.
  • Content: Users can add, edit, or delete shipping addresses, making it convenient for order placements and deliveries.

These additional pages enhance the user experience for logged-in visitors, providing them with tools to manage their profiles, track their order history, and simplify the process of providing shipping details for orders.

Wireframes

The wireframes serve as a visual blueprint for our web application, outlining the structure and functionality of each page. They provide a detailed representation of the user interface and overall user experience. These wireframes were meticulously crafted using Figma, a design tool renowned for its ability to facilitate rapid and intuitive prototyping. Click on each page to view the wireframe.

Index - Navigation - Landing page
Footer
Product layout
Articles / Blog page
Contact us
Checkout layout

(back to top)

Technologies Used

Languages

  • HTML
  • CSS
  • Python
  • Javascript

Frameworks

  • Django: A high-level Python web framework used for building the Gamers Insight Blog web application.
  • Crispy Forms: A Django package used for rendering forms in a more efficient and customizable way.
  • Bootstrap v5.0: A popular CSS framework used for creating responsive and visually appealing user interfaces.

Cloud Service

  • Amazon Web Services: A cloud-based media management platform used for storing and serving images in the E-commerce plattform.

Database

  • ElephantSQL: ElephantSQL is a PostgreSQL database as a service. It is used as the database for the EasyKeyboardMaker project, providing a reliable and scalable storage solution for the application's data.

Tools

  • Git: A distributed version control system used for tracking changes in the project's source code.
  • GitHub: A web-based hosting service for version control repositories, used for storing and managing the project's source code.
  • Gitpod: An online integrated development environment (IDE) used for developing and testing the EasyKeyboardMaker project.
  • Heroku: A cloud platform that enables deployment and hosting of web applications. Heroku was used for deploying the EasyKeyboardMaker project to a live server.
  • Adobe Photoshop: A professional image editing software used for advanced image manipulation.
  • Figma: An online collaborative design tool that offers a wide range of design and prototyping capabilities. Figma was used for creating mockups, prototypes, and design assets for the EasyKeyboardMaker website.
  • DB diagram: An online database design and diagramming tool that simplifies the process of creating and visualizing database schemas. dbdiagram.io was used for designing and documenting the database schema of the EasyKeyboardMaker project.
  • Google Fonts: A collection of free and open-source fonts used for typography on EasyKeyboardMaker's website.
  • Font Awesome: A library of icons used for adding scalable vector icons to EasyKeyboardMaker's website.
  • Mailtrap: In this project, Mailtrap was integrated to power the contact form, providing a secure environment for users to reach out to EasyKeyboardMaker via email.

Supporting Libraries and Packages

  • asgiref==3.7.2
  • boto3==1.29.0
  • botocore==1.32.0
  • dj-database-url==0.5.0
  • Django==3.2.23
  • django-allauth==0.41.0
  • django-countries==7.2.1
  • django-crispy-forms==1.14.0
  • django-environ==0.7.0
  • django-social-share==2.3.0
  • django-storages==1.14.2
  • django-summernote==0.8.20.0
  • gunicorn==21.2.0
  • jmespath==1.0.1
  • oauthlib==3.2.2
  • Pillow==10.1.0
  • psycopg2==2.9.9
  • python3-openid==3.2.0
  • pytz==2023.3.post1
  • requests-oauthlib==1.3.1
  • s3transfer==0.7.0
  • sqlparse==0.4.4
  • stripe==7.5.0

(back to top)

Features

Landing page

  • Navbar

    See Screenshot Navbar

  • Newsletter Signup

    See Screenshot Newsletter

  • New Product Sections

    See Screenshot New

  • Footer Sections

    See Screenshot Footer

Product Page

  • All products

    See Screenshot All products

  • Grid / list view

    See Screenshot Grid / list view

  • Ordered list dropdown

    See Screenshot Ordered list dropdown

Product Detail Page

  • Product information section
    See Screenshot Product information
  • Review section
    See Screenshot Review section
  • Multiple image view
    See Screenshot Image view

Article Page

  • Article page
    See Screenshot Articles
  • Article detail page
    See Screenshot Articles detail

Support Page

  • Support page
    See Screenshot Support
  • FAQ section
    See Screenshot FAQ section

User Account Management

  • The account sign-up form allows new users to create an account and join the exclusive deals at the e-commerce. The form has validation to make sure that the user enters the correct information needed. This is a Django built-in validation system. Such validation is:

    • Username: Required and has a maximum of 150 characters or fewer. Only letters, digits, and @/./+/-/_ are allowed.
    • Email: Required and must be in a valid email format.
    • Password: Subject to the following constraints:
      • Cannot be too similar to your other personal information.
      • Must contain at least 8 characters.
      • Cannot be a commonly used password.
      • Cannot be entirely numeric.
    • See Screenshot
      SIGNUP VALIDATION

  • The login form ensures secure access to EasyKeyboardMaker by verifying your username and password. If you face login issues, use the 'Forgot Password?' link to reset your password. The form also displays validation error messages to guide you through any input errors.

    • See Screenshot
      LOGIN VALIDATION

  • When an account is successfully created, the user will receive a confirmation message and gain access to their account and profile page.

    See Screenshot Success

  • User profile page

    profile page

  • User profile update

    profile update

  • User profile defualt shipping settings

    shipping settings

Navigation

The navigation are divided in three parts in this project. I have one right top side navbar, one category menu bar, and then i have one mobile view navbar, with an search field input, were users can search for products on the site.

  • Navbar
    See Screenshot Examplepage

On smaller screens, the navigation bar collapses into a burger menu, allowing for a compact and mobile-friendly navigation experience. Users can access the menu by clicking on the burger icon, which reveals the navigation options in a dropdown fashion.

  • Mobile view
    See Screenshot Text

Future Features

Here are some exciting features that I would like to add to the EasyKeyboardMaker E-commerce in the future:


These future enhancements aim to enrich EasyKeyboards's user experience, foster community engagement, and expand its reach to a global audience.

(back to top)

Testing

The EasyKeyboard E-commerce website went through a comprehensive testing process to guarantee its functionality, accessibility, and performance. This included checking the code, such as code validation, accessibility assessment, performance testing, cross-device testing, verification of browser compatibility, assessment of user stories, and the integration of user feedback to enhance the overall user experience.

All testing, including both manual and automated testing, was carried out and documented in Testing.md.

(back to top)

Bugs

The bug section descriptions have been linked with the bug issues in my documentation for better visibility, added color coding, and divided the content into sections, all aimed at enhancing readability. Click on each bug's link for additional information or documentation, and these links will redirect you to the respective bug card on the kanban board.

Known bugs

Bug Description
Internal Server 500 Error on Subscription Module in Deployed Environment This issue persists.
When the ACCOUNT_EMAIL_VERIFICATION setting is set to 'mandatory' in my Django application, the login system breaks. Attempting to sign up or log in new users results in a server error 500. This issue persists.
Clicking the "remove" button in the shopping bag for an item, it's triggers an unnecessary toast success pop-up window, even when already on the shopping bag page. This behavior can be confusing for users, as this pop-up is showing the updated bag items and everything, when user already are in the shopping bag page. This issue is still unresolved.
Implementing a MultipleChoiceField for small images in the product form did not behave as expected. The field did not display the small images properly, and attempts to allow superusers to edit, delete, or add new small images during product editing were unsuccessful. This issue persists, but workaround is implemented.

Fixed bugs

Bug Fix
Minus button in the shopping bag to be disabled when the quantity is 1. It works on mobile but not on desktop. The issue is that the page shows two minus buttons with the same ID. One is hidden depending on the screen size. This makes the minus button not disabled and users can click minus -1 -2 -3 -4 without any changes to the shopping bag. The bug was addressed by ensuring unique identifiers for each minus button in the shopping bag.
When attempting to add a product without an image to the shopping bag, an error occurs. The specific error message displayed is "ValueError at /products/175/". The 'image' attribute has no file associated with it. Added an If statement to check the condition, {% if item.product.image %}<img src="{{ item.product.image.url }}" alt="{{ item.product.name}}" class="w-100">{% else %}<img class="w-100" src="{{ MEDIA_URL }}noimage.png" alt="{{ item.product.name}}">{% endif %}
In the mobile-friendly view (lowest 320px X 640px), the icons in the navbar collapse, resulting in a user-unfriendly experience. The navbar icons split into two rows, obscuring the content below as it gets hidden under the second row. Used media queries to ensure that, on smaller mobile screens such as 340px wide, the navbar doesn't collapse and is presented correctly. Targeted classes as .nav-link , .nav-link i.fa-lg and .navbar-toggler
Page not found (404). If administrator deletes a product from the inventory and users with this product still in their bag may encounter an error that disrupts the entire application. Removed get_object_or_404 handling and added a TRY and EXCEPT BLOCK instead, and no longer relying on that 404 for if product exists.

(back to top)

Deployment

App Deployment

For deploying Your app, Heroku is used. Follow these steps:

Create a New App:

  • Create a new app on Heroku dashboard.

Configure Settings:

  • Navigate to "Settings" in new app.

Config Vars Setup:

  • In "Config Vars," add PORT as the key and 8000 as its value.

Add PostgreSQL Database:

  • Choose PostgreSQL as database.

    Example "ElephantSQL" was used in this project

Configure DATABASE_URL:

  • In "Config Vars," add DATABASE_URL and copy the URL from PostgreSQL dashboard.

    Note: If using ElephantSQL as PostgreSQL provider, you can use the URL provided by ElephantSQL.

Environment Variable Setup:

  • Create a new file in workspace called env.py.
  • Import the os library and set the environment variable for DATABASE_URL to the Heroku address (or ElephantSQL URL)
  • Add a secret key using os.environ["SECRET_KEY"] = "your secret key here".

Heroku Config Vars:

  • Add the secret key to the Heroku app's config vars in the settings.

Django Settings:

  • In settings.py of Django app, import Path from pathlib, os, and dj_database_url.
  • Add if os.path.isfile("env.py"): import env to the file.
  • Replace the SECRET_KEY with SECRET_KEY = os.environ.get('SECRET_KEY').
  • Replace the database section with DATABASES = {'default': dj_database_url.parse(os.environ.get("DATABASE_URL"))}.

Migrate Models:

  • In workspace terminal, migrate the models to the new database connection.

Custom Domain configuration

  1. Register Domain:

    • Register a domain with a domain registrar (e.g., GoDaddy).

  2. Add Custom Domain in Heroku:

    • Go to the "Settings" tab of your Heroku app.
    • Scroll down to "Domains" and click "Add Domain."
    • Enter your custom domain (e.g., www.easykeyboardsmaker.com).
    • Copy the provided DNS target. It will look something like shallow-atoll-32t56jvds3s5fhf8767d9a9c.herokudns.com.

  3. Configure DNS Records:

    • Log in to your domain registrar (e.g., GoDaddy).
    • Navigate to DNS settings.
    • Add a CNAME record:
      • Type: CNAME
      • Name: www
      • Value: Paste Heroku's DNS target
      • TTL: Set to default

  4. Verify Domain Configuration:

    • Check the "Domains" section in your Heroku dashboard.
    • Wait for DNS changes to propagate (up to 48 hours).

  5. HTTP and HTTPS Forwarding (Optional):

    • Optionally, configure forwarding in your domain registrar's settings.

  6. Verify Custom Domain:

    • After DNS propagation, access your app using the custom domain.

  7. Add ACCESS_HOSTNAME to your project settings:

Version Control

To manage version control and push code to the main repository on GitHub using GitPod, follow these steps:

Add Changes:

  • In the GitPod terminal, use the command git add . to stage changes.

Commit Changes:

  • Commit changes with a descriptive comment using the command: 
    git commit -m "Push comment here"

Push to GitHub:

  • Push the updates to the repository on GitHub with the command: 
    git push

Migrate Models: - In the terminal, migrate the models to the new database connection.

Forking the Repository

By forking the GitHub Repository, can create a copy of the original repository without affecting the original. Follow these steps:

GitHub Account Setup:

  • Log into GitHub account or create one if you don't have one.

Locate the Repository:

Fork the Repository:

  • At the top right of the repository page, click "Fork" to create a copy in your own GitHub repository.

Clone of the Repository:

Creating a clone allows you to have a local copy of the project. Follow these steps:

Repository URL:

Clone the Repository:

  • Select the "Clone by HTTPS" option and copy the provided URL to the clipboard.

Terminal and Git:

  • Open your code editor or terminal and navigate to the directory where you want to clone the repository.
  • Run git clone followed by the copied URL.
  • Press enter, and Git will clone the repository to your local machine.

To fork the repository, follow these steps:

  1. Go to the GitHub repository.
  2. Click on the Fork button in the upper right-hand corner.
  3. Wait for the forking process to complete. Once done, you will have a copy of the repository in your GitHub account.

To clone the repository, follow these steps:

  1. Go to the GitHub repository.
  2. Locate the Code button above the list of files and click it.
  3. Select your preferred method for cloning: HTTPS, SSH, or GitHub CLI, and click the copy button to copy the repository URL to your clipboard.
  4. Open Git Bash (or your preferred terminal).
  5. Change the current working directory to the location where you want the cloned directory to be created.
  6. Type the command git clone followed by the URL you copied in step 3. The command should look like this: git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY.
  7. Press Enter to create your local clone.

(back to top)

Credits

I would like to express my gratitude to the following resources, which have been a huge help to me in the development of the EasyKeyBoard E-commerce project.

Media

Images are taken from the following page:

  • Leonardo.ai Used as a landing page hero image
  • Keychron Used for some of the product images, this images are not made by me or easy keyboard maker

Django Documentation

The official Django documentation has been an invaluable resource throughout the project, providing comprehensive guidance on models, forms, templates, and various aspects of Django development.

Pypi

W3 Schools

Bootstrap docs

Geeksforgeeks

Various tutorials and YouTube channels

I would like to extend my appreciation to the authors of the tutorials and YouTube channels that have shared their knowledge and expertise in Django development, enabling me to learn and apply best practices in building this project.

Content

  • Paragraphs/text for the webpage/readme was written together with ChatGPT

  • Tips and inspiration on how to create a better readme.md file kera-cudmore PowerPoint

  • English spellchecker as Google Chrome extension Grammarly

(back to top)

Acknowledgments

I'd like to give recognition to the individuals who supported me in completing this project:

  • My family, for their patience and assistance in identifying spelling mistakes and testing issues. Their support has been invaluable in improving the quality of this project.
  • Testers Debbie B and Sandra B for their significant contributions in providing feedback, identifying errors, and offering valuable insights.
  • Brian, my Code Institute Mentor, for his exceptional guidance and expertise, which greatly contributed to my growth as a developer.
  • Alan Bushell, our cohort facilitator, for his dedication and weekly meetings where he has provided guidance, support, and encouragement to our cohort.

Code Institute Slack Channel: I received feedback from numerous users in a channel with over 3,000 members where I shared my E-commerce project. I am genuinely appreciative of the valuable feedback I received from the community.

I am truly grateful for their contributions, which have greatly enriched my learning and development.

License

This project is licensed under the MIT License - see the LICENSE file for details.

(back to top)

About

Portfolio: Website showcases an e-commerce platform tailored for a retail business specializing in selling keyboards. Built using HTML5, CSS3, JavaScript, Python 3, Django, PostgreSQL, and APIs.

easykeyboardmaker-ffb468c2d2d7.herokuapp.com/

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

Generated from Code-Institute-Org/ci-full-template