Fine Spirits shop is an ecommerce website allowing users to purchase bottles. It has been developed as milestone project 4 as part of the Code Institute - Diploma in Software Development (Full stack) course. The website is designed to be responsive and accessible on all devices; being at the same time simple but pleasant.

1. UX

• User Stories
• User Centered Design
  • Strategy
    • User needs
  • Scope
  • Structure
  • Skeleton and Wireframes

2. DESIGN

• Color scheme
• Typography
• Imagery
• Logo

3. DATABASE MODEL

• Database model features

4. FEATURES

• Admin Feature
• Design Features
• Features left to implement

5. TECHNOLOGIES USED

• Syntax
• Frameworks, Libraries & Programs

6. TESTING

• Testing document

7. API

• Stripe
• Gmail for Django

8. DEPLOYMENT

• Heroku and Postgres DB
• Amazon Web Services
• Github
  • Forking the repository
  • Creating a Clone

9. CREDITS

10. REFERENCES

11. ACKNOWLEDGEMENTS

1. Be able to easily navigate throughout the site to visualise content and contacts.
2. Check out a specific bottle, visualise the relative details and price.
3. Purchase a bottle.
4. Locate their social media links to see their followings on social media in order to be updated about their latest releases.

5. Be able to log in.
6. Be able to log out.
7. Be able to delete my account.
8. Be able to add personal details.
9. Be able to update personal details.
10. Be able view my order history.

11. Be able to add products to the site.
12. Be able to update product details.
13. Be able to delete products from the site.
14. Have unique access to all features.

15. Make the website as accessible and responsive as possible.
16. Gain a better understanding of the audience by checking their feedback both via the social networks.
17. Use reviews to increase customer satisfaction.
18. Find the best way to allow communication bewteen customers and the organization.

• User needs

The main goal of this website is to increase more and more the popularity of the shop in order to increase sales too. Registered users will be able to see their previous orders, their current ones and get discounts as the registration is treated like a loyalty card membership. In addition to that, as in most e-commerce shops, the convenience of having the personal data already saved is itself a good reason to register.

• The message "Register and get free delivery on orders over 50€" is visible also to registered user so that they have a reminder that when purchasing products and spending over 50€ the delivery is free.

• The website will show a bright palette as well as minimalistic but aesthetically pleasing imagery to invite users to check out the products.

• Demographic:

  • 18 + years of age.
  • Anyone who is interested in spirits.
  • Anyone who would like to purchase a bottle as a present for a friend.

The steps a new user would ideally take when landing onto the website are the following:

• Explore the websites landing page, where the information will explain the user the reason to be of the site.
• Create a new account.
• Explore the additional features available to registered users.
• Purchase the desired bottle.
• Get the feedback of the purchase.
• Log in/out.
• Check out the links in the footer.

The website needs to enable the User to:

• Easy access the features of the website.
• Register and log in if further interested.
• Get in touch with the website owner and/or admin.
• Give feedback.

The website needs to enable the Website owner and/or admin to:

• Develop an online presence .
• Provide an easily navigable website for users.
• Improve the website thanks to the contacts.

This will all be achieved through creating a clear and strong UI focusing on well structured content. Having a clear hierarchy will allow the user to navigate and use the functionality of the website without the need of instructions. Simplicity and UX friendly functionality will be the strongholds of the whole project.

• Features within the design plan with highest priority:

  • Minimal but functional and appealing homepage .
  • Navigation links clearly visible on the top of the website.
  • Responsive navigation bar.
  • Only allow registered users to create and manage their own accounts.
  • Only allow registered users to check out their previous orders.
  • Only allow registered users to delete their account.

• Lower priority features that may not be included in the initial release of the website:

  • The ability for logged in users to search the website database.
  • The possibility to leave comments.
  • Contact section to send an email to the Admin directly from the website (like emailJS).

The information architecture was organized in a fluid and clear way in order to ensure that users could navigate through the site with ease and efficiency.

Wireframe mockups were created in Figma Workspace Click here for final wireframes. The mobile view is intentionally made disproportionate to show how the full page might look on a mobile screen. Several style changes were made in the final project compared to the inital wireframe on Figma. Those changes were mainly related to colours, font size, positioning on the page; all aimed at providing the best user experience and responsiveness. The desktop views represent the first wireframes while the tablet and mobile views the last ones, modified specifically for smaller devices.

The design of the website was created to be as simple and harmonious as possible, not to distract the user with too many color schemes and trying to bring the focus onto the products.

