SpiceUrLook Project

SpiceUrLook project is a fictitious online store that provides a unique customer experience: This includes giving a personalized experience to each customer or visitor of the website, options of responsive view point from devices of varying screen size and easy login via google social login.

UX

Main Aims:

• Promoting and selling products online.
• Establishing brand awareness and corporate identity.
• Generating revenue and providing a unique customer experience
• Boosting the efficiency of services
• Developing relevant target

User Stories :

The following User Stories helped me to create a design that would satisfy the needs of several different types of users:

Project stakeholder / Product Owner:

• As the major stakeholder / product owner my main aim is to generate revenue – to be very efficient at selling through understanding complex consumer behaviour to maximise conversion rates and up-sell and cross-sell products and services to maximise value over the lifetime of the customer.

Site Users:

Wireframes:

• Click to view wireframes.

Databse Design:

• Click to view database diagram.

Features

Existing Features:

This Django project consists of five applications and eight modules.

1. Accounts/Registration:

• Registration: a user can register for an account, upon successfull registration a confirmation email is sent to the user's provided email address
• Google social login: a user has the option to login to our site with their google account
• Login / logout: a user can easily login with their registered details
• Password reset: a user can easily recover their password incase they forget it.
• Note: if running this project on gitpod: for social login to work: run python3 manage.py runserver 0.0.0.0:8000

2. Site Navigation: is consistent accross the site it allows the user to do the following:

• Browse the site by gender and category
• Browse the site by price
• Browse the site by sales and promotions
• Search fucntionality via the search icon
• User login, logout, sign-in, sign-out and social login option
• Access to user profile (available to authenticated users)
• Access to wishlist (available to authenticated users)
• Access to shopping bag via the bag icon

3. Products App:

• product sorting :a user can sort the products by:

• price ascending
• price descending
• sales ascending
• sales descending

• Wishlist : authenticated users have the option to add/remove any product to their wishlist, for a later purchase wishlist items are available for the user to revisit at a anytime if they are logged in
• Product rating : rating option is available for authenitacted users who have bought the product
• Size selection : if product has a size : users have the option to chose product size to purchase
• Quantity : users get to chose from 1 to 50 qty of a particular product to add to shopping bag
• site owner:

• can add a product
• edit / update a product
• delete a product

4. Profiles App:

• Personalized profile page: a registered user can fill-up a default delivery/shipping details on their profile page which will be used during their checkout to make it process faster and more convenient.

• a user can add, update and delete their personal info

• Past order summary: a users profile page automatically save all their past order summary and confirmations

5. Shopping_bag :

• Displays selected products to be purchased and its details
• Users can add and reduce product quantity from the shpping bag and the cost will adjust accordingly
• Users can remove selected products from the shipping bag and cost will adjust accordingly
• Proceed to checkout page

6. Checkout App:

• If a user is authenticated and has a profile the delivery/shipping form will be pre-populated with their default info else if the user is not authenticated the form will be empty
• A summary of the products & cost the user is about to purchase will be avaible on display next to the delivery/shipping form
• Stripe secure card validation: the card entered by the user will be validated in real time by stripe and if valid: the purchase will go through and the user will be automatically redirected to success page showing order confirmation details
• Upon successful purchase: confirmation email is sent to the user, containing their order summary

Features Left to Implement:

• A future feature could be adding set of filters that will allow the site user to browse the site by things like:

• size, color or brand

• online customer service chat platform
• An overlay of a quick shopping
• Additional payment methods like paypal or applepay

Technologies Used

Languages, libraries, frameworks, editors and version control:

• HTML5 was used to put the page structure in place HTML5.
• CSS was used to style and allign images and other structures on the page CSS.
• Javascript was used for interactivity JavaScript.
• Python3 was used for the application scripting Python.
• Django framework was used to build the Project Django.
• Heroku for hosting the application Heroku.
• Amazon web service was used to host static and media files AWS.
• Postgres database was used for the deployed app on heroku Postgres.
• Gunicorn server was used for the deployed app on heroku Gunicorn.
• Stripe payment service was used for product payments Stripe.
• Bootstrap was used for page layout Bootstrap.
• Google fonts was used for the site fonts Google fonts.
• Fontawesome was used for its icons Font awesome.
• I used gitpod's development environment to write the code for this project Gitpod.
• I used github for its repo and version control of the project Github.
• I used google smtp email to send emails to users google.

Testing

• Click to view the test file test file.

Deployment

• Click to view the project deployment process deployment file.

Credits

• Code Institute.
• Css Tricks

Content

• The content of this website is mostly fictitious and written by myself.

Media

• Some of the photos used in this site were obtained from :

1. Unsplash freestocks.
2. Pixels.
3. google.
4. kaggle paramaggarwal.

Acknowledgements