/vape-shop

Primary LanguageHTML

Vape Attitude

EasyVape is a E-Commerce webpage, produced as my final project in CodeInstitute. This is a fullstack website, which "sells" Vapes and E-Juices DHe by EasyVape, which is a fictional company.

The main technologies used were HTML, CSS, JS, Jquery, Python and Django. All images were created using Dall-E-2

Click here to visit the deployed website.

Table of contents

  1. Website presentation
  2. Structure
  3. UX
  4. User Stories
  5. Agile Workflow
  6. Business Plan
  7. Technologies Used
  8. Testing
  9. Deployment
  10. Credits

Website presentation

In this section, I want to show you how to navigate this website, how to check for products, add products, check out, how to add a review, add to products to the wishlist and fill the contact form.

Home

This is the Home Page, it includes the navigation bar, a jumbotron image with an invitation to shop and the footer.

Home Page Image

Navigation Bar

In the Navigation Bar the user is able to user the search bar, check for products, access the contact form, check his bag and by clicking on the account, he can access his profile and wishlist.

Nav-Bar Image
Search-Bar Results Image This is the result if the user searchs for "mint" in the search bar.
Account Image Here you can access your Profile, Wishlist. Register, Login or Logout.

Products

Here is the product list page, the user is able to see a list of products and choose which one he is interested.

Products List image

Products Detail

Here in the Product Detail page, the user is able to select the product quantity, add it to the bag, add to the wishlist and write a review.

Product Image

Adding Products to the Bag

Inside the Product Detail page, the user can add products to the bag, by clicking on the add to the bag

Product Image

After this, go to the bag icon on the top left, here in the bag page, you can increase the quantity or remove the products. If the user is satisfied he can click on Secure Checkout to be redirected to the checkout page.

Bag Page Images

Checkout

Here in the Checkout Page, the user is able to see his order items and total. To complete the checkout you need to fill in the necessary forms. If you want to test your purchase you can type "4242 4242 4242 4242" in the card field, Stripe will know this is a test

Checkout Images

Also, the user will receive an email with the purchase information.

Checkout Email Image

Contact Form

If needed, the user can also write a Contact form. The site owner will be able to read in the admin page and he will also receive a email with your name and subject.

Contact Form Image

Wishlist

In the product detail page the user can add a product to the wishlist. In order to access the wishlist, you can click on manage wishlist or in the account menu in the top left of the nav bar. Inside the Wishlist page you can see your favorite products there and remove them if necessary.

Wishlist Images Click on "Add to Wishlist" button
In order to access your wishlist click on the "Manage Wishlist"
Or you can click here.
This is your wishlist page
In order to remove click on the "Remove from Wishlist" Button.

Reviews

Inside the product detail page, the user can also add a review, which will be posted after the admin analyzes the review.

Review Images

Footer

The footer can be found on the bottom of every page. Here the user can access our facebook and instagram or twitter, which were not created. The user can also see how to reach us and where to find, which are "fake" locations. And also, the user can subscribe to our Newsletter by adding his email and clicking on the subscribe button.

Footer Image

Structure

Wireframe

Wireframe created using Balsamiq

Wireframe Home
Wireframe Products List
Wireframe Product Detail
Wireframe Bag
Wireframe Checkout
Wireframe Profile

Data Scheme

ERD

Here is the entity relationship diagram (ERD), showing the relationships between the various models used int his project.

ERD image

UX

Site User Goal

  • Quickly identify what the website is about
  • Search for Products
  • Add Products and Manage products in the bag
  • Secure Checkout, provided by Stripe
  • Register for an account
  • Subscribe to a newsletter
  • Add a review
  • Add products to a wishlist
  • Contact the site owner via the contact form.
  • Receive confirmation of the purchase

Site Owner Goal

  • Sell items online
  • Add new products and categories easily.
  • Manage user reviews to avoid malicious comments.
  • Read user contact form in the admin panel.
  • Receive payment securely via Stripe.

Agile Workflow

This project was created using Agile techniques during development, such as:

  • User stories: displayed using GitHub Issues.
  • MoSCoW method: by adding a priority to each issue and display it using tags.
  • ToDo, In Progress and Done: using the GitHub Kanban board.

You can access the Kanban board that was used during the project development here.

You can access the list of issues/user stories used during the development of this project here

Back to Table of contents

User Stories