The colours used in this project are presented on a light background, to keep a minimalistic and tidy website, as well as keeping the color contrast the highest possible to facilitate the screen readers and make this site accessible to all. In addition to that there are also some brighter features thought specifically to draw the attention of the user to the main parts.

Please check out the colour Colour palette.

Colour palette

• The selected font for the whole project is Poppins with Sans-Serif as the fallback font in case, for any reason, the font will not be imported into the site correctly.

• For this specific project imagery has been kept simple in order to concentrate the work on the functionality of the app. Images have been selected from Unsplash.
• Other images come from my personal archive.

• The favicon was created using Favicon.io and the logo used to create it was created using an online application called Freelogodesign. It represents a simple glass/bottle with the "Fine Spirits" words.

Logo

• The website is a data-centric one with html, javascript, css used with the bootstrap (version 5) framework as a frontend.

• The backend consists of Python built with the Django framework with a database of a Postgres for the deployed Heroku version (production).

• Postgres is a powerful, open source object-relational database system.

• SQLLite database was used for local development.

• This model contains all fields stored in the database collections with their data type and mimics the structure of what is actually stored in the Postgres database.

The website has the following features based on:

1. A user not logged into the site
2. A regular user logged into the site
3. An admin user The navigation buttons update depending on whether a user is logged in or not, and whether that user is the admin:

There are a number of admin views that have been configured at https://fine-spirits.herokuapp.com/admin; They give excellent CRUD operations to the data in the Postgres database as well as search and filter options. They are as follows:

• Email addresses

• Users

• Orders

• Categories

• Products

• Sites

• Other than through the default Django admin interface, products can be added/created, edited and removed (CRUD) directly from the website when entering with admin credentials. This feature facilitates the management of products thanks to a more friendly and direct user interface. This feature makes things easier for the website owner in case he/she needs to make changes on the products without having to access the Django admin interface.

• Add new product

• Delete Product

• Update/Edit product Details

Each page of the website features a consistent responsive navigational system:

• The Header contains a conventionally placed logo at the top left of the page (clicking this will redirect users back to the home page) and navigation bar at the top right of the page. Hovering over the buttons in the navbar will trigger hover effect.

• User stories covered by this feature:
• 1 - Be able to easily navigate throughout the site to visualise content and contacts.
• 2 - Check out a specific bottle, visualise the relative details and price.
• 5 - Be able to log in.
• 6 - Be able to log out.
• 15 - Make the website as accessible and responsive as possible.

Header

• On smaller screens, the navbar links turn into an hamburger menu/toggle button in the top right corner of the page after the login and bag buttons.

• User stories covered by this feature:
• 1 - Be able to easily navigate throughout the site to visualise content and contacts.
• 2 - Check out a specific bottle, visualise the relative details and price.
• 15 - Make the website as accessible and responsive as possible.

Navbar on small devices

• In the footer is embedded a pop up that warns about the legal age to access pages that sell alcoholic beverages. This is a legal requirement in many countries.
  POP UP

  
• The Footer contains the appropriate social media icons, linking users to the main social media pages of the shop.

• User stories covered by this feature:
• 1 - Be able to easily navigate throughout the site to visualise content and contacts.
• 4 - Locate their social media links to see their followings on social media in order to be updated about their latest releases.
• 15 - Make the website as accessible and responsive as possible.
• 16 - Gain a better understanding of the audience by checking their feedback both via the social networks.
• 17 - Use reviews to increase customer satisfaction.

Footer

• In the footer, there is a Mailto embedded in the email. Hovering over the email will trigger hover effect.

• User stories covered by this feature:
• 1 - Be able to easily navigate throughout the site to visualise content and contacts.
• 18 - Find the best way to allow communication bewteen customers and the organization.

Mailto

• In the top right corner of every page, there is a Search Button . The customer can enter directly the name of the product he/she interested to purchase or the kind of spirit (e.g. Cognac). This improves the UX experience.

• User stories covered by this feature:
• 1 - Be able to easily navigate throughout the site to visualise content and contacts.
• 2 - Check out a specific bottle, visualise the relative details and price.
• 15 - Make the website as accessible and responsive as possible.

Search Button

• Back to the top button - This button ⬆️ is present in the footer so that the user can comfortably click them to be redirected to the top of the page. This feature improves the quality of navigation, especially if using smartphones.

• User stories covered by this feature:
• 1 - Be able to easily navigate throughout the site to visualise content and contacts.
• 15 - Make the website as accessible and responsive as possible.

