- Link to live website Kuzco Watches
Kuzco Watches is a final project with the Code Institute. Project purpose: In this project, I built a full-stack site based around business logic used to control a centrally-owned dataset. An authentication mechanism has been set and provides paid access to the site's data and/or other activities based on the dataset, such as the purchase of a product.
- UX
- The Site owner Goals
- Existing Features
- Features Left to Implement
- Database Design
- Project Requirements
- Wireframes
- Testing
- Deployment
- Credits
- Acknowledgments
- User 1 : As a user I want to view all available watches and their ratings and prices.
- User 2 : As a user I want to search for specific watches using type, description or
other keywords. - User 3 : As a user I want to view individually each watch's details and description.
- User 4 : When purchasing, I want to know the price I spent while browsing the site.
- User 5 : As a regular user I want to be able to register easily.
- User 6 : As a returning user I want to be able to login to my account.
- User 7 : I want to be notified by email when registered.
- User 8 : I want to have my own profile on the website.
- User 9 : I want to make a secure payment.
- User 10 : I want to save and update my payment details.
- User 11 : I want to be able to leave a review of the watch I purchased.
- User 12 : I want to be able to update or remove items from my shopping cart.
- User 13 : I want to receive an email confirmation about my purchase.
- Owner 1 : As a site owner I want to have admin rights.
- Owner 2: As a site owner I want to be able to add and remove products.
- Owner 3 : As a site owner I want to be able to update products.
-
Registered users have access to most of the features apart from the admin's page.
-
Landing page;
- Search bar;
- Info delivery banner;
- Search button;
- My Profile;
- Profile;
- Reviews;
- Logout;
- Shopping Cart;
- Login page
- Search bar;
-
Register page
-
Error 404 page
- Will appear in case of when the server can't find the requested resource.
-
Error 403 page
- Will appear in case of Forbidden response status.
-
Error 500 page
-
Will appear in case if the server encountered an unexpected condition.
-
Sorting;
- All Watches;
- For Him;
- For Her;
- Gifts & Deals;
-
-
All Watches Page
- Search bar;
- Shopping Cart;
- Cards with images, prices and ratings of the watches;
- Paginator;
- Footer;
-
Watch Details Page
- Search bar;
- Shopping Cart;
- Card with image, price and rating of the watch;
- Add to cart button;
- Continue Exploring button;
- Submit Review button;
- Paginator;
- Footer;
-
Shopping Cart Page
- Search bar;
- Item image;
- Item name;
- Item SKU number;
- Item price;
- Item quantity;
- Ability to update quantity;
- Ability to remove item;
- Subtotal including delivery charges;
- Checkout button;
- Continue to Explore button;
-
Checkout Page
- Search bar;
- Form for personal details;
- Card input;
- Image and description of the item(s);
-
Review Page
- Search bar;
- Form to submit reviews;
- List of all reviews;
- Ability to remove/update your own reviews;
-
Admin page
- Restricted to admin only.
- Admin page consists of the product abn categories sections. Admin has a right to edit and/or remove products,categories,users and reviews.
- Ability to remove and update existing categories.
- Ability to remove and update existing Products.
- Ability to remove and update existing Reviews.
- Ability to verify emails.
Carefully selected color scheme with the idea in mind to create harmonious and aesthetically pleasing website where users would want to remain longer.
Main colour is #b7a90c
which has a touch of golden shades and the #1d1e26
colour which blends together and leaves an expression of elecancy.
#45777a
has been selected for minor parts of the site such as shopping cart badge background color, links, padinator buttons.
- Typography
- Implementing Google,Facebook or possibly more applications OAuth.
- Adding Contact us page.
Build a Django project backend by a relational database to create a website that allows users to store and manipulate data records about a particular domain. Relational database (MySQL or Postgres),Stripe payments.
HTML, CSS, JavaScript/jQuery, Python+Django
- Django full stack frameworks used for most of the website functionalities.
- jQuery used as a JavaScript library and for Materialize components initialization.
- Bootsrap4 used as a front-end framework.
-
Stripe Used for implementing payment option
-
SQLite3 Django's default database.
-
heroku-postgresql Heroku's database.
-
Heroku used for hosting deployed website.
-
AWS S3 used as a storage for static files.
-
Sweet Alert used to customise newsletters alerts.
-
Animate.css used to add aminations to the project.
-
Email.js used for newsletter subscription.
-
DBDiagram Used to create database scheme diagram.
-
Google Dev Tools used for developing and testing webpage.
-
Firefox Dev Tools used for developing and testing webpage.
-
Balsamiq used for creating a wireframe.
-
Resize Pixel Free online image editor used to resize images format.
-
Google Fonts used for project fonts.
-
Font Awesome used for project icons.
-
Ignore X-Frame headers used to override Django's Clickjacking Protection.
-
Gitpod used as a development environment.
-
Gitpod Chrome Extension used to open Github repo in Gitpod.
-
GitHub used for storing repository.
-
Canva used for logo creation.
-
Autoprefixer used to add CSS prefixes and ensure cross-browser compatibility.
-
Youtube used as a general source of information.
-
W3School used as a general source of information.
-
Pexel used to download the website's images.
-
Pixabay used to download the website's images.
-
Stackoverflow used as a general source of information.
-
W3C Markup Validator Used to test HTML code validation.
-
W3C CSS Validator - Jigsaw Used to test CSS code validation.
-
PEP8 online used during the post deployment testing stage to ensure PEP8 requirement.
-
Am I Responsive used during the post deployment testing stage.
-
Pixlr used to remove background and editing photographs.
-
Ezgif used to convert videos to gif format.
-
Toptal used for HTML symbols and arrows.
-
Colorlib free template used for inspiration for newsletter and footer.
To see Project Wireframes please click the link: Wireframes
- Testing file can be found here TESTING.md
- The project's website code was written using Gitpod IDE. In order for code to be pushed to GitHub,it had to be added to stage for commit using
git add
command in GitPod's CLI .Once changes have been successfully added, it is required to commit these enteringgit commit -m
into CLI. After committing it then can be pushed to GitHub by enteringgit push
command in CLI.
- How to fork a repository: Forking a repository allows you to make changes to the code without affecting the project. To fork a repository follow the next steps:
- If you do not have one,create a GitHub account and remain logged in.
- Navigate to kuzGo/kuzco;
- In the top right corner find the "Fork" icon.
- Click the Fork icon to fork the repository.
- How to clone repository: Cloning repository allows you to pull down a full copy of the repository and work on it locally on your machine. To clone a repository follow these steps:
- If you do not have one,create a GitHub account and remain logged in.
- Navigate to kuzGo/kuzco;
- On the repository main page navigate to the "Code" drop down menu button and click on it.
- Ensure to select HTTPS and click on the clipboard icon to copy the URL.
- In the IDE you chose to work, open the new terminal.
- Change the current working directory location where you want the cloned directory.
- Enter command git clone and paste the URL you copied.
- Click Enter.
- The website is deployed to Heroku due to GitHub's ability to only host static pages. To successfully deploy the website to Heroku please follow these steps.
In order to successfully run the app on Heroku,there are a few applications and dependencies required.
- In the IDE terminal enter command
pip3 freeze--local > requirements.txt
. - Create Procfile using CLI command
echo web: python app.py > Procfile
. Delete a blank line to avoid any possible issues with the app.
- Heroku Deployment
- If you do not have one,create a free Heroku account and remain logged in.
- For this particular project Python needs to be selected as a Primary Development Language.
- Navigate to "Create New App" button.
- Create a unique app name using hyphens instead of spaces.
- Choose a region closest to you. I selected my region Europe.
- Click Create App button.
- Navigate to Resorces tab and search and select Postgres database.Be sure to use Free plan.
- In the Deploy section, as Deployment method select GitHub,this option will automatically deploy from GutHub repository.
- In the Connect to GitHub section ensure that your GitHub profile is displayed.
- Enter repository name and click Search button.
- Once repository is found click Connect button.
- Navigate to settings and click Reveal Config Vars.
- Enter variables from
env.py
file :AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY,STRIPE_SECRET_KEY,STRIPE_WH_SECRET, SECRET_KEY. This is required step since Heroku will not be able to find these secured ingitignore
folder.
- Prior to enabling automatic deployment, make sure that requirements.txt and Procfile are pushed (
git push
)to GitHub. - Click Deploy Branch button.
For the purpose of this project I referred to and used authentication from the Code Institute Chris's Boutique ADO. The code snippets used from this project have been refactored to make them my own and suit more my project's needs where it was possible.
Bootsrap4 some components and some code snippets have been used from Bootstrap.
Colorlib free template used for inspiration for newsletter and footer.
CSS Scan button 52 used and refactored for the purpose of the project.
WS3 used for making a shopping cart badge.
- Pexels:
Description of the watches have been taken mostly from established/official websites but these descriptions do not match real products. It is used for purely educational purposes.
- I wanted to thank Nishant Kumar, for all the support and pieces of advice during mentoring sessions on how to improve the project.
- Code Institute for equipping me with the skills and knowledge to complete this project.
- Friends and family for support,motivation and creating activity datasets.
- Some parts of the README.md file have been used in my previous project.
- Slack community who helped me with fixing the bugs.
- Code Institute Tutors : Jo,Sean,Igor,Shely and many others who helped me out of some hard times I had during my work on the project.