Retro Classics

Retro Classics is built using a combination of HTML, CSS, JavaScript, Python, and Django. I have incorporated Cloudinary for efficient image management and Stripe for secure and convenient payment processing.

Link To Live Website

Contents

• User Experience

  • User Stories

  • Site Goals

• Agile Methodology

• Business Model

• SEO

• Design

  • Colour Scheme

  • Typograpghy

  • Wireframes

• Features

  • Existing Features

  • Future Features

• Testing

• Bugs

• Technologies Used

• Deployment

  • ElephantSQL

  • Heroku

  • Local Deployment

• Credits

User Experience

User stories

• Iteration 1

  • Epic Pre-Developement.

    • USER STORY: Wireframes.

      • As a developer, I want to create wireframes to visualize the layout and features of the eCommerce store.

    • USER STORY: Frameworks and Libraries.

      • As a developer, I want to decide on the frameworks and libraries that will be most beneficial for my project.

    • USER STORY: Set up Django.

      • As a developer, I want to initialize the Django project to lay the foundation for my eCommerce store.

  • USER STORY: User Authentication.

    • As a developer, I want to implement user authentication so that users can have personalized experiences.

  • USER STORY: Basic Navigation.

    • As a developer, I want to implement basic navigation features to facilitate user flow through the eCommerce store.

  • USER STORY: Homepage Design.

    • As a developer, I want to design a compelling homepage to provide users with an overview of what the eCommerce store offers.

  • USER STORY: Background image.

    • As a developer, I want to set an engaging background image for the homepage to create an retro feel to the shop.

• Iteration 2

  • USER STORY: Basic Product Management.

    • As a developer, I want to create a simple product management system so that products can be added, viewed, and categorized in the eCommerce store.

  • USER STORY: Products.

    • As a developer, I want to make it easy to add, view, and organize products

  • USER STORY: Shopping cart.

    • As a developer, I want to implement a functional shopping cart and add styling for a user-friendly appearance.

  • USER STORY: Static And Media Files.

    • As a developer, I want to manage static and media files effectively to ensure quick page loads and optimized performance.

• Iteration 3

  • USER STORY: Footer.

    • As a website visitor, I want to easily find store information and have the option to subscribe to a newsletter, so that I can stay informed about the latest updates and promotions.

  • USER STORY Testimonials

    • As a website visitor, I want to read testimonials on the home page to gain insights into the experiences of other customers.

  • USER STORY: PRODUCTS ON SALE

    • As a website visitor, I want to explore discounted products on the home page, so that I can make informed purchase decisions and understand the quality of the products.

  • USER STORY: Profile App

    • As a Customer I want to be able to manage my profile information so that I can keep my details up to date and make checkout quicker and easier.

  • USER STORY Checkout App

    • As an online shopper, I want to securely complete my purchase using a credit card, so that I can efficiently and confidently buy the items in my cart.

  • USER STORY: Back To Top Button

    • As a developer I want a Back To Top Button so that users can jump back to the top of the page

Site Goals

1. Collecting a variety of classic games and consoles, so users can enjoy some nostalgic gaming moments.
2. Offering users a variety of gaming consoles to suit different tastes of retro gaming fans.
3. To create a visually appealing and responsive design using Bootstrap, ensuring a consistent user experience across different devices.
4. Ensuring secure and smooth transactions with the seamless integration of Stripe during the checkout process.
5. To enable users to create and personalize profiles, managing their order history within the Retro Classics platform.
6. To implement an efficient search and navigation system, allowing users to easily discover their favorite retro games, consoles, and accessories.
7. To establish a secure backend infrastructure with Django, handling user data, order processing, and overall system functionality.

Agile Methodology

This project was developed using Agile methodologies to facilitate flexibility and iterative progress. Embracing an adaptive planning process allowed me to continuously improve and respond to evolving project needs.

User Stories and MOSCOW Prioritization

To outline project features, I defined user stories short descriptions from an end user's perspective. Employing the MOSCOW technique helped me prioritize these features effectively:

• Must-Have: Identified critical features essential for project success.
• Should-Have: Important features that were not immediately critical.
• Could-Have: Considered features that could be included if time allowed.
• Wont-Have: Acknowledged nice-to-haves that were intentionally excluded from the current scope.

