Bragovski is a website that presents a photographer's portfolio as an online shop which serves as the Milestone Project 4 for the Full-Stack Software Development program powered by Code Institute.

Live Website

To build an application that:

• is a secure online e-commerce store
• allows people to explore an artist's portfolio.
• presents the artist's studio and vision in detail.
• generates revenue by selling presented products.

• learn about the artist and his work.
• create their own account which they can use to purchase items.
• feel safe about making purchases.
• manage their personal details and delivery information via an account panel.

• Functional requirements:

  • Option to easily navigate through pages and content;
  • Option to explore items by category;
  • Option to jump to the artist's social media accounts;
  • Option to purchase desired items securely;

• Content requirements:

  • Compelling content that communicates the purpose of the website;
  • Content flexibility for easier scanning;
  • Mixed media content for easy understanding of concepts presented;
  • CTAs;

• "I want to view a list of products/services so that I can select and purchase."
• "I want to view individual product/service details in order to decide what I like and suit my budget best."
• "I want to quickly identify and access products so that I can learn more about what I want."
• "I want to easily view the total of my purchase at any time so that I can avoid going over budget."
• "I want to explore items by category so that I can easily find what I'm interested in."
• "I want to view the total items in my bag so that I can identify the total cost and the items that I will receive with the order."
• "I want to feel that my personal details are secure so that I can confidently provide them to make a purchase."
• "I want to view an order confirmation after checkout so that I can double-check for any mistakes."
• "I want to receive an email of confirmation after checkout so that I can keep a confirmation of what I've just ordered for my records."
• "I want to look up testimonials from other people that have worked with the artist so that I can possibly book a studio session in the future."
• "I want to be able to add testimonials to the section in order to share the experience I had working with the artist."

• "I want to easily register for an account so that I can save my personal/delivery information."
• "I want to easily log in and out so that I can quickly access my personal account information."
• "I want to easily recover my password in case I forget it so that I can quickly recover access to my account."
• "I want to receive a confirmation email after registration so that I can verify that it was successful."
• "I want to be able to update my user profile information so that I can easily change delivery address, contact name or card details."

• "I want to be able to add new products so that I can keep present the new products available."
• "I want to be able to update/remove products so that I can change/delete product criteria."
• "I want to be able to give admin rights so that I can allow other users to administer the website when necessary."

The website is designed to be intuitive and learnable

1. Interaction design:

• The interface responds to the user actions as expected. The scroll/swipe functional behaviour is standard and the buttons respond instantly when actioned;
• Subtle visual feedback will be added throughout the page in order to increase the user's interaction experience;

2. Information architecture:

• The information is structured in nested lists.

• Wireframes

• Mobile

  • Home
  • Shop
  • Product Detail
  • Shopping Bag
  • Checkout
  • Confirmation
  • Profile
  • Studio
  • About
  • Testimonials

• Tablet

  • Home
  • Shop
  • Product Detail
  • Shopping Bag
  • Checkout
  • Confirmation
  • Profile
  • Studio
  • About
  • Testimonials

• Desktop

  • Home
  • Shop
  • Product Detail
  • Shopping Bag
  • Checkout
  • Confirmation
  • Profile
  • Studio
  • About
  • Testimonials

• Color Scheme
  • The four non-colors that I chose reflect the artist's passion for shooting raw, black and white photography. The palette creates a calm environment that brings out the photographies displayed by enhancing contrast.

• Typography

  • One general font was used for this project, with a serif fallback.
    • Fjalla One.

• Media

  • Images used are relevant to the purpose of the website.
  • All images have been resized and compressed in order to boost UX flow.

• Iconography

  • Icons have been used throughout the website in order to boost UX efficiency.

• During development: sqlite3 provided by Django by default
• For deployment: PostgreSQL provided by Heroku

This website presents 9 applications in order: home, products, bag, checkout, profiles, studio, about, testimonials and pages.

1. Navigation Bar(presented in Mobile View by hamburger icon)

• Brand name(clickable logo) is bold and visible. It redirects to the home page.
• Profile icon that takes the user to the profile management page.
• Shopping bag icon that redirects to the user's order summary.

