Rebel Beans Coffee Company

You can view the live project here

Rebel Beans

Overview

This is the main website for Rebel Beans, an Amsterdam based Coffee Brewing Company with sustainability in mind. Rebel Beans products ranges from coffee beans to their signature product "Rebel Beans Cold Brew", and they are actively recycling coffee waste in the Netherlands for agricultural use. The website's main focus is to promote their products, raise brand awareness, and inform people about the benefits of recycling, and reducing coffee waste.

The website is fully interactive, built with mobile-first design in mind, and accessible on a wide range of mobile devices, and tablets.

Contents Table

1. UX

   • User Stories
   • Design
   • Wireframes

2. Features

   • Existing Features
   • Features Left to Implement

3. Technologies Used

4. Testing

5. Database

6. Deployment

7. Credits

   • Contents
   • Media
   • Codes
   • Acknowledgements

8. Disclaimer

UX

User stories

First Time Visitor Goals

• I want to understand the main purpose of the website.
• I want to easily navigate through the website.
• I want to be able to easily see the products on the website.
• I want to be able to search through the products on the website.
• I want to be able to easily sort products by category.
• I want to be able to get more details about a certain product on the website.
• I want to find out how I can register for the website.
• I want to be able to easily edit, remove or update products in my shopping bag.
• I want to easily be able to purchase a product from the website.

Registered Visitor Goals

• I want to find out how I can login to my account, or recover my password on the website.
• I want to find out how I can see my past orders on the website.
• I want to find out how I can save my address, and contact details so I can use them later.
• I want to get more information about the brand, and their mission.
• I want to find out how I can leave comments on the website's blog posts.
• I want to find out how I can contact the site owner.

Admin User Goals

• I want to be able to easily Add/Edit/Delete products.
• I want to be able to easily Add/Edit/Delete categories.
• I want my customers to make purchases with ease of mind, and have secure payments.
• I want to be able to easily Add/Edit/Delete posts on my Blog.
• I want to be able to moderate each comment on Blog posts.
• I want to be able to see and manage current orders on the website.
• I want to be able to see and manage current users on the website.

Strategy

• The goal of the website is to promote their coffee products, raise brand awareness, and inform customers about the benefits of coffee recyling. Website also aims to attract more customers, and create a community around their blog by sharing weekly posts about coffee recipes, and sustainability.

Design

Color Scheme

• The colors used throughout the website are:

Typography

• There are two Adobe fonts used throughout the website. Cortado used for Logo text, and headers. Termina was used on all the texts to give the website a warm, and modern feel.

Imagery

• Image for the hompage was chosen to give the visitors a warm welcome, and set the purpose of the website. Blog images were chosen to set the sense of quality, and to make sure users have a good experience during their visit.

Wireframes

• Homepage
• Products Page
• Products Detail Page
• Blog Page
• Blog Detail Page
• About Page
• Shopping Bag Page
• Checkout Page
• Contact Page
• Product Management Page
• Login Page
• Profile Page
• Register Page

Features

Existing Features

• Responsive on all device sizes.
• Navbar and Footer is visible on all pages.

Navbar

• Contains of 2 parts, Top Header and Main Navigation.
• Fixed on top of the page on all device sizes.
• Shown as a collapsible navbar with a hamburger button for triger on Mobile devices and Tables.
• Features a Shop link with product categories, making it easier for customers to sort through products.
• Features a search bar allowing user to make searches throughout the website. Search function allows users to search for products, product descriptions, and allows user to search products by category.
• Features My Account section for users to register or login to the website. Product Management link is only visible for the site Admin, allowing admin user to easily Add new products to the website.
• Features a Shpping Bag showing the total amount of items in the bag.

Homepage

• Responsive on all device sizes.
• Features a background image, and a jumbotron text showing the main purpose of the website.
• Featuers a CTA Shop now button for customers to easily navigate to products page.

Products Page

• Features a clean layout, and responsive on all device sizes.
• Allows user to see the current products, their images, prices, and their categories on the website.
• Category badges are presented on top the page allowing user to easily sort through the products.
• On the right side of the page a dropdown menu is presented, allowing users to easily sort products by name, price, and category.
• Edit/Delete buttons are visible on each product card for Admin user only, allowing Admin user to easily edit, or delete a certain product from the Products Page.

Product Detail Page

• Features a clean layout, and responsive on all device sizes.
• Allows user to see the price, description and category of the specific product.
• Underneath the product description a quantity indicator is present allowing user to select the quantity of the product they want to purchase. For whole coffee beans products, a Grind option is presented to user, allowing them to chose what kind coffee grind they like which contains For espresso, whole coffee beans, or for filter coffee.
• Underneath a Add to bag button is present, allowing user to add their desired product, with the quantity and/or grind to their shopping bag.
• Next to Add to bag button, a Keep shopping link is present, allowing users to go back to the products page.

