search

AleksandrAtr / darianna-creative

DaRianna Creative is a fictional website created for educational purposes as part of the Code Institute 4_P course's Milestone Project 4.
0 stars 1 forks source link

readme

Project Overview

DaRianna Creative is a fictional website created for educational purposes as part of the Code Institute 4_P course's Milestone Project 4. It is a full-stack website that focuses on using HTML, CSS, Python, Django, and relational database technologies. The website presents the photographer's portfolio, provides headshot services, facilitates fine art print purchases, and offers valuable insights to enhance photo sessions.

site on different devices

Table of contents

Project Planning

Target Audiences


The intended audience spans a wide spectrum of individuals and businesses, encompassing portrait photography enthusiasts, art collectors, and both novice and experienced photographers aiming to enhance their skills. Specifically for photography sessions, the focus is on actors in need of professional headshots, as well as individuals seeking updated profile photos.

Website business goals

User Stories

Issue ID User Story
#1 As a first-time visitor, I want to browse a gallery of fine art prints available for purchase to explore the artistic offerings of the photographer.
#2 As a first-time visitor, I want to browse a gallery of fine art prints available for purchase, categorized by themes or genres.
#3 As a first-time visitor, I want to view detailed information about each fine art print, including high-resolution images, descriptions, dimensions, and pricing, to make informed purchasing decisions.
#4 As a first-time visitor, I want to learn about the headshot services offered by the photographer, including packages available, pricing, and examples of previous work, to assess their suitability for my needs.
#5 As a first-time visitor, I want to easily register for an account on the website, with a straightforward and intuitive process, to access additional features and benefits.
#6 As a registered user, I want a personalized account dashboard where I can manage my profile information including deleting the account.
#7 As a registered user, I want access exclusive content to enhance my overall experience on the website.
#8 As a registered user, I want view order history.
#9 As a registered user, I want to save favourite prints for easy access in the future.
#10 As a registered user, I want to access the website's scheduling feature to view the available time slots for headshot sessions.
#11 As a registered user, my goal is to seamlessly book a photo session by completing an online payment.
#12 As a registered user, I aim to purchase fine art prints conveniently by completing an online payment.
#13 As a registered user, I want to receive regular updates and notifications about new fine art prints, special offers, and upcoming photo sessions to stay informed about the photographer's latest offerings and promotions.
#14 As a first-time user, I aim to purchase fine art prints conveniently by completing an online payment.
#15 As a first-time visitor, I want to access the website's scheduling feature to view the time slots for headshot sessions.
#16 As a registered user, my goal is to seamlessly book a photo session by completing an online payment.
#17 As an admin, I want to have access to a comprehensive content management system where I can easily add, edit, or remove fine art prints, headshot packages, and photo session options, to keep the website's offerings up-to-date and relevant.
#18 As an admin, I want to be able to manage user accounts, including approving registrations, updating account status, and addressing any user inquiries or issues, to ensure a smooth and efficient user experience.
#19 As an admin, I want to have access to analytics and reporting tools to track website traffic, user engagement, sales performance, and other key metrics, to make informed decisions and optimize the website's performance and offerings.
#20 As a first-time visitor, I want to easily discover the services or products offered on the website.

Agile development

User stories have been created in the GitHub Projects - links to the stories are provided in the User Stories table in the Issue ID column. The user stories have been split into categories using the MoSCoW prioritization method -

The primary goal for the MVP was to concentrate on the development of essential features (Must-have items). The Should-have and Could-have shall be addressed in the future development cycles.

The procedural steps during development were as follows:

  1. Transfer a crucial user story from the Sprint Backlog (User Stories) column to the To Do (User Story) column.
  2. Based on the user story, generate tasks related to its fulfilment and store them in the To-do (Tasks and Spikes) column. Subsequently, break down each task into sub-tasks and document them on the task card.
  3. Prepare multiple tasks and initiate their implementation. The one currently in progress is shifted to the In Progress (Tasks and Spikes) column. Mark off completed sub-tasks and document any issues or progress comments.
  4. Upon task completion, relocate it to the Done (Tasks and Spikes) column and close it, providing comments if necessary.
  5. Once all tasks associated with the user story are finished, move the user story to the Done (User Stories) column, including any pertinent comments.
  6. Repeat the process until the project phase completion.