2. Footer

• Social media external links.
• Relevant FAQ and Return Policy CTAs.
• Credits.

3. Home Page

• Instantly presents the idea behind the website and the purpose it serves.
• The carousel shuffles random images from the artist's portfolio to arouse curiosity.
• Big Call to Action button that brings the user to the products page(all categories presented together, filtered by shuffle).

4. Product Page

• Presents all the items available for sale in the shop.
• Displays the image and the name of the product.
• CTA button to product's details.
• Back to Top button to facilitate navigation across multiple page objects.
• Products can be sorted by category from the navigation menu.

5. Product Detail Page

• Shows information about the product such as: image, name, price.
• Quantity of product can be selected and also adjusted from the shopping bag.
• CTA Button to return to Product Page.

6. Shopping Bag Page

• Presents an overview of all the products in the user's bag. All details included.
• Items in the bag can be managed.
• Displays the total cost of the purchase.
• CTA button to return to the Product Page.
• CTA Button to continue to checkout.

7. Checkout Page

• Presents an order summary
• Gives the option to save order details to user's profile if they're logged in.
• Presents a checkout form that must be valid in order to be submitted.
• Credit card test details: 4242 4242 4242 4242 42 42 42424.
• Webhook used to secure the payment.
• CTA button to shopping bag.
• CTA Button to complete order.

8. Confirmation Page

• Displays a Thank You messages.
• Provides the user with all the details of their order.
• CTA button to see the studio presented in the Studio Page.

9. Profile Page

• Accessible to users that have an account, it displays their information.
• Form available to update personal information.
• Order history section that show all the past orders with all their details.

10. Testimonials Page

• Displays all the users testimonials
• Provides a form that can users can complete to submit testimonials.
• Testimonials can be managed from the profile page.

11. Return Policy Page

• Contains information about BRAGOVSKI's order return policy.

12. FAQ Page

• Contains two sections of relevant questions about Delivery and Returns.

13. Django-Allauth Pages

• Sign Up
  • Displays a form that creates an account for the website.
• Log In
  • Displays a form that logs in an existing user.
• Forgot Passowrd
  • Allows users to reset their password.
• Log Out
  • Logs the user out of the session

• Add different sizes to the prints.
• Log In with social media accounts.
• Personal blog(in writing, about photography) page.

• Workspace

  • Gitpod was used as Integrated Development Environment

• Languages

  • HTML5
  • CSS3
  • JavaScript
  • Python

• Frameworks & Libraries

  • Django
  • Font Awesome icons were used to improve aesthetics and UX
  • Google Fonts was used as the main font source
  • Bootstrap v4.6 was used for its responsiveness and styling classes

• Databases

  • sqlite3 as development DB
  • PostgreSQL as production DB

• Version Control

  • Github for hosting the repository.

• Wireframes

  • Balsamiq was used to create the wireframes

• Media

  • Coolors was used to create the color palette
  • Compress JPEG was used to compress images size
  • dbdiagram.io was used to create the database diagram

• Click here for the full testing process.

• Clone the Project

To make a local clone, follow the steps:

1. Log in to GitHub and go to the repository.
2. Click on the green button with the text “Code”.
3. Click on “Open with GitHub Desktop” and follow the prompts in the GitHub Desktop Application or follow the instructions from this link for more detailed information.

• Local Machine

1. Install all the requirements: Go to the workspace of your local copy. In the terminal window of your IDE type: pip3 install -r requirements.txt.

2. Set up the environment variables:

   • Create a .gitignore file in the root directory of the project.
   • Create a .env file. This will contain the following environment variables:

   Import os
   os.environ("SECRET_KEY", "Added by developer")
   os.environ("STRIPE_PUBLIC_KEY", "Added by developer")
   os.environ("STRIPE_SECRET_KEY", "Added by developer")
   os.environ("STRIPE_WH_SECRET", "Added by developer")
   

   • Add the .env file to the .gitignore file. NOTE: See more in the Stripe Documentation to read more about setting the API key.

3. Migrate the models to create the database by the following commands:

   • python3 manage.py makemigrations
   • python3 manage.py migrate