MOSCOW prioritization guided me in managing expectations, focusing on key deliverables, and navigating the development process.

Kanban Board for Task Management

I utilized a Kanban board to visually manage the flow of work throughout the project. The board's columns included:

• To Do: Tasks (user stories) planned for development.
• In Progress: Tasks actively being worked on.
• Done Tasks that have been finished.
• Future Features: Tasks that will be added in the future.
• Wont Have Tasks that wont be included in the project.

This Kanban board provided a clear visual representation of my project's progress, making it easier to track and manage tasks. Link to project Kanban board.

Back to top

Business Model

Executive Summary

Retro Classics in an online store that is dedicated to taking all gamer lovers on an exciting venture of nostalgic joy with a one stop shop for all retro games and consoles. We offer a thoughtfully curated selection of classic gaming consoles and timeless games bringing gamers on a journey back in time through a seamless and engaging online shopping experience.

Mission and Vision

Our mission is to revive the magic of retro gaming allowing individuals to relive cherished memories and rediscover the timeless allure of iconic consoles and games. We envision becoming the go-to destination for all gamers seeking a trip down memory - lane, offering a diverse range of authentic retro gaming experiences.

Target Market

Our target audience includes passionate gamers, collectors and individuals seeking a nostalgic trip in to a world of retro-gaming. With a focus on quality, authenticity, and a love for the classics, we cater to a diverse customer base spanning various age groups.

Marketing and Sales Strategy

Retro Classics strategy aims to create customer awareness and increase sales with promotional campaigns such as online advertising, social media marketing, email campaigns and digital mail. The business will use Search Engine Optimization (SEO) strategy, and targeted digital media advertisements to drive traffic to the website.

Operations and Management

• Retro classics will operate as an e-commerce platform specialising in the sale of retro gaming consoles and classic game titles. All operations will be conducted online, providing customers with a seamless and user friendly shopping experience.

• Retro Classics will regularly update and maintain the website to ensure optimal performance, security, and user experience and offer multi-channel customer support (live chat, email, and phone) to address inquiries and resolve issues promptly.

• Retro Classics will maintain a meticulously curated inventory of authentic retro gaming consoles and games and establish strategic partnerships with reliable suppliers and distributors for retro gaming products.

• Retro classics will prioritize quality control measures for all products through thorough testing and inspections to guarantee the authenticity and functionality of all retro gaming consoles and games.

SEO

Keywords

Short Tail: Retro, Games, Gaming, Retro Gaming, PS1, PS2, PSP, Playstation, Nintendo, SNES, Gamecube, Gameboy, GBA, SEGA

Long Tail: Sega Genesis, Retro Console, Retro Classics, 8bit gaming, 16bit gaming, Playstation One, Playstation Two, Playstation Portable, Nintendo SNES, Nintendo Gamecube, Nintendo 64, Gameboy Advanced

Robots.txt

A robots.txt file has been generated. To streamline Google's crawling process, I've strategically blocked the profiles and bag app. This decision was made because these specific pages don't provide significant benefits for search engine indexing. By excluding them, I aim to optimize the crawling efficiency for the rest of the website.

Sitemap.Xml

I've developed a sitemap.xml for the website to enhance its search engine visibility, particularly for platforms like Google. This file aids in the effective indexing of the site, making it easier for search engines to navigate and understand its structure.

Facebook Business Page

Link To Facebook Page

I have made the decision to not link my project to the facebook page as the Facebook page will be deleted over not being maintained or real

Design

Colour Scheme