Shopping Bag

• Features a clean layout, and responsive on all device sizes.
• Allows users to see all the items in their shopping bag, with their thumbnail images, descriptions and quantities.
• Shopping bag also allows users to easily Update or Remove items in their shopping bag.
• On the bottom right side, a summary of their bag total is presented. Allowing user to see the total costs, and delivery fees.
• Underneath the order summary, a Secure Checkout button is present, allowing users to go to the checkout page.
• Next to the Secure Checkout button, Keep shopping button is present, allowing users to go back to the Products page.

Checkout Page

• Features a clean layout, and responsive on all device sizes.
• Checkout page is divided in to two parts.
• On the left side a form for customer details is presented, allowing customers to fill-in their contact details, delivery address, and their payment details. This section is pre-filled for registered users with all their details except for the payment information.
• On the right side summary of their shopping bag is present with all the item details, as well as the grand total.
• Underneath the order form, Complete Order button is present, allowing customers to securely checkout.
• Next to Complete order button, Adjust bag button is presented, allowing customers to go back to the shopping bag page to adjust their orders.
• After a successful checkout, customers are directed to Confirmation page where they can see the summary of their order, as well as their shipping, and contact details.

My Profile Page

• Restricted for registered users only.
• Features a clean layout, and responsive on all device sizes.
• Allows registered users to update their contact, and shipping details, and allows them to see their past orders, and their details.

Product Management Page

• Restricted for registered Admin user only.
• Features a clean layout, and responsive on all device sizes.
• Allows Admin user to add new products to store.

Blog Page

• Features a clean layout, and responsive on all device sizes.
• Allows users to see all the Posts added by the Admin user.
• Each blog post contains blog image, title, information about the author, comment counter showing how many comments the post has, a brief preview of the text content and the date it was added.

Blog Detail Page

• Features a clean layout, and responsive on all device sizes.
• Blog detail page features blog image, title, information about the author, and the date it was added.
• Underneath the blog post a comment section is present allowing users to read the current comments on that specific post.
• Underneath the current comments section, a comment form is present for users, allowing them to leave a comment on that post.
• Each comment is moderated by the Admin before they approved, allowing Admin user to filter spamming or inappropriate content.

Contact Page

• Features a contact form for users or customers to contact the Admin.
• Form allows users to select one of the pre-defined topics allowing Admin to easily categorize the requests.

Registration Page

• Features a registration form for users to easily register for the website

Login Page

• Allows users to easily login to their account to view their past orders, update their details, or leave blog comments.
• Login page also features a Forgot password link, allowing registered users to easily recover their passwords.

Footer

• Contains four sections; Section showing all the accepted payments on the website, Product links allowing users to easily go the desired product category, Quick links to easily navigate through the website, Contact section allowing users to see the store location that opens on a new page using Google Maps, and a email link for users to easily contact the Admin via email.

Features Left to Implement

• Functionality for users to Edit/Delete their Blog Post Comments.
• Newsletter app allowing customers to be notified when new products are addded to the website.
• Order tracking system for customers to track their order from the website.
• Discount coupons for customers to use during sale, or holiday seasons.
• Store locator for customers to locate stores on a Map.
• Social sign-in or registration using Social Media accounts such as Instagram, Facebook or Google.

Technologies Used

Languages Used

• HTML5
• CSS3
• JavaScript
• Python

Frameworks, Libraries, and Programs Used

• Visiual Studio Code
  • Vscode Is the code editor used to develop, commit & push this project to Github.
• Django
  • Django high-level Python web framework that enables rapid development of secure and maintainable websites.
• Amazon Web Services
  • AWS cloud computing platform used for hosting static, and media files of the project.
• PostgreSQL
  • PostgreSQL used for creating the Database for the project.
• Stripe
  • Stripe used for creating the Payments infrastructure for the project.
• GitHub
  • Github is used for:
  1. Tracking the project, and for version control.
  2. As a repository for other users to see the code used in the project.
• Bootstrap
  • Bootstrap to structure the website, and to achieve responsive layout across various mobile devices.
• JQuery
  • JQuery used with Bootstrap.
• Heroku
  • Heroku A platform as a service (PaaS) used for deploying the project.
• Pydot
  • Pydot Graphviz's dot language Python interface.
• GraphViz
  • GraphViz Used for visualizing database.
• Adobe Fonts
  • Adobe Fonts for importing typography.
• Font Awesome
  • Font Awesome for adding a icons.
• W3C Markup Validator
  • W3C Markup Validator to check validity of HTML code.
• PEP8 Online
  • PEP8 Validator to check Python code for PEP8 requirements.
• W3C CSS Validator
  • W3C CSS Validator to check validity of CSS code.
• JSHint Javascript Code Quality Tool
  • JSHint Javascript Code Quality Tool to check the quality of the Javascript code.
