search

barryCFlynn / Pixel_Perfect

E-commerce project for Project 5 of Code Institute Full Stack boot camp
1 stars 0 forks source link

readme

Pixel Perfect

Pixel Perfect is an exclusive digital haven tailored for the aficionados of game franchises, offering a marketplace that celebrates the art and craft of high-quality posters. This platform is not just a website; it's a dynamic community for both sellers and buyers to engage in the passionate exchange of exquisite game-themed artwork. From vintage classics to contemporary marvels, Pixel Perfect is dedicated to connecting art enthusiasts around the globe.

Here, users can craft listings for their cherished posters, purchase a diverse collection from esteemed artists, and immerse themselves in a realm where creativity meets fandom. Pixel Perfect prides itself on ensuring a secure, transparent, and straightforward experience, making it the premier destination for acquiring and distributing luxury posters.

Embracing the legacy and innovation of game art, Pixel Perfect is a confluence of history, artistry, and technology. It's a community where every design, print, and story behind the artwork matters, offering a unique space for enthusiasts to share, discover, and elevate their passion for game-inspired posters. Join the journey at Pixel Perfect, where every piece is a celebration of artistic expression and gaming culture.

Am I responsive site image

Developer Barry Flynn
Live webpage
Project Repository

Badges

Gitpod Badge Git Badge Heroku Badge PostgreSQL Badge HTML5 Badge

CSS3 Badge JSS Badge Python Badge GitHub Badge Bootstrap Badge Django Badge

Table of Contents

  1. Project Goals
  2. User Goals
  3. Site Owner Goals
  4. User Experience (UX)
  5. Database
  6. Features
  7. E-commerce Business Model for Pixel Perfect
  8. SEO Implementation
  9. Design
  10. Technologies Used
  11. Social Media
  12. Testing
  13. Bugs
  14. Deployment
  15. Credits
  16. Acknowledgments

Project Goals

Pixel Perfect is a Django-based web application dedicated to game franchise enthusiasts and collectors, offering a sophisticated platform for the buying and selling of high-quality posters. The main goals of the project include:

  1. Create a Secure and User-Friendly Marketplace: Develop a platform where users can list their game-themed posters for sale and purchase a diverse range of artwork in a safe and user-friendly environment.

  2. Foster a Community of Enthusiasts: Build a community where poster and game art enthusiasts can share their passion, knowledge, and experiences related to various game franchises and artwork styles.

  3. Implement a Transparent Verification Process: Ensure the authenticity and quality of posters listed on the platform through a clear and trustworthy verification process.

  4. Enable a Seamless User Experience: Focus on providing a smooth and intuitive user experience from listing posters to making purchases, with an emphasis on high-quality images and detailed descriptions.

User Goals

Site Owner Goals

(back to top)

User Experience

Target Audience

Pixel Perfect is tailored for the following target audience:

User Requirements and Expectations

When using Pixel Perfect, users can expect the following features and characteristics to fulfill their needs:

The Site Pages

Landing Page:

See Screenshot Mobile Main Page

Nav Bar:

See Screenshot Mobile Nav Bar Page

Inventory:

See Screenshot Mobile Inventory Page

Inventory Item:

See Screenshot Mobile Inventory Item Page

Cart:

See Screenshot Mobile Cart Page

Orders:

See Screenshot Mobile Orders Page

Order Confirmation:

See Screenshot Mobile Orders Page

Profiles:

See Screenshot Mobile Profile Page

Order History:

Register:

Sign In:

Newsletter Sign up:

Custom 404 page:

User Stories

Methodology

The Pixel Perfect project follows an agile-inspired methodology, emphasizing collaboration, adaptability, and iterative development. This approach has guided the project's advancement:

Agile Project Management Using GitHub Projects

GitHub Projects serves as the central hub for project management, facilitating an organized workflow. User stories and tasks are structured as GitHub issues, enabling efficient tracking of progress. The GitHub project board provides a visual overview, ensuring transparency and effective management.

User Stories Transformed into GitHub Issues

