The Tech Giants website is an online shop specializing in the latest smartphones and laptops. It offers a range of products from top brands like Apple, Samsung, and Google, with special discounts and promotions. The site features categories for phones and laptops, a section for featured products, and options to sign up for a newsletter for updates on new collections and articles. The website also provides contact information and support for users.
- Introduction
- User Experience
- Project Applications
- Project Databases
- Skeleton
- Features
- Technologies Used
- Validation
- Bugs
- Deployment
The Django E-Commerce project is an advanced online platform designed for purchasing laptops and phones. It offers a robust e-commerce experience where users can browse products, securely place orders using Stripe, and provide feedback through product reviews.
The primary target audience includes tech-savvy individuals aged 18 and older who prefer the convenience of online shopping for electronics.
Users seek a seamless shopping experience with a diverse product catalog, intuitive navigation, secure payment options, and the ability to share product experiences through reviews.
- As a user, I want to explore a variety of laptops and phones to make informed purchase decisions.
- As a user, I want a straightforward sign-in process to access personalized features and complete purchases securely.
- As a user, I want to checkout quickly and securely using Stripe to finalize my purchase.
- As a user, I want to leave detailed reviews to help other shoppers make informed decisions.
- As a visitor I want to add a product to my shopping cart So that I can purchase it later.
- As an admin I want to manage existing products So that I can update or remove products as needed.
- As a user I want to write reviews for products I have purchased so that I can share my feedback with other customers.
- As a visitor I want to view a list of products within a category So that I can choose a product to view in more detail
Implemented essential functionalities including the homepage, navigation bar, user registration and login, and detailed product pages.
Enhanced user experience with a streamlined checkout process, a responsive shopping cart, and comprehensive order details display.
Planned expansions include enabling new sellers to list their products for sale, fostering a dynamic marketplace environment.
The project is meticulously structured to ensure efficient development and user engagement. Applications are modularized to handle distinct tasks, while databases are optimized for scalability and data integrity.
- User Authentication: Secure authentication system for user management.
- Product Catalog: Comprehensive catalog of laptops and phones.
- Shopping Cart: Interactive cart management for seamless shopping experiences.
- Checkout: Secure payment gateway integration with Stripe for hassle-free transactions.
5 databases can be found in the “brush_app” application, which enable the user to create the profile required to upload posts. I created a database in the begining to support the functionality created by my user stories. The first sql map is included here and was an over zealous approach to my goal. Through timing and scope my databases changed and morphed over the duration of creating it. The most up to date map is shown as well.
Captures user-generated content including product titles, user-friendly URLs (slugs), author details, product descriptions, uploaded images, and user reviews for products.
- Product Titles: The names of products listed on the site.
- User-friendly URLs (Slugs): Simplified URLs derived from the product titles for easy navigation and SEO.
- Author Details: Information about the users or authors who created the posts or reviews.
- Product Descriptions: Detailed information about each product.
- Uploaded Images: Visual content associated with products, such as pictures and diagrams.
- User Reviews: Feedback and ratings provided by users about the products.
- Manages uploaded product details such as titles, descriptions, images, and pricing information.
- Titles: The names of the products.
- Descriptions: Information about the products.
- Images: Visual content of the products.
- Pricing Information: The cost details of the products
- This wireframe was created by using Figma Figma Click here to view the PDF
- Presents a visually appealing and informative landing page showcasing featured products and promotional offers.
- Every page throughout the project has a footer with social media links.
- Clicking the social media like redirect the user to the social media page in a new tab, so as not to disrupt the user experience.
- Allows users to manage personal information, view order history, and update preferences.
- The shopping bag page is fully responsive, showing users a picture of the item, name, price per unit, and total price.
- Users can also choose to increase/decrease the number of items in their bag, click the update button to have the prices update.
- user can click the remove link and have all the items within the bag removed, regardless of quantity.
- At the bottom of the page user can find the cost of the bag, cost of delivery, the total and how much they must spend to be eligible for free delivery.
- Enables sellers to upload product details, including images and descriptions, to list items for sale.
- Facilitates easy navigation through a robust search functionality that retrieves relevant products based on user queries.
- Provides intuitive navigation with a responsive navbar that adapts seamlessly across different device sizes.
- Displays comprehensive product details including specifications, pricing, and customer reviews for informed purchasing decisions.
- Enables users to leave feedback and engage in discussions about products through interactive commenting features.
- Allows users to manage their reviews by editing or removing.
- HTML - To create the Django templates for the associated views and models in the project applications.
- CSS - To style the website.
- JavaScript - To create interactive animations for the site.
- Python – Is the primary language of Django and used to create all forms, models and views.
- Django – The framework used in this project to incorporate databases with a website.
- Crispy Forms – Formats the models into forms on webpages using the
|crispyfilter and{% crispy %}tag. - Cloudinary - Used to store website's images.
- Gitpod – Used as the development environment.
- GitHub – The project’s Version Control Management System.
- Heroku – To deploy the webpage.
- Illustrator – For the creation of associated wireframes.
- DrawSQL – For the creation of the database diagrams.
- CSSgradient – For the visualisation of gradients for the sites styling.
- LottieFiles – This hosts the animated logo at the top of the screen.
- Bootstrap – To provide extra styling and out-of-the-box elements e.g. burger menu.
- Google Fonts – For font used in the site.
- My css passed as well when it came to testing as I was frequently testing it in the validator.
- I checked all of my python files with the Code Institute python checker and recieved no issues with any of the files.
Navigation Bar
- Navigation bar is fully responsive on large/medium/small resolutions.
- At 320px, all navigation links are inline and not wrapping on another line.
- All links are correctly redirecting to the correct pages.
- Signing out, correctly shows the correct dropdown options, Log in and Register.
- Signing in, correctly shows the correct dropdown options, My profile, and Logout.
- Admins, have an additional option in the dropdown menu to the Product Management page.
Footer
- Hover CSS is correctly working, changing the color on the icon on hover.
- Links redirect to the correct social media page.
- Links open in a new browser tab.
Products
- On loading products correctly appear in SKU order.
- Sorting functionality works, correctly sorting products by price descending or ascending.
- Confirm product names and prices against their fields in the database.
- Products have the correct tag.
- Tags are correctly redirecting and filtering products by category name.
Products Details
- Correct redirect to the correct product on clicking the product image.
- Products details are correct and match the details in the database.
- Product quantity buttons are correctly disabled when at 1 or 99.
- Add to wishlist button correctly only shows up for logged-in users.
- Links correctly work, redirecting back to the products page and adding the product to the shopping bag.
Reviews
- Product reviews show for the correct product, matching the database.
- Product review form correctly not showing for users not logged in, shows for logged in users.
- Confirm only the user who created the review or superusers have the option to edit a review.
- Editing a review, edits the review, redirects to the correct section of the page.
Admin
- Only admins have access to the Product Management page on the account dropdown.
- Only admins can see the Edit/Delete buttons on the product details page.
- Product Management links correctly redirect to the add product page.
- Adding a product working correctly, the product has the correct information from the form. Correctly shows within the database.
- Editing the product, working fully, reviews are maintained for the products after editing. Details correctly reflected.
- Delete button correctly shows a modal to confirm the delete.
- Deleting a product correctly removed the product from the database, and any reviews for the products are also deleted.
Shopping Bag
- Shopping bag link in the navbar shows the correct value of the current bag session.
- Quantity buttons are working correctly preventing the user from exceeding 99 and going below 1.
- Correct products are shown in the shopping bag.
- Adding items to the bag, and logging in after correctly retains the current bag.
- Correct totals are shown.
- Free delivery threshold correctly updates, shows correct values.
Checkout
- Correct items are carried over from the shopping bag to the checkout page.
- Form correctly responds to invalid inputs.
- Redirects to the checkout success page correctly.
- Stripe correctly showing 200 status webhooks for orders.
Search Bar
- Showing correct search for words searched.
- Adding a new product and search by its name correctly shows the product.
- User feedback is accurate.
The responsiveness of the design was manually checked using the Chrome Developer Tools for various screens.
This included:
- iPhone SE
- Pixel 5
- Samsung Galaxy S8, S20 Ultra
- iPad Air and Mini
- Galaxy Fold
- Nest Hub and Hub Max
I also opted to use the responsiveness option and checked the screens at the following width sizes:
- 350px
- 768px
- 992px
- 1400px
No issues arose, due to the simple layout of the site.
Browser Testing
During development, the testing was mainly done solely using Google Chrome.
In production the site has been tested on the following browsers,
- Google Chrome
- Mozilla Firefox
- Opera
- Microsoft Edge
-
While adding placeholders to the pages, I faced an issue where the post didn't show the Cloudinary link placeholder when no image was provided by the user. This happened because the model's placeholder didn't match properly. I fixed it by directly linking the placeholder in the HTML.
-
There was an issue with the JavaScript redirecting the user to a post detail page after a successful upload. The script expected a JSON response but didn't receive it. I added a check to see what it was receiving, which then allowed it to redirect correctly.
-
I had trouble selecting parts of a form generated by Django in the template because there was no HTML to work with. I used the developer tools to see the structure and fixed the issue of the form overflowing on the page.
-
The slugs for post details were based on the post titles. During manual testing, I found that errors occurred when creating or editing a post with the same title as another. I solved this by generating a random slug for each post, allowing titles to be the same without causing issues.
Lighthouse is a feature of Google Chrome developer tools and is used to assess the performance of the website and its features. I achieved a high-performance score initially, as you can see below:
- If you don't have a Heroku account, start by signing up and logging in.
- To establish a new application, click the "new" button located at the top right corner of the dashboard, then select "Create new app."
- Pick a distinct name for the application, indicate your residing region, and proceed by clicking "Create App."
- Visit elephantsql.com, log in using GitHub, and establish a fresh instance.
- Once your project instance is set up, copy the URL. You can store this value as an environment variable to match the DATABASES variable in settings.py.
- Utilize pip3 install dj_database_url==0.5.0 to install the dj-database-url package version 0.5.0. This will format the URL into a Django-compatible format and necessitate an update to the requirements.txt file.
- Set up a Cloudinary account.
- Upload relevant project images to the "Media Library."
- Retrieve the Cloudinary API URL from your dashboard.
- Execute necessary project migrations by entering python3 manage.py makemigrations followed by python3 manage.py migrate in the terminal.
- Integrate a Procfile into the project, including the line web: gunicorn [project_name].wsgi:application.
Now I have moved the sensitive key alias SECRET_KEY outside the code and used the .env from heroku. As you can see in the screenshot now we are taking it from environment variables.
- Return to Heroku and navigate to the Project’s page. Open the "Settings" tab and locate the "Config Vars" section.
- Within "Config Vars," input the following key-value pairs: Key = PORT : Value = 8000 Key = SECRET_KEY : Value = Your Django Secret Key from settings.py Key = DATABASE_URL : Value = ElephantSQL URL (from step 5) Key = CLOUDINARY_URL : Value = Cloudinary API URL (from step 9)
- Proceed to the "Deploy" tab and scroll to the GitHub deployment method.
- Search and connect to the appropriate repository by selecting the "Connect" button.
- Continue scrolling to the bottom of the "Deploy" Page and choose your desired deployment method. Opt for "Automatically Deploy" to trigger deployment with each new code push, or manually deploy by selecting the button at the page's bottom.
- Building the base of the project with the I think therefore I blog.
- Lottie files webplayer creator.
- How to create a django view.
- Best practice for data models.
- How to use django tags.
- Checking file types with.
- Stack overflow helped a lot with problem solving.
- MDM also contained a lot of helpful resources when building the project.
- W3 schools always has very helpful threads on anything to do with coding.
- Github had plenty of repositories that helped a lot with coding.
- Geeks for geeks had a lot of great information on python.
Here’s a step-by-step guide to help you set up your account:
Visit the Facebook Business Manager Website: business.facebook. Sign In: If you don’t have a Facebook account, you will need to create one. If you already have a Facebook account, log in with your credentials. Create Business Manager Account: Click on the “Create Account” button. Enter your business name, your name, and your business email address. Click “Next” and fill out the remaining details about your business (address, phone number, website, etc.). Click “Submit” to finish creating your Business Manager account.
Go to Business Settings: From the Business Manager dashboard, click on “Business Settings” (usually found in the top right corner). Add a Page: Under the “Accounts” section, click on “Pages.” Click the “Add” button and choose one of the following options: Add a Page: If you have an existing Facebook page, you can add it to your Business Manager by entering the page name or URL. Request Access to a Page: If you need to request access to a page that belongs to another business. Create a New Page: If you need to create a new Facebook page for your business.
Go to Business Settings: From the Business Manager dashboard, click on “Business Settings.” Add an Ad Account: Under the “Accounts” section, click on “Ad Accounts.” Click the “Add” button and choose one of the following options: Add an Ad Account: If you have an existing ad account, enter the ad account ID. Request Access to an Ad Account: If you need to request access to an ad account that belongs to another business. Create a New Ad Account: If you need to create a new ad account, enter the required details (account name, time zone, currency, and payment method).
Access Payment Settings: From the Business Manager dashboard, go to “Business Settings” and then select “Payments.” Add Payment Method: Click on “Add Payment Method” and enter your payment details (credit card, PayPal, etc.).
Manage Users: In Business Settings, under the “People” section, you can add people to your Business Manager and assign roles (Admin, Employee, etc.). Assign Ad Account Roles: Go to “Ad Accounts” under the “Accounts” section. Select the ad account and click on “Assign Partners” or “Assign People” to give access to your team members.
Access Ads Manager: From your Business Manager dashboard, click on “Ads Manager.” Create Campaign: Click the “Create” button. Choose your campaign objective (e.g., Traffic, Conversions, Brand Awareness). Follow the prompts to set up your ad set (audience targeting, budget, schedule) and ad creative (images, videos, text).
Track Performance: Use the Ads Manager to monitor the performance of your ad campaigns. Adjust and Optimize: Based on the performance data, adjust your targeting, budget, and ad creatives to optimize results.
Stay updated with our latest news and offers by following us on Facebook.
Click the image above to visit our Facebook page.