This methodology centred on developing essential features first, enabling flexibility, and allowing incremental development. The approach incorporated transparent progress tracking through visual boards and early identification of issues.

The details of the user stories and associated priority labels can be found in Projects.

Minimally viable product (MVP) for the project submission

Unregistered users

Registered users

Wireframes

The wireframes were developed during the early stages of product development with the aim of establishing a consistent layout. This approach facilitates easy navigation for users while minimizing the learning curve.

High level website design desktop/mobile -


Home page

Link

Headshots page

Link

Headshots product detail

Link

Artsale page

Link

Artsale product detail

Link

Database Schema

During the planning phase, I developed a database schema to efficiently organize my data, aligning with the website's business goals and user stories. The schema underwent slight modifications during development. Below is the final version represented in the high-level database schema diagram.

High-level Database Schema

Future Improvements

For future implementations, consider the "Should Have" and "Could Have" items outlined in the User Stories on the GitHub Projects board. These tasks were not completed before the Code Institute project submission deadline but incorporating them will significantly enhance the overall customer experience. Explore the Agile Development section for more details and refer directly to the user stories on GitHub Projects.

Additionally, it is suggested to include the following enhancements:

These enhancements are discussed further in the Website Main Features section below.

Website colour palette

The website embraces a sleek and minimalist colour palette, primarily featuring black and white hues and shades of grey. This monochromatic scheme enhances the site's modern and creative vibe, presenting a refined and polished aesthetic. The simplicity of the colour scheme directs attention to the content and visuals, resulting in a cohesive and visually appealing user experience.

Typography

The website features "Roboto Mono," designed by Google. Roboto Mono expands the Roboto-type family with a monospaced variant. Similar to other fonts within the Roboto family, it's specifically designed for enhanced readability on screens across various devices and reading conditions. It is stylish and elegant and was chosen for its clean and modern appearance, which complements the website's overall aesthetic.

Main Website Features

At the MVP stage, the website offers two layouts:

Unregistered users can easily create new accounts by signing up.

Registered users enjoy additional features, including:

Both registered and unregistered users have the ability to purchase the products offered.

Consistency is maintained across pages with:

Navigation bar mobile view bag empty

Navigation bar desktop view bag empty

Navigation bar mobile view bag not empty

Navigation bar desktop view bag not empty

The website's design is responsive, ensuring usability across various screen sizes.

Products Sale

The website includes pages for Headshots, Artsale, and Workshops, each offering various products displayed similarly. Products are presented in card format, showcasing an image, name, price, and rating, with a View button for more details. The detailed product page provides additional information, including reviews.

Products Review

Registered users can add, edit, or delete reviews on the product detail page. Admins can also delete reviews from others.

CRUD

Users have CRUD functionality for reviews based on their registration status.

Payments

Payments are facilitated through Stripe, ensuring secure transactions.

About Page Overview

The About page serves as the Home page or landing page. It's designed to welcome users with easy navigation and essential information. It includes a straightforward menu for moving around the site and a header that captures visitors' attention, setting the tone for the site's content and information about the business. The footer at the bottom of the page has space for extra details like contact information or useful links.

Key Components of the main section:

Mobile view

Desktop view

Headshots Page

The Headshots page showcases Portrait photography packages. It provides a seamless user experience with intuitive navigation. Each product listing displays the package name, price, and rating, allowing visitors to evaluate the offerings quickly. The page layout reflects the business's professionalism and invites potential customers to explore further.

The original plan included adding Portfolio photographs alongside the products for sale, but this feature was postponed due to time constraints and is suggested for future improvements.

