Git Product home page Git Product logo

ci_ms5_feelingfragrant's Introduction

Feeling Fragrant

My sincere apologies for the fact that this is incomplete. It is a work in progress and unfortunately due to time constraints and some other circumstances it is still very basic and contains errors in places but I decided to submit and receive some feedback for the future. Thank you for your time.

User Experience

Target Audience

  • People looking to purchase scented wax crafts such as wax melts or candles.
  • People looking to support Irish crafts

User Requirements

  • Links and functions that work as expected
  • High quality product photos
  • Product details and descriptions
  • Bright, eye catching colours and presentation
  • Easy and clear to use navigation and accessibility
  • A trustworthy, risk free market place
  • A secure check out

User Stories

First-time User

  • I want to be able to register an account and track my purchases
  • I want to be able to browse a wide variety of organised products for sale
  • I want to be able to filter product ranges from low to high price etc
  • I want to be able to scroll through products and click and view products as I please
  • I want to be able to easily navigate the store and have options on which part of the store I want to browse

Returning User

  • I would like to be able to browse a wider variety of products
  • I would like to be able to sign up for a mailing list to receive updates about sales
  • I would like to be able rate the products after purchasing
  • I would like to be able to read other customers reviews of the store and products
  • I would like to be able to read more about the seller and see their details

Design

Structure

The site is designed in a well structured way which makes navigation easy for the user

The site is bright and eye catching

The colours of the website complement the theme of the store and help keep your attention

Upon clicking into the site the user is greeted with the homepage where they can get an immediate understanding of what the store is for and are presented with the option to shop now

Color

For the colour scheme I went with colours I felt best complemented the theme of the store. These being bright pinks and purples

After deciding on my colour scheme I tested them on webaim to make sure the contrast between them was right

Typography

The hind siliguri, waterfall and roboto fonts were used for the store

They are all elegant, pretty fonts that suit the feminine theme of the store

They are easy to read and look attractive

Wireframes

Homepage
Product page
Sign In page
Sign Up page
Check out page
Shopping Bag

Features

Navigation Bar

  • Featured on all Web pages
  • Utilises hyperlinks for users to easily navigate
  • Features click able links to easily find what you are looking for
  • Utilises a search bar so users can find what they are looking for easier

Navigation Bar

Home Page

  • Displays the main focus of the store and offers users and easy way to start shopping
  • Gives users an impression of what to expect from the rest of the store
  • Allows users to register or log in
  • Allows users to view their basket

Home page

Sign In/Out

  • Allows users to sign in/out of their account
  • Allows users to make secure purchases and view their purchase history

Sign In

Log In

  • Allows users to create a profile and sign in

Sign Out

Product page

  • Allows users to view all products or to sort how they would like to see them eg. Price high to low

Sign Up

Checkout

  • Allows users to checkout with the products they'd like to buy securely

Sign Up

Future features to implement

  • Plans to add a footer to create accessibility between the store and its different social media channels
  • Plans to create a business on facebook with links to the site and products
  • Plans to create a review option for all products
  • Plans to include a comment section for users to share their opinions on products

Technologies Used

Languages

  • HTML
  • CSS
  • Javascript
  • Python

Frameworks & Tools

  • Balsamiq
  • Git
  • GitHub
  • Gitpod
  • Google Fonts
  • Django
  • PostgreSQL
  • Bootstrap v5.0
  • Favicon.io
  • Hover.css:

Testing

Due to time constraints I was not able to fully test this project

Bugs

When I deployed my project through Heroku, It created an issue where the homepage is able to load but you cant access any of the products pages anymore as you get a server 500 error

I have not been able to find a resolution to this problem

When running the server through gitpod, no images appear

Deployment

The website was deployed using Heroku using the following steps:

Use the "pip freeze -> requiremnts.txt" command in the terminal

Create a Heroku account

Click the New button in the upper right corner and select "create new app"

Choose a unique app name, region and click "Create app"

Go to the Settings tab, add the heroku/python buildpack

Go to the "deploy" tab and pick GitHub as a deployment method

Search for a repository to connect to

Go to the manual deploy section and click the "Deploy Branch" button

Wait for the app to build and then click on the "View" link

The live link can be found here - https://feeling-fragrant.herokuapp.com/

Credits

Content and Media

https://burrenperfumery.com/

https://www.thegoodgarden.ie/

https://www.thelittlewaxcompany.ie/

Acknowledgements

While making this project, I heavily relied on the tutorials provided by Code Institute, specifically the Boutique Ado tutorial I would like to thank my mentor and tutor for continuous helpful feedback

ci_ms5_feelingfragrant's People

Contributors

magq98 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.