Btn back to the top

Home Page

• User stories covered by this feature:
• 1 - Be able to easily navigate throughout the site to visualise content and contacts.
• 4 - Locate their social media links to see their followings on social media in order to be updated about their latest releases.
• 15 - Make the website as accessible and responsive as possible.
• 16 - Gain a better understanding of the audience by checking their feedback both via the social networks
• 17 - Use reviews to increase customer satistaction.
• 18 - Fino the best wav to allow communication bewteen customers and the organization.

The Home Page consists of the following elements:

• Page - Red banner with catchy phrase.
• Page - Carousel with "Visit the shop" button in the middle.

Home

Login page

• User stories covered by this feature:
• 5 - Be able to log in.
• 6 - Be able to log out.
• 7 - Be able to delete my account.
• 11 - Be able to add products to the site (if admin).
• 12 - Be able to update product details (if admin).
• 13 - Be able to delete products from the site (if admin).
• 14 - Have unique access to all features (if admin).
• 15 - Make the website as accessible and responsive as possible

The Login page consists of the following elements:

• Login - Red banner with catchy phrase.
• Anonymous user - Allows the user who does not want to register to keep checking anyway by clicking on the appropriate button. The ideal situation would be to have as many registered users as possible but it is always good to allow choice to those who do not want to register.
• Register - It opens the registration page.

Login

Registration Page

• User stories covered by this feature:
• 7 - Be able to delete my account.
• 8 - Be able to add personal details.
• 9 - Be able to update personal details.
• 10 - Be able view my order history.
• 15 - Make the website as accessible and responsive as possible

The Registration page consists of the following elements:

• Banner - Red banner with catchy phrase.
• Email - Type your email.
• Repeat Email - Repeat your email for confirmation.
• Username - Type your username.
• Password - Type your password.
• Repeat password - Repeat your password for confirmation.

Registration

Bag

• User stories covered by this feature:
• 2 - Check out a specific bottle, visualise the relative details and price.
• 3 - Purchase a bottle.
• 15 - Make the website as accessible and responsive as possible

The bag page consists of the following elements:

• Title - Shopping bag
• Centrale element - The user will see the name of the added product(s), quantity, price and buttons to update and remove.
• BTN Keep shopping - Button to go back to the products page to check out other bottles.
• BTN secure checkout - Button to proceed to secure checkout.

Bag

Products Page

• User stories covered by this feature:
• 1 - Be able to easily navigate throughout the site to visualise content and contacts.
• 2 - Check out a specific bottle, visualise the relative details and price.
• 15 - Make the website as accessible and responsive as possible.

The Products page consists of the following elements:

• Title - Products.
• Drop down btn - This button is for sorting by the elements.
• Products - List of products in boostrap cards.

Products

Product Detail

• User stories covered by this feature:
• 2 - Check out a specific bottle, visualise the relative details and price.
• 15 - 15. Make the website as accessible and responsive as possible.

The Product Detail page consists of the following elements:

• Product name - Product name with its description, category (e.g gin), alcohol % and measure (e.g 100 cl)
• BTN quantity - Button to increase and decrease quantity up to a maximum of 15. This feature has been added to make it more realistic. Most bottle stores have in fact very limited stocks on spirits and legal requirements for selling online up to a certain quantity.
• 2 More buttons - Button to keep shopping and button to add to bag.

Product Detail

Profile

• User stories covered by this feature:
• 5 - Be able to login.
• 6 - Be able to log out.
• 7 - Be able to delete my account.
• 8 - Be able to add personal details.
• 9 - Be able to update personal details.
• 10 - Be able view my order history.

The Profile page consists of the following elements:

• Form - Form with default delivery information boxes.
• BTN - Button to update information.
• BTN - Button to delete your profile.
• Order history - In the right part of the page you can see your order history complete of all details.

Profile

Features left to implement

• Improved searching and filtering on the products page.
• The functionality to add and display multiple images on each product.
• API like EmailJS to facilitate communication between customers and shop owner.
• Downloading and implementing a Py currency package that would allow purchases in other currencies.
• A FAQ page.
• Login with social media accounts.
• A live chat to improve the UX experience.
• Implementing other payment systems like Paypal.

---

TECHNOLOGIES USED

Syntax

• HTML5
• CSS
• Markdown
• JavaScript
• JQuery
• Python

---

Frameworks, Libraries & Programs

• Figma:

  • Figma was used to create the [wireframes](put link to wireframes) during the design process.

