search

Dima-Bulavenko / TechCore

0 stars 1 forks source link

readme

TechCore (Milestone Project 5)

Responsive Mockup

Table of contents

Table of contents generated with markdown-toc

Purpose

TechCore is an e-commerce platform built with the Django framework, designed to provide a seamless shopping experience for tech enthusiasts looking for high-performance CPUs and GPUs. Leveraging Django's powerful backend capabilities, the application features user authentication, efficient data management, and precise routing for a smooth and secure shopping journey. The frontend is enriched with Django’s templating system and HTMX for interactive and dynamic content updates, reducing page reloads and improving responsiveness.

Key features include a customizable price range filter, easy product browsing, a streamlined checkout process with Stripe integration, and a flexible cart system. These features are crafted to deliver a user-friendly and efficient shopping experience, catering to both casual tech shoppers and performance-focused enthusiasts.

Table of contents

E-commerce Business Model

TechCore operates under a direct-to-consumer e-commerce model, specializing in selling high-performance CPUs and GPUs directly to customers without intermediaries. This model allows TechCore to maintain control over product selection, customer relationships, and service quality. Here’s how this business model aligns with TechCore's goals:

Key Components

By adopting this business model, TechCore not only aims to facilitate component sales but also seeks to build a trusted community for those passionate about high-performance hardware, providing an all-inclusive and reliable shopping experience.

UX Design

Epics

To manage the development of key features for TechCore, I organize epics on GitHub by creating issues tagged with the "Epic" label. Each epic contains a well-structured list of user stories and developer tasks that outline the required steps for feature implementation and testing.

These epics ensure that the core functionalities, such as user authentication, shopping cart operations, price filtering, and payment processing, are developed in a systematic and organized manner.

You can find all the epics here.

User Stories

Back to the top

Wireframes

Product List page

Profile page

Form page

Back to the Top

Marketing Strategy

The marketing strategy for TechCore focuses on building a strong online presence, attracting tech-savvy customers, and increasing sales through various digital channels. This approach includes social media engagement, search engine optimization (SEO).

Social Media Presence

To connect with technology enthusiasts and promote the latest CPU and GPU offerings, TechCore has established a presence on Facebook platform. Facebook

Search Engine Optimization (SEO)

To enhance TechCore’s visibility on search engines and draw in more organic traffic, the following SEO practices are implemented:

Agile Development

In this project, I use Agile methodology to manage and track development tasks. Here's a breakdown of how I apply Agile practices:

Task Management

Project Management

Workflow

  1. New Issues: All new issues are added to the Product Backlog milestone by default.
  2. Iteration Setup: When a new iteration begins, a new project board is created, and issues from the Product Backlog are selected and moved to the corresponding Iteration #number milestone.
  3. Execution: During the iteration, the team works on issues as per the priority labels and tracks progress on the GitHub Kanban board.
  4. Review: At the end of each iteration, completed issues are reviewed, and a new iteration is planned with updated priorities and tasks.

This structured approach ensures clear task prioritization and efficient tracking of progress throughout the development cycle.

Design

Color Scheme

The color scheme for TechCore is based on Flowbite’s components, which were adjusted to complement the modern, tech-focused design of the site. This scheme aims to create a visually appealing and professional look, enhancing the shopping experience for tech enthusiasts.

Color Scheme

Typography

This project uses the following Google Font:

Back to the top

Features

User Registration and Authentication

This project utilizes the Django allauth library to handle user registration, authentication, and account management, including social account integration.

User Profile and Notifications

Product Browsing and Filtering

TechCore provides a seamless shopping experience with browsing and filtering options to help users find the right products.

Shopping Cart and Checkout

The shopping cart and checkout system are designed to make purchasing as straightforward as possible.

Admin Management

The admin panel helps administrators manage customer orders efficiently.

Database Schema

The database schema for TechCore is structured to support both product management and user interactions.

Database Schema

Back to the top

Testing

Manual Testing

Navbar

Footer

Product List page

Contact Us page

Cart page

Checkout page

Payment processing

Profile page

Forms

Back to the top

Unit testing

Python unit tests

Unit tests was create with django built-in django test functionality. To run the tests, run the following command in the terminal:

python manage.py test
Test results: Python unit tests

Code validation

HTML Validation

To validate the HTML code, I use the W3C HTML Markup Validator. Since I use htmx in my project, the validator will show some errors related to the htmx attributes, but these can be ignored.

CSS Validation

To validate the CSS code, I use the W3 Jigsaw validator.

Python Validation

To validate the Python code I use Ruff VScode extension.

JS Validation