• Balsamiq
  • Balsamiq was used for creating wireframes during the design process.

Testing

Testing information can be found in seperate TESTING.md file.

Database

• Database schema was exported from Django using pydot and GraphViz.

Deployment

• To view the deployed version of Rebel Beans Please take the following steps:

Github

• Add this repository to your local workspace:
  • Click on the Rebel Beans repository on GitHub link.
  • Click on the Code button, and copy the URL.
  • Go into your local workspace, and open up a new terminal.
  • Type git clone and paste the URL you copied from GitHub, and press enter. It should look like this:

git clone https://github.com/*username*/*repository*

The process of cloning is now completed. For further information on cloning, visit How to clone from GitHub.

• Open your IDE and run the following command to install the dependencies:

 pip install -r requirements.txt

• Ceate a env.py file in your project root, and set your environment variables:

    DEVELOPMENT=1
    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_SECRET

• In your settings.py file, add your environment settings:

    import os
    
    STRIPE_PUBLIC_KEY = os.getenv('STRIPE_PUBLIC_KEY', '')
    STRIPE_SECRET_KEY = os.getenv('STRIPE_SECRET_KEY', '')
    STRIPE_WH_SECRET = os.getenv('STRIPE_WH_SECRET', '')
    SECRET_KEY = os.getenv('SECRET_KEY', '')

• After setting your environment varibles, run the following commands to migrate models:

    python3 manage.py makemigrations
    python3 manage.py migrate

• Load the data to the database from the db.json file by running following command:

    python3 manage.py loaddata db.json

• Create a superuser for your app

    python3 manage.py createsuperuser

• Run the following command to start the project:

    python3 manage.py runserver

Heroku Deployment

• Log in to Heroku
• Select New on your dashboard and then select Create new app
• Choose a name for your application, select the region closest to your, and then click Create app.
• After you created your app click on Resources tab, using the Add ons search field find, and select Heroku Postgres .
• Select your plan and click confirm.
• In order to use Heroku Postgres you need to install two dependencies dj_database_url and psycopg2-binary

    pip3 install dj_database_url
    pip3 install psycopg2-binary

• After installing the dependencies, freeze your requirements into requirements.txt

    pip3 freeze > requirements.txt

• In your settings.py file import dj_database_url and replace your current Database settings to: Your DATABASE_URL can be found in your Heroku Apps Config Var

    import dj_database_url
    
    DATABASES = {
        'default': dj_database_url.parse('DATABASE_URL')
    }

• After setting your Database, run the following commands to migrate models:

    python3 manage.py makemigrations
    python3 manage.py migrate

• Load the data to the database from the db.json file by running following command:

    python3 manage.py loaddata db.json

• Create a superuser for your app

    python3 manage.py createsuperuser

• Heroku setup is complete, now add an if statement in your settings.py file to set the DATABASES:

  if 'DATABASE_URL' in os.environ:
    DATABASES = {
        'default': dj_database_url.parse(os.environ.get('DATABASE_URL'))
    }
    else:
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.sqlite3',
            'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
        }
    }

• Install gunicorn and freeze your requirements

    pip3 install gunicorn
    pip3 freeze > requirements.txt

• Create a Procfile and add the following code in your Procfile

    echo web: gunicorn <app-name>.wsgi:application

• Connect to Heroku fom the terminal:

    heroku login -i

• Go to back to the Settings tab on your Heroku dashboard, and click Reveal Config Vars and add the following Config Variable, to temporarily disable COLLECTSTATIC:

    DISABLE_COLLECTSTATIC = 1

• In your settings.py file add your Heroku app, and localhost

    ALLOWED_HOSTS = ['YOUR_HEROKU_APP_NAME.herokuapp.com', 'localhost']

• In your Heroku app dashboard, click on Settings tab on your Heroku dashboard, and click Reveal Config Vars and add the following Config Variables:

  Key	Value
  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_SECRET
  EMAIL_HOST_USER	YOUR_EMAIL_ADDRESS
  EMAIL_HOST_PASS	YOUR_EMAIL_APP_PASSWORD

• Then push to Heroku:

    heroku git:remote -a <your heroku app name>
    git push heroku master

• Navigate to Deploy tab on your Heroku apps Dashboard, and click on Enable Automatic Deploys.
• Site is successfully deployed, and any futher changes on the app will automatically be updated everytime they are commited and pushed on Github.

AWS Deployment

• Login to your AWS Management Console, and click on Amazon S3.
• Create a new bucket that matches your App, and uncheck Block all public access.
• Enable Static website hosting from Properties tab.
• Go to Permissions tab, and set your CORS (Cross-origin resouce sharing) settings to enable access between Heroku and your S3 Bucket by

    [
        {
            "AllowedHeaders": [
                "Authorization"
            ],
            "AllowedMethods": [
                "GET"
            ],
            "AllowedOrigins": [
                "*"
            ],
            "ExposeHeaders": []
        }
    ]