• Font Awesome

  • Used to include icons.

• Google Fonts

  • Used to import the three fonts used throughout the site xxxxxxxx.

• GitHub

  • Used to host the entire repository for the project.

• GitPod

  • The code editor used to build the entire project.

• TinyPNG

  • Used this to compress the images used on the website to make files smaller.

• Favicon

  • Used to generate the websites favicon logo of various sizes for different devices.

• W3C Validator HTML

  • Validator for HTML.

• W3C Validator CSS

  • Validator for CSS.

• JSHint

  • This is a tool used to detect errors or potential problems within Javascript code, used to test and validate all Javascript written for this project.

• Django

  • Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design.

• Heroku

  • Heroku is a cloud platform as a service (PaaS) supporting several programming languages.
  • The Heroku network runs the customer's apps in virtual containers which execute on a reliable runtime environment.

• BrowserStack

  • Test the functionality and appearance of the project on all main browsers.

• W3Schools

  • To check demos and explanations.

• Stack overflow

  • To find answers to most common problems.

• Lambda Test

  • For cross-browser testing among the major browsers.

• Postgres Db

  • PostgreSQL is a powerful, open source object-relational database system.

• PEP8 Online Check

  • PEP8 online is an online validator for the PY Code.

---

Testing

Testing information can be found in a separate testing ℹ️ file

---

API

Stripe

To set up Stripe, proceed as follows:

1. Register for an account at stripe.com
2. Click on the Developers section of your account once logged in.
3. Under Developers, click on the API keys section.

4. Note the values for the publishable and secret keys

5. In your local environment(env.py) and heroku, create environment variables STRIPE_PUBLIC_KEY and STRIPE_SECRET_KEY with the publishable and secret key values.
   os.environ.setdefault('STRIPE_PUBLIC_KEY', 'YOUR_VALUE_GOES_HERE')
os.environ.setdefault('STRIPE_SECRET_KEY', 'YOUR_VALUE_GOES_HERE')

6. Back in the Developers section of your stripe account click on Webhooks

7. Create a webhook with the url of your website /checkout/wh/, for example: https://fine-spirits.herokuapp.com/checkout/wh/

8. Select the payment_intent.payment_failed and payment_intent.succeeded as events to send.

9. Note the key created for this webhook

10. In your local environment(env.py) and heroku, create environment variable STRIPE_WH_SECRET with the secret values os.environ.setdefault('STRIPE_WH_SECRET', 'YOUR_VALUE_GOES_HERE')

11. Feel free to test out the webhook and note the success/fail attempts for troubleshooting.

12. For futher information please check Stripe Testing in the (TESTING.md) file.

Gmail for Django

To set up the project to send emails and to use a Google account as an SMTP server, the following steps are required:

1. Create an email account at google.com, login, navigate to Settings in your gmail account and then click on Other Google Account Settings.

2. Turn on 2-step verification and follow the steps to enable.

3. Click on app passwords, select Other as the app and give the password a name, for example Django.

4. Click create and a 16 digit password will be generated, note the password down.

5. In the env.py file, create an environment variable called EMAIL_HOST_PASS with the 16 digit password.

6. In the env.py file, create an environment variable called EMAIL_HOST_USER with the email address of the gmail account.

7. Set and confirm the following values in the settings.py file to successfully send emails.
   EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_USE_TLS = True
EMAIL_PORT = 587
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_HOST_USER = os.environ.get('EMAIL_HOST_USER')
EMAIL_HOST_PASSWORD = os.environ.get('EMAIL_HOST_PASS')
DEFAULT_FROM_EMAIL = os.environ.get('EMAIL_HOST_USER')

8. You will also need to set the variables EMAIL_HOST_PASS and EMAIL_HOST_USER in your production instance, for example Heroku.

9. For futher information please check GMAIL testing in the (TESTING.md) file, bottom of the page (Other Features).

---

Deployment

Heroku and Postgres DB

To deploy this application to Heroku, run the following steps:

1. Create an account at heroku.com
2. Create an app, give it a name (for example fine-spirits), and select a region.
3. Under resources search for postgres, and add a Postgres database to the app.