Key Components of the main section:

Mobile view

Desktop view

Artsale Page

The Artsale page features a collection of fine art prints, allowing users to explore and purchase unique artworks. Like other product pages, each item is presented in card format, showcasing its name, price, rating, and size. Users can quickly assess the available prints and navigate to detailed views for more information.

The fine art prints on the Artsale page differ from other products such as Headshots and Workshops due to their varying sizes. While the intention was to implement different pricing based on print size, this feature was not prioritized due to time constraints. However, it is suggested for future improvements to enhance the flexibility and customization options for customers.

Key Components of the main section:

Mobile view

Desktop view

Workshops Page

The Workshops page showcases a selection of portrait photography workshops offered by the business. Each workshop is presented in card format, displaying its name, price, rating, and other relevant details. Users can easily browse through the available workshops and access detailed views for more information.

The workshops featured on this page are tailored for portrait photography enthusiasts and professionals. While the initial plan included offering different workshop packages with varying content and durations, this feature was not implemented due to time constraints. It is recommended for future improvements to expand the workshop offerings and provide more options for users.

Key Components of the main section:

Mobile view

Desktop view

Blog Page

The Blog page is designed to serve as a platform for the business to share informative articles with its audience. It offers valuable insights, tips, and information related to the website's niche. Initially, there were plans to implement CRUD functionality for the superuser to manage the blog content. However, due to time constraints, this feature was not prioritized and is suggested for future improvements.

Key Components of the main section:

Mobile view

Desktop view

Profile Page

The Profile page empowers users to manage their account details efficiently. It offers functionality for users to update their shipping information and view their order history. By providing access to these features, the Profile page enhances the user experience by allowing customers to maintain accurate information and track their past orders effectively.

Key Components of the main section:

Mobile view

Desktop view

Bag Page

The Bag page offers users a convenient overview of their ordered products and allows them to manage their selections easily. Users can review the products in their bag, adjust quantities, or remove items as needed. Additionally, the page provides intuitive navigation options, such as links to Keep Shopping or proceed to Checkout, streamlining the user's shopping experience.

Key Components of the main section:

Mobile view

Desktop view

Checkout Page

The Checkout page streamlines the purchasing process by providing users with a comprehensive overview of their selected products, including prices and total costs. Additionally, users can enter their shipping address and payment details via input forms conveniently located on the page. Once all necessary information is provided, users can submit their order seamlessly.

Key Components of the main section:

Mobile view

Desktop view

Product Administration Page

The Product Administration page is designed for superusers or administrators to manage products on the website. This page provides a user-friendly interface with form input fields where product details can be entered, including the product name, description, price, and other relevant information. Additionally, users have the option to upload an image for the product, enhancing the visual presentation. By utilizing this page, administrators can efficiently add new products to the website and ensure an up-to-date and comprehensive product catalog.

Key Features:

Mobile view

Desktop view

Technologies Used

Languages

Backend Modules / Packages & Frameworks

Databases

Frontend Frameworks / Libraries

Other Tools

Testing

View Testing Documentation

Deployment

Deployment facilitates the transition of your project from your local environment or IDE to publicly accessible hosting for others to access and enjoy. Below are the detailed steps you'll need to follow. These instructions assume you're using an IDE like VS Code or cloud based GitPod.

Project Preparation in Your IDE

Note: Python Installation Required

Please note that it's assumed Python is installed on the computer or IDE cloud based platform for deploying this project. If you haven't installed Python yet, you'll need to download and install it from the official Python website before proceeding with the deployment process.

  1. Install Required Packages

Open your IDE and execute the following commands in your terminal:

pip3 install dj_database_url==0.5.0 psycopg2

  1. Update Requirements

Update your requirements.txt to include the newly installed packages.

pip freeze > requirements.txt
  1. Modify settings.py

In your settings.py, import dj_database_url under the import for os.

import os
import dj_database_url

Setting up the ElephantSQL Database