4. Load the data fixtures for categories and product in this exact order:

   • python3 manage.py loaddata categories
   • python3 manage.py loaddata products

5. Create a superuser. The superuser has acces to the admin environment.

   • python3 manage.py createsuperuser
   • Enter desired username, email and password.

6. Run the app: Open your terminal window in your IDE. Type: python3 manage.py runserver and run the app.

7. To acces the admin environment, you can add /admin to the end of your url and login with the superuser.

• Heroku Deployment

1. Set up local workspace for Heroku

   • In terminal window of your IDE type: pip3 freeze -- local > requirements.txt. (The file is needed for Heroku to know which file to install.)
   • Create a Procfile with the following text: web: gunicorn <name app>.wsgi:application (The file is needed for Heroku to know which file is needed as entry point.)
   • Push all these files to your GitHub repository.

2. Set up Heroku

   • Create a Heroku account and create a new app and select your region.
   • Go to resources in Heroku and search for postgres. Select Hobby dev - Free and click on the provision button to add it to the project.
   • Go to the settings app in Heroku and go to Config Vars. Click on Reveal Config Vars and add the following config variables:

   KEY	VALUE
   AWS_ACCESS_KEY_ID	<aws access key>
   AWS_SECRET_ACCESS_KEY	<aws secret access key>
   DATABASE_URL	<postgres database url>
   EMAIL_HOST_PASS	<email password(generated by Gmail)>
   EMAIL_HOST_USER	<email address>
   SECRET_KEY	<your secret key>
   STRIPE_PUBLIC_KEY	<your stripe public key>
   STRIPE_SECRET_KEY	<your stripe secret key>
   STRIPE_WH_SECRET	<your stripe wh key>
   USE_AWS	True

3. Set up Database

   • Copy the DATABASE_URL (Postgres URL) from the config variables of Heroku and past it into the default database in setting.py

   DATABASES = {
       'default': dj_database_url.parse("<DATABASE_URL here>")
   }
   

   NOTE: This setup for the databases is temporary for deployment to Heroku.

   • Migrate the models to create the database by the following commands:
     • python3 manage.py makemigrations
     • python3 manage.py migrate
   • Load the data fixtures for categories and product in this exact order:
     • python3 manage.py loaddata categories
     • python3 manage.py loaddata products
   • Create a superuser. The superuser has acces to the admin environment.
     • python3 manage.py createsuperuser
     • Enter your username, email and password.
   • Now you can remove the DATABASE_URL from settings.py and set the 'old' default DATABSE settings.
   • Adjust the ALLOWED_HOSTS in you settings.py with the following:

   ALLOWED_HOSTS = ['<your Heroku app URL>', 'localhost]
   

   • Push the code to Github.

4. Connect with Heroku

   • Click on the Connect to GitHub section in the deploy tab in Heroku.
     • Search your repository to connect with it.
     • When your repository appears click on connect to connect your repository with the Heroku.
   • Set automatic deploment: Go to the deploy tab in Heroku and scroll down to Aotmatic deployments. Click on Enable Automatic Deploys. By Manual deploy click on Deploy Branch. Heroku will receive the code from Github and host the app using the required packages. Click on Open app in the right corner of your Heroku account. The app wil open and the live link is available from the address bar.

• Hosting static and media files with AWS

The static and media files are hosted in the AWS S3 Bucket. To host them you will need an account and create an S3 bucket and set a group, policy and user in the IAM environment. Read more about the the S3 Bucket storage here. For more information about the storage in your project click here.

• Artist

  Vlad 'Bragovski' Braga for original media content

• Media & Content

  • Vlad Braga for the images
  • Fabrizio Bianchi for creating Coolors which was used to create the color palette

• Code

  • Code Institute video lessons of the Boutique Ado educational project.
  • CSS TRICKS as a general resource.
  • Stack Overflow as a general resource.
  • W3Schools as a general resource.

• My mentor: Precious Ijege for continuous and helpful feedback along the project.
• The Slack community of Code Institute for feedback.
• Peer student: Paul Istratoaie for incredibly helpful feedback along the process and for helping with device testing.