View a list of Products

  • As a user I can View a list of products so that I can select some to purchase.

View product detail

  • As a user I can view selected product detail so that I can get more information about the product.

View the purchase total

  • As a User I can view the purchase total so that keep control of how much I am about to spend.

Account Register

  • As a user I can register for an account so that have a personal account and view my profile.

Login/Logout

  • As a user I can easily login or logout so that Access my profile or logout my account.

Email Confirmation

  • As a user I can receive an email confirmation so that verify that my account registration was successful.

Personalized user profile

  • As a user I can have a personalized profile so that view order history, confirmation and save payment information.

Sort the list of products

  • As a user I can sort the list of products so that easily identify the best rated, best priced and categorically sorted products.

Sort a specific category of product

  • As a user I can sort a specific category of product so that find the best priced or best-rated product in a specific category, or sort the product by category name.

Sort multiple categories of products simultaneously

  • As a user I can sort multiple categories of products simultaneously so that find the best-priced or best-rated products across broad categories, such as vapes or e-liquid.

Search Products

  • As a user I can search products so that find a specific product.

Select quantity of product

  • As a user I can select quantity of product so that decide how many I want to purchase.

View items in my bag

  • As a user I can view items in my bag so that identify the total cost of my purchase and all items I will receive.

Adjust items in the bag

  • As a user I can adjust items in the bag so that easily make changes to my purchase.

Order Confirmation

  • As a user I can view the order confirmation so that certify that my order was successful.

Checkout Email Confirmation

  • As a user I can receive a email confirmation after checkout so that keep a record of my purchase.

Payment Information

  • As a user I can easily enter my payment information so that checkout quickly.

Add products

  • As a store owner I can add a product so that display items in my website.

Edit/Update Product

  • As a Store Owner I can Edit/Update Product so that change products price, description, image and other criteria.

Delete a Product

  • As a Store Owner I can Delete a Product so that remove items that are no longer for sale.

Add Products to a Wishlist

  • As a user I can add products to a Wishlist so that I can save my favorite products.

Remove Products from Wishlist

  • As a user I can Remove Products from Wishlist so that delete unwanted items from there.

Write a Review

  • As a user I can write a review so that I can tell others user about my experience with the purchased item.

Read Reviews

  • As a user I can read reviews so that I can have more information about the item I am about to purchase.

Delete Review

  • As a user I can Delete a review so that change my review if needed.

Contact Form

  • As a user I can write a form so that I can contact the owner.

Business Plan

Business Model

Vape Attitude uses Business-to-Consumer(B2C) retail model. This website is the online platform where the company connects it's products with the costumers. All Vapes and E-Liquids are produced by Vape Attitude and sold on the webpage.

The Customer Orders from the Website, the Website sends the Order Request to the Warehouse and from the Warehouse the Order is sent to the Customer.

Products

We currently offer 21 Products, which are divided into these Categories; MODS, PODS, E-Juices with Nicotine and Without Nicotine.

  • 7 Vapes

    • Which 4 are MODS, with price ranging from 90 Euros to 120 Euros.
    • Which 2 are PODS, with price ranging from 45 Euros to 66 Euros.

  • 14 E-Juices

    • Which 7 contain Nicotine, with price ranging from 5 Euros to 6.50 Euros.
    • Which 7 do not cotain Nicotine, with price ranging from 3.50 euros to 4 Euros.

Delivery

Our products are sent directly to the user location, the delivery fee is 10% percent of the Product Total Price. But, if the user spends more than 80 Euros we offer Free Delivery.

Marketing

Since Facebook has one of the highest numbers of users worldwide, we opted to create a Facebook page to connect with our users.

Also, users can subscribe to our Newsletter by filling out the form found on the bottom of the page, provided by MailChimp.

Search Engine Optimisation

In order to improve the SEO, I have added a sitemap.xml and robots.txt to the website.

Technologies Used

Main Tech

Back to Table of contents

Applications, Libraries and Platforms

  • Git
    • Used for version control to commit to Git and Push to GitHub.
  • Gitpod
    • Used as the IDE to write all the code used in this project.
  • Github
    • GitHub is used to store the projects code after being pushed from Git.
  • Heroku
    • Used to deploy the application.
  • Google Fonts
    • Used to import the fonts.
  • FontAwesome
    • Used to import icons.
  • Balsamiq Wireframes
    • Used to create the project's wireframe.
  • Amazon Web Services
    • Used to host all images and static files.
  • Django AllAuth
    • Used to deal with user account registration.
  • Chrome DevTool
    • Used to debug and test new styles.
  • ChatGTP
    • Used to debug.
  • Dall-E-2
    • Used to create all Images.