Log into ElephantSQL and create database instance.

  1. Click on "Create New Instance".
  2. Input an instance name.
  3. Select the free Tiny Turtle plan.
  4. Leave the tags field blank.
  5. Select a region closest to you for the data center.
  6. Review your instance details and confirm by creating the instance.
  7. Copy the URL of the newly created database instance for later use.

Setting up an Amazon S3 Bucket for Static Website Hosting

This guide will walk you through the process of setting up an Amazon S3 bucket for hosting a static website, including necessary permissions and security configurations using AWS IAM.

Creating and Configuring the S3 Bucket

  1. Create an AWS Account:

    • Sign up or log into your Amazon AWS account.

  2. Create a New S3 Bucket:

    • Navigate to the S3 service in the AWS Management Console.
    • Click "Create bucket".
    • Provide a unique bucket name and select an appropriate region.
    • Uncheck "Block all public access" under the permissions settings to allow public access.
    • Acknowledge the warning that the bucket will be publicly accessible.

  3. Enable Static Website Hosting:

    • Go to the "Properties" tab for your bucket.
    • Activate "Static website hosting".
    • Set 'index.html' as the index document.
    • Click "Save".

  4. Configure CORS:

    • Move to the "Permissions" tab and click on "CORS configuration".
    • Input the following JSON and save: 
      [
{
 "AllowedHeaders": ["Authorization"],
 "AllowedMethods": ["GET"],
 "AllowedOrigins": ["*"],
 "ExposeHeaders": []
}
]

  5. Set Up Bucket Policy:

    • Still under the "Permissions" tab, click "Bucket Policy".
    • Generate a Bucket Policy using the policy generator:
      • Select "S3 Bucket Policy" as the type.
      • Set principal to "*".
      • Paste the ARN from your bucket.
      • Add the statement and generate the policy.
    • Copy and paste the generated policy JSON into the bucket policy editor.
    • Save your changes.

  6. Adjust Access Control List (ACL):

    • Under "Access control list (ACL)", grant "List" permissions to "Everyone (public access)".
    • Confirm to acknowledge public access.
    • Save the configuration.

Configuring AWS IAM for Secure Access

  1. Create an IAM User Group:

    • From the IAM dashboard, select "User Groups".
    • Create a new group (e.g., manage-darianna-creative).
    • Proceed without adding a policy directly; create the group.

  2. Create and Attach a Policy:

    • Select "Policies" and then "Create policy".
    • Use the JSON tab to import the "AmazonS3FullAccess" managed policy.
    • Modify the resource block to include your bucket's ARN, like so: 
      "Resource": [
"arn:aws:s3:::darianna-creative",
"arn:aws:s3:::darianna-creative/*"
]
    • Name your policy (e.g., darianna-creative-policy) and create it.

  3. Attach Policy to Group:

    • Go back to your user group, select it, and attach the newly created policy under "Permissions".

  4. Create an IAM User:

    • In "Users", create a new user (e.g., manage-darianna-creative-user) with "Programmatic access".
    • Add this user to the group you created.
    • Finalize user creation and download the .csv file containing their access key and secret. This is crucial as it cannot be downloaded again later.

Heroku Deployment

  1. Log into Heroku Account

    • Open your web browser and log into your Heroku account.

  2. Create New App

    • Click on the "New" button and select 'Create New App'.

  3. Name Your App

    • Choose a unique name for your app.
    • Set the region to Europe or your preferred region.

  4. Choose Deployment Method

    • Select GitHub as the deployment method.
    • Search for your repository name.

  5. Update Config Variables

    • After selecting your repository, navigate to the settings tab.
    • Update the config variables as needed.

  6. Enable Automatic Deployment

    • Go back to the deploy tab.
    • Enable automatic deployment for seamless updates.