Inspired by classic retro games, Retro Classics color palette is a nod to nostalgia. Dark Royal Blue.(#054a91) and Steel Blue are the primary colours, with White for clear text and Yellow for links.

Typograpghy

• Roboto Slab Regular 400 was used for headings product names.

• Karma Regular 400 was used for everything else.

Wireframes

Desktop Wireframes

Home Page

All Products

Product Detail

Profile

Sign Up

Sign In

Database Scheme

Features

Existing Features

Header and Nav Bar

The Retro Classics Store features a logo. At the top of the page, users can easily navigate through the store with a search bar. The account icon provides access for signing in or creating a new account. The basket icon allows users to view the contents of their shopping basket, with the total displayed underneath. The navigation bar categorizes the store into "All Products," "Consoles," "Games," and "Accessories,". Plus, a noticeable free delivery banner in the header treats users to free shipping on orders over €100.

Desktop & Mobile View

• 
• 
• 
• 
• 
• 
• 
• 

All Products.

• On Sale!

• By Price.

• By Rating.

• By Players.

• All Products.

Consoles.

• Playstation.

  • Playstation One.
  • Playstation Two.

• Nintendo.

  • Nintendo SNES.
  • Nintendo 64.

• Sega

  • Sega Genesis.

• Handheld

  • Gameboy Advanced.
  • Playstation Portable.

• Emulation

  • Raspberry Pi 4.

• All Consoles.

Games.

• Playstation One.

• Playstation Two.

• Nintendo SNES.

• Nintendo 64.

• Sega Genesis.

• Gameboy Advanced.

• Playstation Portable.

• Raspberry Pi 4.

• All Games.

Accessories.

• Controllers.

• Memory Cards.

• Cables & Adapters.

• All Accessories.

Free delivery banner for orders over €100.

Footer

• The footer has four main section.

  • Newsletter for signing up.

  • Opening Times.

  • Contact us with phone number and email address for the store.

  • Follow us with four social media icons for Facebook, Twitter, Linkedin and Github.

Desktop & Mobile View

• 
• 

Home Page

The home page of the Retro Classics Store welcomes visitors with a callout inviting users to "Unlock Nostalgia: Shop Retro, Feel Classic! Discover a unique collection of retro games & consoles that take you back in time." and a background image featuring six arcade machines. The inviting message sets the nostalgic tone for the shopping experience. A "Shop Now" button encourages users to explore the products of the store. As users scroll down, they encounter a header announcing the ongoing sale. The "Check Out Our Sale" section showcases four highlighted products. Continue scrolling users are greeted by another header titled "Testimonials." This section has two testimonials from customers who share their positive experiences with the Retro Classics Store.

Desktop & Mobile View

• 
• 

Products on sale

• Heading saying "Check out our sale"
• Four products are displayed on the home page with the photos, names, descriptions and prices with a button to view to product underneath

Desktop & Mobile View

• 
• 
• 

Testimonials

• The testimonial section functions as a carousel, allowing users to view testimonials. It includes buttons for navigating to the next and previous testimonials.

Desktop & Mobile View

• 
• 

All Products

The All Products page features a clean layout with a small heading on the left indicating the total number of products available. A sorting box on the right allows users to arrange products based on various criteria. Product cards are displayed in rows, each showcasing an image, product name, price, rating, and release date. Clicking on the image leads to the detailed product page, while a link on each card invites users to explore more products in the selected category. If you are a superuser there is two buttons for editing and deleting the product.

Desktop & Mobile View

• 
• 

Product Detail

The product detail page features a product image, name, and price. A description along with details like rating, players, release date, color, and manufacturer and storage. Additional information includes storage options and memory card compatibility. Below, there's a user-friendly quantity selection box with plus and minus buttons and an "Add to Basket" button. Towards the bottom, two buttons allow users to explore more products or quickly browse products in the same category. If you are a superuser there is 2 buttons for editing and deleting the product.

Desktop & Mobile View

• 
• 
• 
• 

Product Management

The product management page provides a simple form for adding new products. The form includes fields for Category, Name, SKU, Image, Description, Rating, Price, Players, and an option to mark the product as On Sale. Users can easily fill in these details. Two buttons are available for action: "Add Product" to save the information, and "Cancel" to discard changes if needed.

Desktop & Mobile View

• 
• 
• 
• 

Profile

The user profile page features an H1 title "Profile" serving as the main heading. The layout is divided into two sections for user convenience. On the left, users can easily update their information, including details like phone number and delivery address. A button labeled "Update Information" makes it easy to modify your details. On the right, a separate section displays the user's previous order history, providing a quick overview of past purchases. Underneath, there is a section called "My Testimonials" that shows your testimonials of the site. If you haven't left any testimonials yet, it will prompt you with the message: "It looks like you haven't left us a testimonial yet. Would you like to leave one?" along with a button labeled "Leave a Testimonial" to encourage users to share their thoughts.

Desktop & Mobile View

• 
• 
• 
• 
• 
• 
• 

Shopping Basket

If the user has no items in the shopping basket, the page will be empty with a paragraph saying, "Sorry, you have no items in your basket." and a link to Browse Products.

Desktop & Mobile View

• 
• 

The Shopping Basket page starts with a heading, "Shopping Basket." The table showcases product details: name, SKU, image, quantity, and price. On the right, you'll find a section labeled "Have a Coupon?" with an Apply button that is currently inactive. Below, a summary box highlights the total price, delivery cost, and grand total. Two buttons at the bottom ease navigation - "Continue Shopping" for more products and "Checkout" for the payment process.

Desktop & Mobile View

• 
• 

Checkout

The Checkout page is divided into two sections. On the left, you'll find fields for entering your full name, email address, phone number, street addresses, town or city, county or state, eircode, and country. Below, there's a section for card details, accompanied by buttons for adjusting the bag and completing the order. The total charge is displayed underneath these buttons. On the right, the Order Summary displays product images, names, quantities, and subtotals, ensuring a clear overview of your selected items during the checkout process.

Desktop & Mobile View

• 
• 
• 
• 
• 
• 

Checkout Success

After successfully completing your order, you're welcomed with a H1: "THANK YOU FOR SHOPPING WITH RETRO CLASSICS." underneath , you will find your order information. A confirmation email has been sent to [email address]. The page includes details such as your order summary, billing information, and the delivery address. This confirmation ensures you have all the necessary information for your purchase. Below your order information there is a button called "Check Out Our Sale!".

Desktop & Mobile View

• 
• 
• 

Order Confirmation Email

• 

Add Testimonial

Users can share their experience easily. They are prompted to write a review in a text box and rate their experience using a dropdown menu. After writing and rating, they can submit their testimonial with a click on the "Submit" button.

Desktop & Mobile View

• 
• 

Edit Testimonial

Users can update your testimonial just type in your changes in the text box and pick a new star rating from the dropdown menu. Once you are done click the "update" button to update your testimonial.

Desktop & Mobile View

• 
• 

Delete Testimonial

If you choose to delete your testimonial, you'll see a confirmation page asking, "Are you sure you want to delete your testimonial?" You will have two options: "Delete" to proceed or "Return" to go back to your profile.

Desktop & Mobile View

• 
• 

Register

The Register page presents a simple form for users to create an account. The form includes fields for email, username, and password.

Desktop & Mobile View

• 
• 

Sign In

The Signin page presents a simple form for users to sign in. The form includes fields for username, and password.

Desktop & Mobile View

• 
• 

Sign Out

The Sign Out page presents a paragrapgh asking users "Are you sure you want to sign out?" with a button for logging out.

Desktop & Mobile View

• 
• 

Password Reset

The Password Reset page presents a paragrapgh asking users "Forgotten your password? Enter your e-mail address below, and we'll send you an e-mail allowing you to reset it." with a button for resetting your password.

Desktop & Mobile View

Back To Top Button

I have added a Back To Top Button which is present on every page.

Toasts

I have added Bootstraps toasts for informative notifications throughout the project.

Future Features

• Discount Code Functionality:

  • Wire up the discount code feature to enable users to apply discounts during the checkout process.
  • Create a system for managing and generating discount codes.

• Customer Reviews for the Store:

  • Integrate a review system that allows customers to leave feedback and reviews for products.
  • Implement a rating system and user comments for each product.

• Wishlist Functionality:

  • Add a wishlist feature, allowing users to save products for future consideration.
  • Provide options for users to manage and share their wishlists.

• FAQs Page:

  • Create a Frequently Asked Questions (FAQs) page to address common queries from users.
  • Organize information in a clear and accessible format for easy reference.

• Blog:

  • Integrate a blog section to share updates, news, and relevant content.
  • Allow for easy creation and management of blog posts, including categories and tags.

• Order Confirmation Emails:

  • Configure the system to automatically send order confirmation emails to users when a product is ordered.
  • Ensure that users receive timely and detailed information about their purchases, creating a positive post-purchase experience.

Testing

Testing results are in TESTING.md.

bugs

Closed bugs

Bug	Solution
500 server error on the profile	countryfield.js was in the CSS folder, I moved the file into the JS folder and the error was gone
When attempting to migrate the database using the standard python3 manage.py migrate command, I received a message stating that there are no migrations to apply. I had to use this command python3 manage.py dumpdata --exclude auth.permission --exclude contenttypes --exclude checkout --exclude admin --exclude profiles > new.json	After inputting the command my database migrated. I spent quite a lot of time solving this bug as I thought the problem was with AWS and that is why I opted to use Cloudinary instead but after deploying my site I dont think I had any AWS problems at all it was the database preventing the deployment
In the Nav bar the link for Cables & Adapters loads and empty page I was unable to find the correct url for the webpage I think its the "&" which is causing this problem.	I had a spelling mistake in adapters

Open Bugs

Bug	Open/Closed
I encountered an issue with the placement of a background image on index.html. I had the background image within the body tag, but it wasn't positioned correctly on the page and I faced problems with the tint applied over the image. In an attempt to resolve this, I experimented with placing the background image around the entire page. However, I encountered issues with sizing—either the image was too large, too small, or not displaying at all. To address this, I decided to place the image within a <div> element with the class darken-img and the id bg-img. Surprisingly, the image was positioned perfectly with basic CSS styles. However, I noticed that the darken effect on the image had disappeared. To address this, I duplicated the <div class="darken-img" id="bg-img"> and placed it underneath the original one. Strangely, if I removed the bg-img from the class, either the darken effect or the background image would vanish. As a temporary solution, I left the class declared twice to maintain the desired appearance.	Open
When you click edit on a product a toast pops up telling you that "You updated (Product)" this toast should say you are editing (product)	Open
I have noticed sometimes when I login on mobile I get a 403 error but once I hit back I am brought to the home page and I am logged in I have displayed a screenshot below	Open
Just before submiting I have noticed a bug when a user has more than one testimonial left on the site in their profile the edit and delete buttons for the testimonials increase with the number of testimonials. I have decided to leave this bug in over fear of causing more bugs and having the re-test my code. I have left an image below for reference	Open

403 bug Screenshot

Testimonial edit/delete buttons bug in profile

Technologies Used

Frameworks, Libraries & Programs Used

• Git - For version Control.

• Github - Used to save and store the files for the website.

• Gitpod - Was used to created my code.

• Google Dev Tools - To troubleshoot and test features, solve issues with responsiveness and styling.

• AM I Responsive? - Used to show the Website image on a range of devices.

• Responsive Design Checker - For checking the responsiveness across mulitiple devices and screen widths

• Favicon - Used to make a Favicon for the website.

• Favicon Generator - Was used to make the favicon.

• HTML Validator - For HTML validation.

• Python validator - For Python validation.

• W3 Jigsaw - For CSS validation.

• Bootstrap4 - CSS Framework.

• Django3 - Python Framework.

• Cloudinary - For hosting Inked Clippers images.

• Django Crispy Forms - Enhanced form rendering for Django.

• psycopg2 - PostgreSQL adapter for Python.

• Gunicorn - A Python HTTP server for running web applications.

• sqlparse - A Python library for parsing and formatting SQL queries.

• Figma - Used for creating wireframes.

• Stripe - Used for proccesing payments.

• Django Pillow - A Python Imaging Library (PIL) for Django, used for handling image files in Django applications.

Deployment

ElephantSQL Database Setup

• Step 1: Obtain ElephantSQL Database URL

1. Sign up or sign in to ElephantSQL:

   • If you don't have an account, sign up otherwise, log in to your account.

2. Create a new ElephantSQL instance:

   • From the dashboard, click on Create New Instance.

   • Choose a plan based on your requirements.

3. Retrieve your ElephantSQL Database URL:

   • Once the instance is created, click on it to view details.
   • Find and copy the URL provided this is your ElephantSQL Database URL.

Step 2: Configure Django Project

1. Add DATABASE_URL to env.py:

   • Open your env.py file.

   • Set DATABASE_URL to the value obtained from ElephantSQL.

Step 3: Use DATABASE_URL in Django Settings

1. Update Django Settings:

   • *Open your settings.py file in your Django project.

   • Locate the DATABASES configuration.

   • Comment out the orignal django database settings

   • Update the DATABASES setting to use the dj_database_url package:

     import dj_database_url
     # At the top of settings.py with the other imports
     
     DATABASES = {
     'default': dj_database_url.parse(os.environ.get("DATABASE_URL"))
      }
      # Replace the orignal database with what is above

   • This allows your Django project to use the ElephantSQL Database URL.

2. Migrate Database Changes:

   • Run the following commands in your terminal:

     python manage.py makemigrations
     python manage.py migrate

   • This ensures that your database is updated with the latest changes.

• Note: Upcoming Changes to ElephantSQL Free Tier

  • ElephantSQL is making changes to its free tier in the next few months. If you're using or planning to use the free tier, be prepared for some tweaks in the deployment process. As of now, the steps in this guide are based on the current ElephantSQL setup. ElephantSQL will have updates regarding these changes check their official announcements and documentation for the latest info. If you run into any deployment problems or notice any differences refer to the updated ElephantSQL docs.

Heroku

Step 1: Prepare Environment Variables

Create an env.py file at the root level of your project. Copy and paste the following content into the file:

import os

# Replace placeholders with your actual values
os.environ['DATABASE_URL'] = 'Your_ElephantSQL_Database_url'
os.environ['SECRET_KEY'] = 'Your_Django_secret_key'
os.environ['CLOUDINARY_URL'] = 'Your_Cloudinary_url'

Step 2: Heroku App Setup

1. Sign up or sign in to your Heroku account:

   • If you don't have an account, sign up otherwise, log in to your account.

2. Create a new app from the Heroku dashboard:

   • Choose a name for your app.
   • Select the region that is most suitable for you.

3. Configure app settings:

   • In the app's settings, find and click on 'Reveal Config Vars'.
   • Add the following variables with their corresponding values:
     • DATABASE_URL: Your ElephantSQL Database URL.
     • SECRET_KEY: Your chosen Django secret key.
     • CLOUDINARY_URL: Your Cloudinary URL.
     • DISABLE_COLLECTSTATIC: Set to 1 for initial deployment.
     • PORT: Set to 8000

Step 3: Deployment from GitHub

1. Choose the Deploy option:

   • Go to the Deploy tab in your app dashboard.

2. Connect to GitHub:

   • Under Deployment method, choose Connect to GitHub.

3. Select your GitHub repository:

   • Find your GitHub repository by name and connect.

4. Choose deployment method:

   • At the bottom of the page, choose either Automatic Deployment or Manual Deployment (deploy by branch).

5. Initiate deployment:

   • Click on the option you prefer, and the deployment process should begin.

6. Monitor deployment progress:

   • After a while, your app should be deployed. You can check the progress in the Heroku dashboard.

Local Deployment

How to Fork

To fork the repository:

1. Log in to Github.
2. Go to the repository for this project, DylanP400/RetroClassics
3. Click the Fork button in the top right corner.

How to clone

• To clone the repository

1. Log in to GitHub.
2. Go to the repository for this project, DylanP400/RetroClassics
3. Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
4. Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
5. Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.

Credits

Code Used

• In developing this project, I leaned on Code Institute's codebase for Boutique Ado as a reference. While building my own project, I encountered challenges, and during those instances, I consulted Boutique Ado's code or revisited relevant tutorial videos. The search function in Slack became a valuable resource for me, allowing me to explore solutions to common issues faced by previous students.

• I watched Corey Schafer's Django Tutorial to get a better understanding of Django.

Imagery

• I sourced the Background Image from Pexels

• I sourced the Favicon Image from Raw Pexels

• Acquiring suitable images for the products posed a significant challenge. I resorted to using Wikipedia as a source for all product images, leveraging their repository to fulfill the visual requirements of the project.

Acknowledgments

• I extend my heartfelt thanks to my mentor, Rory, for providing invaluable help and guidance throughout the project.

• A special appreciation to the Tutor support system for their assistance whenever I encountered challenges or uncertainties.

• I extend a special appreciation to the Tutor support system for their invaluable assistance whenever I faced challenges or uncertainties throughout this project. I heavily relied on the tutors, particularly when encountering specific bugs, and their support significantly contributed to overcoming obstacles.