Testing

  • I have used a combination of automated test and manual testing.

CSS Testing

HTML Testing

Back to Table of contents

Manual Testing

  • Here is the sequence of manual test I have applied to check if all applications work.

As a user I want to register.

  • Steps:

    1. Click on the Account Menu, on the top left.
    2. Select Register.
    3. Fill up the form.
    4. Check your e-mail.
    5. Click on the link and confirm.

  • Outcome:

    • Pass. User is now registered and able to login.

Graphic Example Below.

User Register Testing Images

As a user I want to recover my password.

  • Steps:

    1. Click on the Account Menu, on the top left.
    2. Select Login.
    3. Click on "Forgot Password"
    4. Check your e-mail.
    5. Click on the link.
    6. Add new Password.

  • Outcome:

    • Pass. User has a new password and able to log in.

Graphic Example Below.

User Password Recovery Testing Images

As a user I want to Login.

  • Steps:

    1. Click on the Account Menu, on the top left.
    2. Select Login.
    3. Fill up the Sign In Form.
    4. Click on the Sign in Button.

  • Outcome:

    • Pass. User is now logged in.

Graphic Example Below.

User Sign In Testing Images

As a user I want to Logout.

  • Steps:

    1. Click on the Account Menu, on the top left.
    2. Select Logout.
    3. Click on Sign Out

  • Outcome:

    • Pass. User is now logged out.

Graphic Example Below.

User Logout Testing Images

As a user I want to view a list of products and sort by Price (Low to High).

  • Steps:

    1. In the Nav Bar, select the Category wanted.
    2. Inside the Product Detail page, on the top left Click on Sort By.
    3. Select Price (low to high)

  • Outcome:

    • Pass. User can see the product list and sort it by price.

Graphic Example Below.

Product List and Sorting Testing Images

As a user I want to view the product detail.

  • Steps:

    1. In the Product List Page.
    2. Click on the wanted Product.

  • Outcome:

    • Pass. User can see the product detail page.

Graphic Example Below.

Product Detail Testing Images

As a user I want to add product to the bag.

  • Steps:

    1. In the Product Detail Page.
    2. Select the amount needed.
    3. Click on Add to Bag.

  • Outcome:

    • Pass. User is able to Add the Product to the Bag.

Graphic Example Below.

Add to Bag Testing Images

As a user I want to view my bag and increase the quantity of the product.

  • Steps:

    1. On the top left of the page, click on the bag icon.
    2. Select the quantity needed.
    3. Click on Update.

  • Outcome:

    • Pass. User is able to view his bag and increase the item amount.

Graphic Example Below.

Add to Bag Testing Images

As a user I want to Checkout and Receive a Confirmation.

  • Steps:

    1. In the bag page, click Secure Checkout.
    2. Fill up the form.
    3. Click on Confirm Order.
    4. Check Email.

  • Outcome:

    • Pass. User is able to Checkout and receives a Confirmation E-mail.

Graphic Example Below.

Checkout Success Images

As a user I want to add products to my Wishlist.

  • Steps:

    1. In the Product Detail Page.
    2. Click on Add to Wishlist.

  • Outcome:

    • Pass. User is able to add product to the Wishlist.

Graphic Example Below.

Add to Wishlist Images

As a user I want to view my Wishlist and Remove items from there.

  • Steps:

    1. Either:
      • Click on Manage Wishlist on the Product Detail
      • Or on the top left in the account icons click on Wishlist.
    2. Click on Remove from the Wishlist.

  • Outcome:

    • Pass. User is able to view the Wishlist and delete products from there.

Graphic Example Below.

Views and Remove items from Wishlist Images In order to access your wishlist click on the "Manage Wishlist"
Or you can click here.
This is your wishlist page
In order to remove click on the "Remove from Wishlist" Button.

As a user I want to add a Product Review.

  • Steps:

    1. In the Product Detail Page.
    2. On the bottom there is a Review Form, write your review there.
    3. Click Submit review

  • Outcome:

    • Pass. User is able to add a review.

Graphic Example Below.

Add Product Review Images