Update DATABASE Settings in Django project

  1. Update Database Setting:

    Comment out the original SQLite connection and add a new connection to use ElephantSQL:

    DATABASES = {
    'default': dj_database_url.parse('your-database-url-here')
}

    IMPORTANT: Do not commit this change with your database URL. This step is temporary for migration purposes.

  2. Verify Database Connection:

    Run the following command to ensure you're connected to the external database:

    python3 manage.py showmigrations

    You should see a list of migrations none of which are applied yet.

  3. Migrate Database Models:

    Execute the migrate command to apply database models to your new database:

    python3 manage.py migrate

  4. Create a Superuser:

    Create a superuser for your new database:

    python3 manage.py createsuperuser

    Follow the prompts to set up your superuser's username, password, and email (optional).

  5. Revert settings.py Changes:

    To maintain security and prevent exposure of our database URL, revert the DATABASES setting in settings.py to utilize the local SQLite database again.

DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), } }

Cloning

You can clone the repository by following these steps:

To clone the repository, please follow these steps:

  1. Go to the GitHub repository.
  2. Locate the "Code" button above the list of files and click it.
  3. Choose your preferred cloning method (HTTPS, SSH, or GitHub CLI) and click the copy button to copy the repository URL to your clipboard.
  4. Open Git shell or Terminal on your local machine.
  5. Change the current working directory to the location where you want to clone the repository.

  6. In your terminal, type the following command to clone the repository:

    
git clone https://github.com/AleksandrAtr/darianna-creative.git
### Forking

By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository. You can fork this repository by using the following steps:

  1. Login to GitHub and locate the GitHub Repository
  2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
  3. Once clicked, you should now have a copy of the original repository in your own GitHub account!

You can install this project's requirements (where applicable) using:

You can update your requirements.txt file using:

The Procfile should be a project level file and can be created using:

Note: this project can be cloned or forked in order to make a local copy on your own system.

For either method, you will need to install any applicable packages found within the requirements.txt file.

DATABASE_URL STRIPE_PUBLIC_KEY STRIPE_SECRET_KEY STRIPE_WH_SECRET

If you use AWS to host your static/media files you will also need to set

AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
AWS_STORAGE_BUCKET_NAME
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'

Otherwise these must be adjusted as appropriate within settings.py

Static and Media Files

STATICFILES_STORAGE = 'custom_storages.StaticStorage'
STATICFILES_LOCATION = 'static'
DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'
MEDIAFILES_LOCATION = 'media'
# Override static and media URLs in production
STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/'
MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'

If you use gmail as your service provider for email then you will also need to set environment variables for:

EMAIL_HOST_USER 
EMAIL_HOST_PASSWORD 
DEFAULT_FROM_EMAIL

Setting up Stripe Payments on your deployed site

  1. Log in to Stripe, click on the developers tab and API keys copy the API key and set them in Heroku as config variables in the following:

    • STRIPE_PUBLIC_KEY: Stripe publishable key goes here
    • STRIPE_SECRET_KEY: Stripe secret key goes here

  2. Back in Stripe set up a new webhook for your deployed site by clicking on webhooks, click on 'add endpoint' and paste in your deployed site's URL setting it to listen for all events.

  3. Click on your newly set up webhook and click on 'Signing Secret' at the top to reveal the secret value. Copy it and set it as a new config variable in Heroku:

    • STRIPE_WH_SECRET: Signing secret from new webhook.

Credits:

Content

Code

Website development:

During the project development, references were made to various online learning resources to get inspiration for the design and problems solving.

Personal appreciation:

Thank you, Code Institute team, for your invaluable help and support throughout the course. Your efforts are greatly appreciated.

I'm thankful to my mentor, Yulia Konovalova, for her invaluable guidance and support. Thank you, Yulia!

I'm grateful to my wife, Margarita, for her support and feedback on the website's visuals, which made it more user-friendly and appealing. Thank you, Margarita! Love you!!!

I'm grateful to my MOTHER, Galina, for providing mental support, beliefs and childcare for our children during development period - You're our Star!!! Love you!!!!