User stories are translated into GitHub issues to capture user-centric functionalities. These issues are linked to their respective user stories, providing easy access to criteria, tasks, and discussions. This integration streamlines development and enhances clarity throughout the project lifecycle.

Epics

For this project, I organized my development tasks into 8 main Epics, each grouping related user stories. Due to time constraints, not all Epics have been fully implemented in this deployment. Future updates will incorporate these remaining features into the site.

Development Approach

Instead of following traditional sprints, I closely followed the structure and methodology outlined in the Code Institute's Boutique Ado walkthrough project. This approach guided the construction of the site, ensuring alignment with best practices and industry standards throughout development.

For detailed information, please refer to the Link to Epics for comprehensive insights into the project's scope and development roadmap.

  1. User Authentication and Profile Management - complete
  2. Shopping Cart and Checkout - complete
  3. Payment Processing - complete
  4. Image Management - complete
  5. Inventory Search and Grouping - complete
  6. Product Management - partial
  7. User Consent and Privacy - incomplete

User Stories and Acceptance Criteria

I have documented a total of 20 user stories, each accompanied by detailed acceptance criteria. These criteria specify the exact requirements and expected outcomes for each feature, facilitating thorough tracking and validation of results.

Documentation

For detailed information, please refer to the link to user stories for comprehensive insights into the project's scope and development roadmap.

Kanban Board

For detailed information, please refer to the link to Kanban board for comprehensive insights into the project's scope and development roadmap.