To validate the JS code I use [ESLint] VScode extension(https://eslint.org/).

Back to the top

Lighthouse

Back to the top

Technologies

Languages

Programs, frameworks, libraries

Back to the top

Environment Variables

To run this project locally, you will need to create a .env file in the root directory of the project and add the following environment variables:

DJANGO_SETTINGS_MODULE=tech_core.settings.dev

SECRET_KEY=
DEBUG=True

# STRIPE
STRIPE_PUBLIC_KEY=
STRIPE_SECRET_KEY=
STRIPE_WH_SECRET=

DB_TYPE=sqlite3
DATABASE_URL=
DB_NAME=
DB_USER=
DB_PASSWORD=
DB_HOST=
DB_PORT=
EMAIL_HOST_USER=
EMAIL_HOST_PASSWORD=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
FACEBOOK_CLIENT_ID=
FACEBOOK_CLIENT_SECRET=

# AWS
AWS_SECRET_ACCESS_KEY=
AWS_ACCESS_KEY_ID=
AWS_STORAGE_BUCKET_NAME=
AWS_S3_REGION_NAME=

GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, FACEBOOK_CLIENT_ID, FACEBOOK_CLIENT_SECRET used for user social authentication.

Deployment

Heroku

The TechCore project was deployed on a Heroku hosting server. The following steps outline the process of deploying the TechCore project and can be applied to deploy another Django project with minor adjustments:

  1. Navigate to your Heroku dashboard and create a new app with a unique name.

  2. Navigate to Settings in Heroku dashboard and click Add buildpacks and choose "nodejs". This buildpack is required to be at te top of the buildpack list.

  3. Install gunicorn as a production-ready webserver for Heroku with command.

    pip install gunicorn

  4. Create a file named Procfile at the root directory of the project.

  5. Add following command to Procfile to run your server in production.

    web: gunicorn tech_core.wsgi

    Note: Replace tech_core with your project name

  6. In the settings.py file update the ALLOWED_HOSTS variable.

    ALLOWED_HOSTS = ['127.0.0.1', '.herokuapp.com']

  7. Install dj-database-url.

    pip install dj-database-url

  8. Import dj-database-url in settings.py.

    import dj_database_url

  9. Install psycopg3 to connect to PostgreSQL database.

    pip install "psycopg[binary,pool]"

  10. In the settings.py replace DATABASES with the following code:

    if DEBUG:
    DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.postgresql",
        "NAME": config("DB_NAME"),
        "USER": config("DB_USER"),
        "PASSWORD": config("DB_PASSWORD"),
        "HOST": config("DB_HOST"),
        "PORT": config("DB_PORT"),
        }
    }
else:
    DATABASES = {
        'default': dj_database_url.parse(config('DATABASE_URL'))
    }

    Note: Replace if clause with your own database for local development

  11. In the .env file update the DEBUG environment variable and add DATABASE_URL new one.

    DEBUG=False
DATABASE_URL=add_URL_of_a_remote_database

    Note: For the TechCore I used database URL provided by Code Institute but you can use other database hosting services< such as Amazon RDS for PostgreSQL/sub>

  12. Reload your terminal and run the following command in terminal to migrate remote database.

    python manage.py migrate

  13. Replace DEBUG=False to DEBUG=True in the .env file.

  14. Return to the Heroku dashboard navigate to the Settings tab and click on Reveal Config Var and add DATABASE_URL environment variable.

  15. Install whitenoise to manage static files on production server.

    pip install whitenoise

  16. Add whitenoise to the MIDDLEWARE list in the settings.py.

    MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    'whitenoise.middleware.WhiteNoiseMiddleware',
]

    Note: The WhiteNoise middleware must be placed directly after the Django SecurityMiddleware

  17. Add STATIC_ROOT and STORAGES variables to the settings.py.

    STORAGES = {
    "staticfiles": {
        "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
    },
}
STATIC_ROOT = BASE_DIR.joinpath("staticfiles")

  18. Run the following command in terminal to collect static files.

    python manage.py tailwind build
python manage.py collectstatic

  19. From the terminal, check the Python version used in your IDE.

    python --version

  20. Look up the supported runtimes here and copy the runtime closest to the one used in your IDE.

  21. Add a runtime.txt file to your app's root directory.

  22. Paste the copied runtime into the runtime.txt file.

  23. Update requirements.txt.

    pip freeze > requirements.txt

  24. Add and commit all changes to the repository.

    git add .
git commit -m "Deploying to Heroku"

  25. Push the changes to your remote branch that you intend to deploy.

    git push

  26. On the Heroku dashboard, and in your app, click on the Deploy tab.

  27. In the Deployment method section enable GitHub integration by clicking on Connect to GitHub.

  28. Start typing your project repo name into the search box and click Search. A list of repositories from your GitHub account should appear. Click on the GitHub repo you want to deploy from.

  29. Scroll to the bottom of the page in the Manual deploy section, choose branch you want to deploy and click Deploy Branch to start a manual deployment of the branch.

  30. Open the Resources tab and choose an eco dyno. This dyno is a lightweight container to run your project.

  31. Verify there is no existing Postgres database add-on. if there is a database add-on select Delete Add-on to remove it.

  32. Click on Open app to view your deployed project.

Back to the top

Clone GitHub Repo

  1. Log into your account on GitHub
  2. Go to the repository of this project TechCore
  3. Click on the code button, and copy your preferred clone link.
  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, paste the link you copied in step 3 and press enter.

Back to the top

Bugs

Back to top

Credits

Media

Back to the top

Design Template

Back to the top

Code

Back to the top

Acknowledgements

I want to convey my immense gratitude to my mentor, Luke Buchanan, for pinpointing my mistakes and providing advice on how to rectify them. Special thanks to my friends who assisted in testing the application, and to the Slack community, always ready to offer valuable tips at any time.

Back to the top