Cosmos Beauty is an e-commerce web app that is designed not only for cosmetics products but everything related to beauty. This app targets users who want everything from makeup to bath and body products all in one place and hence easily buy them whenever they need to.
User can add products to their wishlist to buy them later. They can easily add/remove products as per their need even buy 10 items at the same time. Once an order is placed user can also cancel an order, remove items, and even update the quantity of products.
The live site can be found here - Cosmos Beauty
- Cosmos Beauty
Table of contents generated with markdown-toc
A visitor to Cosmos Beauty is most probably someone above age 15 who loves trying new beauty products or maybe buys the same product again or saves it to buy later when there is a discount going on that product.
- As a Site User, I can sign up to my account to place orders, update product quantities, cancel orders, remove items from my orders, and add/remove products from my wishlist.
- As a Site User, I can log in to keep my account secure.
- As a Site User, I can keep my data such as my orders and wishlist to myself.
- As a Site User, I can log in using my email as it's much easier than a username.
- As a Site User, I can easily understand the purpose of the website with just one look and tell if it meets my expectations.
- As a Site User, I can search for products using the search bar even after typing incomplete product names.
- As a Site User, I can navigate through the website without any struggle and find the products I want.
- As a Site User, I can view a paginated list of products on the web page so that I can select only the products I want with more ease.
- As a Site User, I can see the product details by clicking the product.
- As a Site User, Once I select a product, I can add it to my wishlist to buy it later.
- As a Site User, I can add/remove products from the cart.
- As a Site User, I can read the details of the product.
- As a Site User, I can check once I add the product to the cart.
- As a Site User, I can add a maximum of 10 items and a minimum of 1 item of the same product.
- As a Site User, I can see if the item is on discount or not.
- As a Site User, I can easily understand if a product is out of stock.
- As a Site User, I can take an overview of the cart final time before moving to shipping.
- As a Site User, I can remove items from the cart.
- As a Site User, I can see my total of one product based on quantity and discount.
- As a Site User, I can see the total of all products plus shipping cost before moving forward.
- As a Site User, I can add my data inside shipping details if it does not exist.
- As a Site User, I can update my shipping details if they already exist.
- As a Site User, I can keep my data in the app and can use it again without updating it.
- As a Site User, I want to know when my order is going to reach me.
- As a Site User, I want the option to view my placed order using the My Order button or I can also use the nav bar for this purpose.
- As a Site User, I still have the option to see what's on sale go to the home page or see wishlist.
- As a Site User, I should always have the option to place new orders after order completion.
- As a Site User, I can visit my orders to see all the orders placed by me.
- As a Site User, I can cancel the orders that I have placed.
- As a Site User, I can update the quantity of the products inside my orders.
- As a Site User, I can remove an Item from multiple products list.
- As a Site User, I can add items to my wishlist.
- As a Site User, I can view the products I have added to my wishlist once logged in.
- As a Site User, I can remove items from my wishlist once bought.
- As a Site User, I can see easily which Items are on sale.
- As a Site User, I want to how much percent discount is there on products.
- As a Site User, Once I click the product I can see the updated discounted price of an item.
- As a Site User, If I want to see a specific category of products I can easily navigate to it.
- As a Site User, I can search for products based on their name.
- As a Site User, I can also search for products that have specific characters in them, for example, 'oo' should print items containing 'oo' in them.
The following items were scoped out of the project which was initially part of the project but couldn't be implemented due to time constraints. These features will be implemented at a later date.
- As a Site User, I receive a 10% code on a newsletter subscription.
- As a Site User, I'll get a gift with every order I place.
- As a Site User, I'll not need to log in at all to buy products.
- As a Site User, I can subscribe to a weekly newsletter.
- As a Site User, I'll receive an order placed successfully email.
- As a Site User, I'll have options to pay online rather than just COD(Cash on delivery).
The design of this website is very simple because users will come here to buy products so giving them things too facy will just end up annoying them. The fonts and the color scheme of the website give the user a sense of enthusiasm.
The color palette is generated using COOLORS.
The color scheme of the website gives a very good contrast after placing the main items on the web page and the main purpose of this color scheme is to give a can-do vibe to the user. The effect gives enthusiasm to the site users.
Except for the product images, the remaining images are static.
The following fonts are used on this website.
- Roboto as the main content on the body.
- Ubuntu for all the buttons or hyperlinks acting as buttons.
- Oswald for nav and footer.
Sans-serif is acting as a backup font in case one of the above-mentioned fonts fails.
Landing Page
Products and Wishlist Page
Product Detail Page
Cart Page
Shipping Details Page
Order Complete Page
My Orders Page
GitHub Projects was used to manage the development process using the agile approach. Kindly see the link to the project board here.
The user stories seen above are based on the items mentioned on the project board.
I used a session for cart items instead of storing it in the database and once the order is placed only then the data from the cart session is moved to the Confirmed Order Detail and User Bill model.
Cart Session contains the following items:
- Product id
- Product quantity
- Product price based on quantity
- Product discount
- Product total based on quantity
The wishlist contains the products the user wishes for and is stored inside the Wishes modal.
Products, their categories, and discounts on them are managed through Product, Product Categories, and Product Discount modals.
Before placing an order User shipment details are required which is managed in the Shipment Details modal.
The database schema is available below.
The database schema is designed using Drawio.
Testing and results can be found here
- Allauth is installed in the project for sign-in / signup and login. Users can only place orders once they are logged in.
- After certain points like once cart items are added or if the user clicks wishlist. he/she must log in before moving forward.
- Shipment details are only accessible to those users who have entered their credentials and logged in. If the user is new, the shipment detail form will be empty.
- No user can see other users' wishlists.
- Users' order data are also limited to them and them only.
- Based on the data entered, every form in the project will be validated before moving forward. Characters will only take characters and integers just integers.
- The input field on the product details page is not part of the form as its value was only stored in the session, to handle the '-', '+', and input fields it required manual validation that can be seen on product details html, it's js content and CSS. See credits for more info. The deprecated code was removed and was updated as needed.
- The submit button will not work unless all the fields are filled with proper data and warning signs will also appear if data is not valid or fields are empty.
- CSRF (Cross-Site Request Forgery) tokens are used on all forms on the website.
The database URL and secret key are stored in the env file. This prevents unwanted connections to the database.
Custom pages were made in case the user tries to enter invalid URLs or try to access forbidden pages. Custom pages were made for the following request.
- 400 Bad request
- 403 Page forbidden
- 404 Page not found
- 500 Server error
Users are given options to redirect from these pages to valid ones in the form of buttons.
- The Cosmos Beauty logo is written on most right top of the header and it tells its-self what the website content going to be.
- Users can go to the home page by clicking it.
The search bar is used to search for products based on full name or keyword such as 'oo', this will fetch all products that contain 'oo' in them.
This navigation bar contains the content related to the user. With it, users can see items in their wishlist, login/log out, and see cart items.
This part of the navigation contains links to all products, category-based products, items on sale, and home.
This part of the footer has four parts as follows:
- The mission statement of Cosmos Beauty.
- Quick links to other parts of the website.
- Other projects (Not related to the website).
- Contact details and address.
This part of the footer has connection links and all rights reserved text.
Just below the header, there is a carousel. The main purpose of this is to provide a user with an experience like most modern e-commerce applications.
- Users can click any one of three carousel footers for fast navigation.
- Users can swipe right or left to switch between screens or use the arrow buttons for this purpose.
- User can click buttons on carousel screens to redirect to the products page of their requirement.
- The sale banner is mostly here to announce about the active sale on the website.
- User can redirect to the sales page directly from here.
This section tells about the people of Cosmos Beauty and what they had to say about customer support.
- Django Allauth was installed and used for sign-in/ signup and signout.
- UI was designed later for a better user experience.
- Instaed of alerts, toasts will be seen when user perform any action on the website. From sign-in to cancelling orders.
- This page will show the following based on which link the user had clicked. This method also enhances the user experience as well.
- All Products links will show all the products available on the website.
- Sales and offers will show only those products that are on sale.
- Anything other than the above will show only the products based on their category. The search bar will show only those products that match the keyword or full product name. If nothing matches it'll say nothing matches related to this search.
- Every page is paginated by max 8 products. If products are more than 8, it will be shown on the next page.
- The products list will contain the following information per product
- Product image
- Product name
- Original price
- Discount percentage (If on sale)
- Number of items in stock
- The user is given multiple options along with product description so that the user knows what they are buying and does it fulfill their need.
- Users had the option to add items to the wishlist so they could come back later and log in again to buy products from the wishlist.
- User can set quantity of items before buying. A maximum of 10 items of the same product can be bought at the same time.
- User can add/remove a product from the cart.
- The product will show the following information as well
- Product image
- Product name
- Original price
- Discounted price (If on sale)
- Number of items in stock
- Product Category
The cart will contain all the items that the user wants to buy.
- The cart will contain the following information per item
- Product image
- Product name
- Original price
- Sale price, in case not on sale it will show €0.0.
- Product price total based on quantity.
- The user is also given the option to remove the product from the cart.
- In the end, the total of all products, plus shipping cost and overall total is shown to the user.
- On continue user will be redirected to the sign-in page, if not signed in. Once the user is signed in. The user is redirected to Shipping Details.
The shipping details will contain a form for the user to enter his/her shipping information. There are three situations here in which the user can act.
- The form is empty user had to fill in all the fields before placing an order.
- User information already exists he/she just had to confirm information before placing an order.
- The user can update the information already available and place an order once new data is entered.
NOTE 1 Stripe is currently not integrated into the project so only the COD(Cash on Delivery) option is given in the method field. NOTE 2 Create, Read and Update can be done on this page.
- On order completion user is congratulated on placing the order.
- The user is given a warning to keep the payment ready once the DHL courier arrives.
- Duration of when the package will arrive.
- Options to what to do next once an order is placed in the form of buttons.
NOTE At this point cart session is cleared, so if the user goes back to the shipping details page and clicks "Finish Order", he/she is redirected to "my orders page" as the order was already placed. Now order lists are created inside the database.
- Here list of all the orders placed by the user is shown.
- Every order contains the following information:
- Invoice number
- Product Image
- Product name
- Quantity of items, that can be updated.
- Total of the product
- Option to remove items from the products list.
- Finally, an option to cancel the order. A modal to cancel an order will appear to ask the user if he/she is sure to cancel the order.
- If there is only one product and the user clicks remove, the cancel order modal will appear instead of just removing one item. Removing an only item is equal to canceling the order.
NOTE In real-world applications, there is no such thing as updating quantity once an order is placed as per my understanding, updating quantity has therefore no effect on actual stocks inside the Products table. Every action on this page has an impact only on Confirmed order details and User Bill modals. The purpose of this page is only to show Read, Update, and delete. I intend to disable the 'update', and 'remove' options in the future and give the user the option to cancel orders only via E-mail.
- Wishlist contains the items of the user which he/she added to the wishlist.
- These items can only be viewed once the user is logged in.
- These items will remain here unless the user removes them.
There are four custom pages to handle, the following request
- 400 Bad Request
- 403 Page forbidden
- 404 Page not found
- 500 Server Error
These pages have the same pattern except text and their main purpose is to give the user a better experience on the website.
- Python
- HTML
- CSS
- Javascript
- GitHub is used to host the repository and agile tool.
- GitPod is used to develop project and organize version control.
- Heroku used to deploy the live project.
- PEP8 Online used to validate all the Python code.
- Google Fonts is used to change the fonts of the project.
- W3C - Used for HTML & CSS Validation.
- Jshint - used to validate javascript.
- Django framework is used for the development of this project.
- Django-allauth is the authentication library used to create the user accounts.
- Crispy Forms used to manage Django Forms.
- Cloudinary is used as an image hosting service. Product images are uploaded there.
- PostgreSQL is used as the database for this project.
- Bootstrap 5: is a CSS framwork and is used for styling in project.
- Summernote editor is mainly used when adding product details on the admin panel which is to be later seen on the product details page.
- Balsamiq is used to generate wireframe images for this project.
- Techsini is used for generating site mockup.
- Coolors is used to create a color palette.
- Drawio is used to make database schema.
- Favicon is used to create the favicon.
- Responsinator is used to verify the responsiveness of the website on different devices.
- Chrome Dev Tools is used for overall development and bug locating/fixing, including testing responsiveness, performance, and confirming the webpage's accessibility using lighthouse.
- Font Awesome is used for icons used all over the project.
- Grammerly is used to proofread the README.md and testing.md.
- Gunicorn is a Python WSGI HTTP Server for our project.
- freeformatter is used to format html.
The site was deployed using Heroku and the live site can be found here: Cosmos Beauty. Note: Make sure to set DEBUG to False before deployment.
- Before actual deployment use "Heroku pip3 freeze > requirements.txt" on the Gitpod console. This will add all the dependencies in the requirements.txt file which will be needed by Heroku later during deployment.
- Log in to Heroku.
- On the main page there is an option to create a new app, click it.
- Enter a unique application name and select your region.
- Click on the Create App button.
- Click settings and select Config Vars.
- Click Reveal Config Vars enter the Key as "PORT" and Value as "8000" and press the add button.
- Add CLOUDINARY_URL as another config var and click add.
- Next add Postgres DATABASE_URL and click add.
- After that add Django project SECRET_KEY.
- Same way Set DISABLE_COLLECTSTATIC to 1 and click add.
- Go to the top of the page and select the deploy option.
- Select Github as the deployment method.
- Confirm to connect with GitHub and authorize Heroku from Github.
- In the search bar type the repository name and click the connect button.
- Scroll to the bottom of the deploy page and either click Enable Automatic Deploys for automatic deploys or Deploy Branch to deploy manually. Manually deployed branches will need re-deploying each time the repo is updated.
- Click View to view the deployed site.
With Forking one can make a copy of a repository and view or make changes in it without affecting the original repository. Following are the steps to do this.
- Log in to GitHub and locate Cosmos Beauty repository.
- At the top right side of the page just below the navigation bar, locate the fork button.
- You will now have a copy of the repository.
- Log in to GitHub and locate Cosmos Beauty repository.
- Just below the repository name, click "Code".
- There is an option to copy the HTTPS link. Press the copy icon.
- Open Git Bash on the local machine.
- Change the current working directory to the location where we want the cloned directory to be made.
- Type git clone on bash and paste the HTTPS URL we copied earlier.
- Press Enter. local clone will be created.
-
Django for understanding many concepts during project development.
-
Bootstrap with multiple concepts in designing the website.
-
Allauth for implementing it in our project.
-
Crispy forms for implementing it in our project and its other topics for handling forms.py to modify forms inside shipping detail.
-
ChatGPT 3.5 helped me with fixing a few issues, kindly see bugs and issues topics in testing.md file.
-
Bootstrap Counter Field is taken from here. It's used in product details. An alternate handler of input where no form is used. The deprecated JS code is removed from this code and updated as needed.
-
This geeks for geeks link for understanding the concept of making custom fields in allauth. In my case first and last name was added during sign-up.
-
StackOverflow with following topics mentioned below.
Stackoverflow links
- Fixing issue when Email was always considered invalid during login.
- Fixing git error: failed to push some refs to remote from here.
- Concept of gt__ in query.
- Concept of ~Q to negate in query.
- Concept of value|floatformat:"0" to filter to float format.
- Generating random invoice numbers as mentioned here.
- Reloading page on AJAX success.
- Concept of login_required on class based views.
- Setting user in the form before submitting the form as mentioned here.
- Using flat=true in query.
- Concept of Submit button out of form from here
- Page relaod for product details page when user clicks back button.
-
pexels, following images mentioned below.
-
Images and details for beauty products are taken from the following website.
Products Images and description
-
Nav bar is taken from here and modified later as needed.
-
Footer is taken from here and modified later as needed.
-
hover.css is used to apply the hover effect to buttons and hyperlinks.
-
Box Shadow for shadow effect.
-
Image zoom effect is taken from here.
-
AJAX concept in Django.
-
Session from this YouTube video.
-
Nice Job quotes.
- My Mentor Antonio Rodriguez for helpful feedback during project development.
- Code Institute team for pointing in the right direction.