• Set your bucket policy using Policy Generator
  • Select Type of Policy - S3 Bucket Policy
  • Principal - * to allow all principles.
  • Actions - Select Get Object
  • Amazon Resource Name (ARN) - Paste your Bucket ARN and add * at the and of your Bucket Resource key arn:aws:s3:::bucket_name/* and then save.
• Click on Access Control List (ACL), and enable List on Everyone (public access) tab.
• On the top of your AWS Management Console, Search for IAM or Identity Access Management
  • Click on User Groups on the left panel, and Create Group
  • Click on Policies and Create Policy
  • Click on JSON and select Import Managed Policy and search for AmazonS3FullAccess and click import.
  • Copy your Bucket ARN and paste it in the Resource

      "Resource": [
          "arn:aws:s3:::bucket_name",
          "arn:aws:s3:::bucket_name/*"
      ]

  • Click on Review Policy
• Go back to User Groups and click on the group name you just created, click on Permissions then Attach Policies and search for the policy you've just created and then click on Attach Policy to attach the policy to the group.
• Click on Users and then click on Add Users
  • Set your user's name and give Programmatic Access
  • Click Next and add the user in your New Group, and Create User
  • After you created the user download user's .csv file which contains user's access key and secret access key.
• Go back to your IDE and install the following dependencies in order to connect Django to AWS S3

    pip3 install boto3
    pip3 install django-storages

• Freeze your requirements:

    pip3 freeze > requirements.txt

• Add it to your installed apps in your settings.py
• Create custom_storages.py file in your project root and add the following code, and then save:

    from django.conf import settings
    from storages.backends.s3boto3 import S3Boto3Storage
    
    
    class StaticStorage(S3Boto3Storage):
        location = settings.STATICFILES_LOCATION
    
    
    class MediaStorage(S3Boto3Storage):
        location = settings.MEDIAFILES_LOCATION

• In your settings.py file add the following code:

# AWS Backend Configuration

    if 'USE_AWS' in os.environ:
        # Cache control
        AWS_S3_OBJECT_PARAMETERS = {
            'Expires': 'Thu, 31 Dec 2099 20:00:00 GMT',
            'CacheControl': 'max-age=94608000',
        }
        
        # Bucket Config
        AWS_STORAGE_BUCKET_NAME = 'YOUR_BUCKET_NAME'
        AWS_S3_REGION_NAME = 'YOUR_BUCKET_REGION'
        AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
        AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
        AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'
    
        # 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}/'

• Add the following config variables in your Heroku App, and remove DISABLE_COLLECTSTATIC=1

  Key	Value
  USE_AWS	True
  AWS_ACCESS_KEY_ID	YOUR_AWS_ACCESS_KEY_ID
  AWS_SECRET_ACCESS_KEY	YOUR_AWS_SECRET_ACCESS_KEY

• Your deployment is now complete.

Credits

Content

• All the content including product images, and product descriptions were taken from Rebel Beans with their consent.
• Cold Brew Ice Cream recipe, and image on the blog page is taken from Coffee Affection.
• Coffee Cake recipe, and image on the blog page is taken from BBC Good Food.
• Molten Fudge Cakes with Cold Brew Syrup recipe, and image on the blog page is taken from Adventures in Cooking.
• Vietnamese Iced Cofee Cake recipe, and image on the blog page is taken from Hummingbird High.
• Cold Brew Coffee Ice Cream recipe, and image on the blog page is taken from Fuss free flavours.

Media

• Image for the homepage was taken from Unsplash.

Codes

• All the code that was used to build the home, bag, checkout, products, profile apps, templates, as well as setting up Stripe Payments, and parts of the CSS has been taken from the Boutique Ado Walkthrough Project by the Code Institute, with minor modifications.
• Code for creating the Blog application, Comments, and Pagination has been taken from the Django Central.
• Code for setting up Custom Error Handling is from Django Central and Medium.
• Code for creating the contact app has been taken from Ordinary Coders with minor modifications.
• Code for the Blog and Blog Post templates and styles were taken from my Wonderdam Milestone Project.
• Code for the Responsove Bootstrap Navigation was taken from Codepen.
• Code for the project footer was taken from MDBootstrap.
• Code for Restricting users to manually updating product quantity was from Code Institute Tutor Sean.

Acknowledgements

• I would like to thank my family, and friends who gave me endless support throughout this journey.
• I would like to thank my mentor Nishant Kumar for his valuable input, and guidance throughout this course.
• I also would like to thank the Code Institute, and their team, as well as the Slack community for making all this possible.

Disclaimer

• All content on the website, including images and text, are used for educational purposes only.

  back to Contents Table