4. Note the DATABASE_URL, this can be set as an environment variable in Heroku and your local deployment(env.py)
5. Install the plugins dj-database-url and psycopg2-binary.
6. Run pip3 freeze > requirements.txt so both are added to the requirements.txt file
7. Create a Procfile with the text: web: gunicorn fine_spirits.wsgi:application for example.
8. In the settings.py ensure the connection is to the Heroku postgres database.
9. Ensure debug is set to false in the settings.py file.
10. Add localhost and fine-spirits.herokuapp.com to the ALLOWED_HOSTS variable in settings.py.
11. Run "python3 manage.py showmigrations" to check the status of the migrations.
12. Run "python3 manage.py migrate" to migrate the database.
13. Run "python3 manage.py createsuperuser" to create a super/admin user.
14. Install gunicorn and add it to the requirements.tx file using the command pip3 freeze > requirements.txt
15. From the CLI login to Heroku using the command heroku git:remote -a fine-spirits
16. Disable collectstatic in Heroku before any code is pushed using the command heroku config:set DISABLE_COLLECTSTATIC=1 -a fine-spirits
17. Push the code to Heroku using the command git push heroku master.
18. Ensure the following environment variables are set in Heroku.

19. Connect the app to GitHub, and enable automatic deploys from main

20. Click deploy to deploy your application to Heroku for the first time
21. Click on the link provided to access the application
22. If you encounter any issues accessing the build logs is a good way to troubleshoot the issue

Amazon Web Services

To set up AWS S3 Bucket, proceed as follows:

1. Create an account at aws.amazon.com
2. Open the S3 application and create an S3 bucket named "fine-spirits".
3. Uncheck the "Block All Public access setting".
4. In the Properties section, navigate to the "Static Website Hosting" section and click edit.
5. Enable the setting, and set the index.html and the error.html values.
6. In the Permissions section, click edit on the CORS configuration and set the below configuration.
7. In the permissions section, click edit on the bucket policy and generate and set the below configuration(or similar to your settings).
8. In the permissions section, click edit on the Access control list(ACL).
9. Set Read access for the Bucket ACL for Everyone (Public Access).
10. The bucket is created, the next step is to open the IAM application to set up access.
11. Create a new user group named "add_group_name".
12. Add the "AmazonS3FullAccess" policy permission for the user group.
13. Go to "Policies" and click "Create New Policy"
14. Click "Import Managed Policy" and select "AmazonS3FullAccess" > Click 'Import'.
15. In the JSON editor, update the policy "Resource" to the following:

"Resource": [
"arn:aws:s3:::add_fine-spirits",
"arn:aws:s3:::add_fine-spirits/*"
]

16. Give the policy a name and click "Create Policy".
17. Add the newly created policy to the user group.
18. Go to Users and create a new user
19. Add the user to the user group "add_group_name"
20. Select "Programmatic access" for the access type
21. Note the AWS_SECRET_ACCESS_KEY and AWS_ACCESS_KEY_ID variables, they are used in other parts of this README for local deployment and Heroku setup.
22. The user is now created with the correct user group and policy.
23. Note the AWS code in settings.py. Note an environment variable called USE_AWS must be set to use these settings, otherwise it will use local storage.
24. These settings set up a cache policy, set the bucket name, and the environment variables AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY that you set in your aws account.
25. The configuration also requires the media/static folders that must be setup in the AWS S3 bucket to store the media and static files.
26. AWS S3 Stored images.
27. AWS S3 Stored static files.

Github

Forking the Repository

By forking the GitHub Repository a copy of the original repository is made on the GitHub account. To view and/or to make changes without affecting the original repository:

1. Log into GitHub or create an account.
2. Locate the GitHub Repository.
3. At the top of the repository, on the right side of the page, select "Fork".
4. You should now have a copy of the original repository in your GitHub account.

Creating a Clone

How to run this project locally:

1. Install the GitPod Browser Extension for Chrome.
2. After installation, restart the browser.
3. Log into GitHub or create an account.
4. Locate the GitHub Repository.
5. Click the green "GitPod" button in the top right corner of the repository. This will trigger a new gitPod workspace to be created from the code in github where you can work locally. Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process

---

CREDITS

Content

• Stack Overflow for guidance
• Psychological properties of text colour in the README.md was found here
• Bootstrap for the Boostrap features.

Media

• Some images come from my personal archive.
• All the other Images were downloaded from Unsplash.

Code

The developer consulted multiple sites in order to better understand the code that they were trying to implement. The following sites were used on a more regular basis:

• Stack Overflow
• W3Schools
• Bootstrap
• MDN Web Docs
• jQuery
• Django
• Python

Acknowledgements

• My mentor Mo Shami for continuous helpful feedback.
• Tutor support at Code Institute for their support.
• My family for opinions and feedback.

---

---