(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 blog application.

Description

Database Schema Summary

Category Table

Franchise Table

Inventory Item Table

Order Line Item Table

Order Table

Size Table

User Profile Table

User Table

Newsletter Signup Table

This database schema outlines the structure for Pixel Perfect, enabling user engagement with art listings, personalization of user profiles, categorization of art by franchises, and secure payment options.


(back to top)

Features

Implemented Features

Feature Description
User Authentication Implements secure sign-up, login, and logout functionality for users, ensuring data protection and access control.
User Profiles Allows users to manage their profiles, including updating personal information, preferences, and viewing order history.
Inventory Listings Displays a comprehensive list of inventory items, complete with images and essential details for easy browsing.
Inventory Filtering Provides navigation options in the Navbar to filter inventory items by Price, Category, Franchise, and New Arrivals, enhancing user search capabilities.
Inventory Sorting Enables users to sort inventory items by price, category, franchise, rating, and name for streamlined browsing and selection.
Inventory Keywords Associates each product with keywords to facilitate effective search functionality across the site, improving user experience.
Inventory Detail Page Offers a detailed view of each inventory item, showcasing images, descriptions, pricing, and other relevant information.
Inventory Sale Items Allows administrators to manage sale items with special pricing, notifying users of discounts during browsing and checkout.
Shopping Cart Enables users to add, update quantities, and remove items from their shopping cart seamlessly, enhancing shopping convenience.
Checkout Process Facilitates a secure checkout process integrated with Stripe for seamless payment processing and order completion.
Order Management Provides users with access to their order history and detailed order information for transparency and tracking.
Admin Panel Empowers administrators to manage products, orders, and user accounts efficiently through a centralized administrative interface.
Newsletter Signup Allows users to opt-in for newsletters to receive updates and promotions, enhancing engagement and communication.
Custom 404 Page Displays a custom error page when users navigate to non-existent pages, improving user experience and site navigation.
Sitemap and Robots.txt Implements a sitemap for SEO optimization and manages robots.txt for controlling search engine indexing, enhancing site visibility.
Responsive Design Ensures the website is fully responsive, delivering optimal user experience across all devices and screen sizes.

Deferred Features

Feature Description
Poster overlay on background image on details page Planned to use Pillow to generate overlay images of products on background, similar to home screen setup. Deferred to future site update.
Newsletter sign-up linking to profile Planned integration allowing profile page users to manage newsletter subscriptions. Deferred to future site update.
Stock count reduction post-purchase Intended to dynamically update inventory stock upon purchase, but added complexity for cart quantity checks. Deferred to future site update.
Rating system implementation Planned feature involving a like button for product ratings. Deferred to future site update.
Cookie consent banner Planned pop-up for new user site access with complete configuration. Deferred to future site update.
Landing page carousel Planned slideshow for showcasing products on the home screen. Deferred to future site update.


E-commerce Business Model for Pixel Perfect

Business Model Type: B2C (Business to Consumer)

1. Purpose of the Application:

Pixel Perfect is an e-commerce platform designed to serve as a marketplace for high-quality, game-themed posters. The primary focus is on connecting individual consumers with artists and sellers who offer unique and artistic posters. The application aims to cater to game franchise enthusiasts and collectors, providing them with a dedicated platform to buy and sell posters.

2. Core Business Intents:

3. Marketing Strategies:

4. Customer Support and Retention:

By implementing these strategies, Pixel Perfect aims to establish itself as the premier online destination for game-themed posters, offering a unique shopping experience tailored to the interests and passions of game franchise enthusiasts.


SEO Implementation

To enhance the visibility of the Pixel Perfect website on search engines, we have implemented several SEO best practices, including the use of common HTML elements, and the inclusion of robots.txt and sitemap.xml files.

HTML Best Practices

Title Tags: Each page has a unique and descriptive title tag that includes relevant keywords. This helps search engines understand the content of the page and rank it appropriately. Meta Descriptions: Descriptive meta tags are added to each page to provide a summary of the content. These descriptions appear in search engine results and can improve click-through rates. Header Tags: We use header tags (H1, H2, H3, etc.) to structure the content on each page. Proper use of header tags helps search engines understand the hierarchy and importance of the content. Alt Text for Images: All images have descriptive alt text to ensure that search engines can index them properly. Alt text also improves accessibility for users who rely on screen readers.

Robots.txt

The robots.txt file is used to manage and restrict the access of search engine crawlers to certain parts of the website. This helps in:

Preventing the indexing of sensitive or duplicate content. Guiding search engines to the important sections of the site that should be indexed.

Sitemap.xml

The sitemap.xml file provides a structured list of all pages on the website, helping search engines discover and index the content more efficiently. It includes URLs of all important pages along with metadata such as the last modification date, change frequency, and priority.


(back to top)

Design

I followed the Boutique Ado project closely as it served as an excellent example of an e-commerce site with a clean and effective design. By choosing simple colors and a white background, the products are allowed to stand out, particularly because the posters themselves are vibrant and colorful. This approach ensures that the focus remains on the products, enhancing the overall shopping experience.

Color

Primary Background Colour

#FFFFFF

Secondary Background Colour

#000000

Contrast Grid

For the contrast grid in the design system, I have chosen to display every color used throughout the site. This includes colors utilised in various elements such as messaging, Stripe integrations, and other components. The contrast grid ensures that all colors are tested for accessibility and visual harmony.

(back to top)

Technologies Used

Languages

Frameworks

Database

Media Management Platform

Tools

Supporting Libraries and Packages

(back to top)

Social Media

See Social documentation Social Readme

Testing

Testing was an integral part of the development process for Pixel Perfect, ensuring that the platform functions as intended and meets user requirements effectively. The testing process involves manual testing.

See testing documentation Testing Readme

Bugs

The bug description section have been linked with the bug issues in my documentation for better visibility. The issue numbers are clickable to get a more comprehensive bug report.

Known bugs ❌

  1. Cloudinary Circular Import Error

    Bug: ImportError: cannot import name 'CompositeImage' from partially initialized module 'inventory.models'.

    Solution: Removed from site and opted to have a single image on Inventory Detail.

  2. Newsletter Signup KeyError

    Bug: KeyError: 'receive_newsletter' when accessing the profile page.

    Solution: Removed the boolean from UserProfile and managed newsletter subscriptions in the NewsletterSignup model only.

Fixed bugs ✅

  1. Mixed Content Warnings

    Bug: Mixed Content: The page was loaded over HTTPS, but requested an insecure element from HTTP.

    Solution: Ensure all Cloudinary URLs use HTTPS:

      CLOUDINARY_URL = os.environ.get('CLOUDINARY_URL', 'cloudinary://API_KEY:API_SECRET@CLOUD_NAME')
  cloudinary.config(
      secure=True
  )

  2. Error in Heroku after adding Cloudinary settings

    Bug: NameError: name 'cloudinary' is not defined

    Solution: Ensure Cloudinary was properly imported in settings.py:

      import cloudinary
  import cloudinary.uploader
  import cloudinary.api

  3. Duplicate SKU Key Error

    Bug: duplicate key value violates unique constraint "inventory_inventoryitem_sku_uniq".

    Solution: Ensure SKU is generated uniquely if not provided:

    def save(self, *args, **kwargs):
    if not self.sku:
        self.sku = self.generate_sku()
    super().save(*args, **kwargs)

  4. SMTP Email Sending Issue

    Bug: SMTP.starttls() got an unexpected keyword argument 'keyfile'.

    Solution: Downgrade Python version to 3.10.14 in Heroku by adjusting runtime.txt.

  5. Quantity Input Not Updating on Desktop

    Bug: Quantity not greyed out at 1 on desktop view.

    Solution: Change quantity-form ID to a class and update the corresponding JavaScript to use class selectors.

  6. Custom 404 Error Handling

    Bug: 500 Error when trying to load a non-existent page.

    Solution: Create custom 404 handler in views.py and reference it in urls.py:

    def handler404(request, exception):
    return render(request, 'errors/404.html', status=404)

handler404 = 'boutique_ado.views.handler404'

  7. OrderLineItem AttributeError

    Bug: 'OrderLineItem' object has no attribute 'InventoryItem'.

    Solution: Correct typo in OrderLineItem model __str__ method:

      def __str__(self):
      return f'SKU {self.inventory_item.sku} on order {self.order.order_number}'

  8. Signup Email Template Issue

    Bug: Confirmation email subject includes [example.com] instead of the actual domain.

    Solution: Update email domain and display name in Django admin site settings.

  9. Background Image Clipping

    Bug: Background image being clipped by the navigation bar.

    Solution: Create 3 background images for different screen sizes.

  10. URL-Encoding Issue with Franchise Names

    Bug: Navigation menu links for franchises containing spaces (e.g., "Half Life") caused syntax issues in the W3C validator due to illegal characters in URLs.

    Solution: Template:

    • URL-encode franchise names using the urlencode filter

      "{% url 'inventoryitems' %}?franchise={{ 'Half Life'|urlencode }}"

    • Decode the URL-encoded franchise names

      from urllib.parse import unquote if 'franchise' in request.GET: franchises = request.GET['franchise'].split(',') franchises = [unquote(f) for f in franchises] inventoryitems = inventoryitems.filter(franchisefriendly_name__in=franchises) franchises = Franchise.objects.filter(friendly_namein=franchises)

  11. No Image Placeholder Not Showing

    Bug: noimage.png was still referenceing retired location MEDIA_URL

    Solution: Update all refrences to noimage.png to {% static 'img/noimage.png' %}

  12. 500 error on Newsletter signup

    Bug: 500 erorr when hitting submit button in chrome

    Solution: previous code refactor caused errors, restored to resolve

  13. Faile to load {% static 'img/noimage.png' %}

    Bug: success_toast could not resolve path

    Solution: add {% load static %} to top of template

These are some of the key bugs encountered and the solutions implemented to resolve them. If you need more details or additional assistance, please let me know!

(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:

Cloudinary

To integrate Cloudinary into project, follow these steps:

Cloudinary Account:

Version Control

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

Add Changes:

(back to top)

Credits

Here's a collection of sites that were helpful in creating this website:

Django Documentation:

The official Django documentation with guidance on models, forms, templates, and various aspects of Django development.

Bootstrap docs:

Media

Content

Acknowledgments

I'd like to give recognition to the ones who have supported me in creating this project:

My mentor Mitko Bachvarov for his help in guiding me through this project

(back to top)