As a Admin I want to moderate the reviews and see the review posted.

  • Steps:

    1. Go to the Admin Dashboard.
    2. Click on Reviews.
    3. Check the Is Approved Box.
    4. Review is now posted.

  • Outcome:

    • Pass. Admin is able to moderate reviews and see the review posted.
    • All users can see the review now.

Graphic Example Below.

Moderate Review Images

As a user I want to delete my own Product Review.

  • Steps:

    1. In the Product Detail Page.
    2. Click on the Delete Button.
      • Only the owner of the review is able to see this button.

  • Outcome:

    • Pass. User is able to delete his own review.

Graphic Example Below.

Delete Review Images

As a user I want to send a Contact Form.

  • Steps:

    1. On the middle of the Nav Bar, click on Contact Us.
    2. Fill up the Contact Form.
      • If the user logged in his email will be displayed there already.

  • Outcome:

    • Pass. User is able to send a form.

Graphic Example Below.

Contact Form Images

As a Admin I want to read the Contact Form send by the users.

  • Steps:

    1. Site Owner has received a Email after form submission.
    2. Go to the Admin dashboard.
    3. Click on Contacts
    4. Click on the Name of the contact form you want to read.

  • Outcome:

    • Pass. Admin is able to read the Contact Form.

Graphic Example Below.

Admin Contact Form Images

As a Site Owner I want to Add new Product.

  • Steps:

    1. Either:
      • Go to the Admin Dashboard.
      • Access Product Management in the Accounts Icon.
    2. In the Product Management.
    3. Fill up the form.

  • Outcome:

    • Pass. Site Owner is able to Add a new product.

Graphic Example Below.

Site Owner Add Product - Images

As a Site Owner I want to Edit a Product.

  • Steps:

    1. Go to the Product Detail Page or the Product List.
    2. Click on Edit.
      • Only SuperUsers can see this option
    3. Fill up the form with the necessary changes

  • Outcome:

    • Pass. Site Owner is able to Edit a Product.

Graphic Example Below.

Site Owner Edit Product - Images

As a Site Owner I want to Delete a Product.

  • Steps:

    1. Go to the Product Detail Page or the Product List.
    2. Click on Delete.
      • Only SuperUsers can see this option

  • Outcome:

    • Pass. Site Owner is able to Delete the product.

Graphic Example Below.

Site Owner Delete Product - Images

Back to Table of contents

Deployment

  • In order to Deploy this project:
    1. Either fork or clone this project.
    2. Heroku Setup.
    3. AWS Setup.

Forking

  • In order to Fork this repository:

    1. Access your GitHub account and find the relevant repository.
    2. Click on 'Fork' on the top right of the page.
    3. You will find a copy of the repository in your own Github account.

Clone

  • In order to Clone this repository:

    1. Create repository where you will work with this clone.
    2. Copy "https://github.com/gioZAK/easy_vape.git".
    3. Run the directory you want the clone to be.
    4. In your IDE's terminal type 'git clone' and the paste the URL you just copied.
    5. Press Enter.
    6. You now have a local clone.

Heroku.

  • To setup with Heroku:

    1. Create an account at heroku.com.
    2. Create a new app, add app name and your region.
    3. Click on create app.
    4. Go to "Settings".
    5. Under Config Vars, add your sensitive data.
    6. Now go to your IDE and connect your enviroment with heroku.
    7. heroku login -i.
    8. Then run the following command: heroku git:remote -a your_app_name_here.
    9. Finally: git push heroku main.

Amazon Web Services.

  • To setup with AWS:

    1. Create an account at AWS.
    2. Navigate to the IAM application and create a user and group.
    3. Set the AmazonS3FullAccess for the user and copy the AWS ACCESS and SECRET keys as config vars to your workspace and Heroku.
    4. Create a new Bucket within the S3 application with an appropriate name.
    5. Enable public access for your bucket so users can access and use the services on your website (upload, view, download, etc).
    6. If Needed Documentation at https://aws.amazon.com/s3/.

Credits

Code Institute

  • I have relied on the Code Institute Boutique Ado Walktrough Project in order to make my own.
  • Special Thanks to the Code Institute staff for the support throughout the course.

ChatGPT

  • I have used ChatGPT as a tool to debug and to guide me on how to apply new functionalities.

Dall-E-2

  • I have created all images using Dall-E-2

Back to Table of contents