Gemmaster is an E-commerce web application that ticks every single boxes of a fully functional E-commerce application criteria. The application was developed based on the fundamentals of a digital business strategy with the help of technology to achieve business goals and to build strong business relationships between consumers and service providers and business relationship i.e E-commerce website relations could be (B2B -Business to Business and B2C - Business to Consumer).
Gemmaster is specialized in various gemstone sales to direct consumers so it is categorized a B2C web application in the sense that it only services is based on a business to customer relationship, it is a fully E-commerce web application that deals in varieties of gemstones accross the globe, from Diamonds, Emeralds, Sapphires to name a few to Gemstone lovers who are keen about the originality and detailed history of what their customized jewellry is made of.The E-commerce application is user friendly and with a functional responsive interface across all devices.
NB: Please Note: The data on the website is for educational purposes only.
Here is the link to the live version
- Introduction
- UX (User Experience)
- Design Choices
- Features
- Database Schema
- Technologies
- Manual Testing
- Bugs
- Deployment
- Web Marketing & Business
- Credits
-
As a user I can be able to view a list of products so that I can choose what to buy.
-
As a user I can be able to view each product details so that I can See the price, item description, item images, item rating and sizes.
-
As a user I can be able to see deals and special offers so that I can have the chance to save on items I of my interest to buy.
-
As a user I can be able to view my purchase total with ease at any given time so that I do not overspend.
-
As a user I can be able to like products so that I can view them later in my wishlist.
-
As a user I can be able to navigate around the website with ease.
-
The Website homepage is equiped with different functionlity which allows a user to navigate around the website right from the homepage , the presence of the shop now button on the carousel gives a direct access into the list of products available for sale.
-
As a/an Site User I can be able to register an account with ease so that I can have an account that allows me to have a private profile.
-
As a Site User I can be able to signin and signout easily so that I can **my personal account informations and update my profile.
-
As a Site User I can be able to **recover my forgotten password with ease so that I can gain access to my account.
-
As a Site User I can be able to receive a confirmation email after registration so that I can be rest assured my registration was successful.
-
As a Site User I can be able to customize my user profile so that I can view my order history,confirmation and able to securely save my payment information and addresses on my profile.
-
As a user I can search for products through the help of the search bar located at top of the navigation system. To view product information, users only click on the product and every detailed information about the product will be displayed for readablitiy. A Users can search for products by name or by keyword using the search functionality provided at the top of the page. The product display page can be further narrowed down by searching products by category, Price, Alphabetically or by product rating.
-
As a user I can be able to filter through available products so that I can identify best rated, best priced and filter products categorically.
-
As a user I can be able to filter through products categorically so that I can **find the best priced, highly rated product in a specific category or filter products in that category by name.
-
As a user I can be able to filter numerous categories of products simultaneously so that I can find the best priced or highly rated product across broad categories, such as "apparel" or "homeware".
-
As a user I can be able to search for item by name or description so that I can locate the item I want to buy.
-
As a user I can be able to view my searh results and what I have searched for so that I can easily see if the search product is available.
-
As a user I can be able to **choose the size and quantity of a product when making a order so that I can carefully select item size or quantity without mistake.
-
As a user I can be able to view the content of my shopping cart so that I can keep track of the total cost of my order and what to receive.
-
As a user I can be able to modify the contents of my shopping cart so that I can make changes before final checkout.
-
As a user I can be able to enter my payment information with ease so that I can checkout easily without delay.
-
As a user I can be able to have a sense of security that my personal data is well protected and secure so that I can feel at ease to enter my information without feeling insecure.
-
As a user I can be able to **view an order confirmation after checkout so that I can be sure that no mistake was made on my order.
-
As a user I can be able to get an email confirmation of my order after checkout so that I can keep track my order record and purchases.
- As a user I can be able to complete my order with a friendly payment system.
- As a user I can be rest assured that I can feel secure when putting my informations on the website.
- As a/an Store Owner** I can be able to Add, Edit/Update and Delete products/items so that I can Add new Items, Change/Edit product prices, modify product descriptions, edit images, Remove/Delete items/Products that are out of stock.
- As a user I can subscribe to the website news letter so that I can have a first hand information and updates on products, deals, news and special offers.
- As a user I can As a User I want to have access to customer support, So that I can contact the support team for assistance on different scenarios that can occur.
-
The website has a user friendly navigation system with colors and contrast well thought to give the user a friendly color ,font and contrast experience.
-
The website logo was personally designed to suite the website purposes.
The colors used in this project are:
- (#FFFFFF) - White
- (#000000) - Black
- (#FFEA00) - Yellow
- (#7393B3) - Gray
- (#008000) - Green
- (#96DED1) - Robin Egg Blue
- (#F33A6A) - Red
- The color combination used give the website a unique, warm and beautiful outlook.
- The application wireframe using Figma:
- The web application has numerous ease of access functionality for easy navigation through the navigation bar.
- Users can register/Signup to make a personalized account by clicking on the user icon located on the top right of the navigation bar, there is a drop down menu which instructing the user of either login as an existing user or register as a new user by filling up the registration form with neccessary details i.e username, email address and password.
- As stated above registered users can securely log in and out using the login/logout buttons on the navigation bar.
-
Located on the main page i.e application home page is a carousel picture slider which displays some products that are on sale , under the carousel capiton you can find a SHOP NOW button in yellow color which when clicked navigates to the products list. On clicking on a product image, a detailed information about the product will be displayed to the user, the detail information contains Product name, Category, Rating, prices.
-
with the help of the navigation search box positioned at the middle of the navigation bar,a user can search for products by name or by keyword.
-
Users can filter or narrow their search by filtering results by category, sort by price, sort in alphabetical order i.e A-Z, or filter prices by Low to High or vice versa.
- Products can be added to bag either a registered or non-registered user once a user navigates to the product details page. Item quantity increase and decrease button can help the user edit the quantity of items to be added to the shopping bag.
- Either a User is registered or not, the user can still checkout regardless of status, user can choose to store their information on their profile or not, generally orders can be completed regardless of the user status, the user will be directed to the appropriate payment page where the order can be completed, if successful an email confirmation is automatically sent to the provided user email address.
- A user can modify, edit or update the informations or previously stored data on their personal profile with ease.
only an authorized personel can have access to the Admin page, as the web application security could be breached from an un-authorized access by infiltrators. However, to gain access to the Admin area an back slash is added to the URL of the web application, which will prompt an authorized login details.
If the Admin login was successful:
- A Superuser can Create, Read, Update and Delete product.
- A SuperUser can manage orders and authorize orders and restric suspicious users or cancel a suspicious order.
- SuperUser can maintain the website and make sure everything is up and running.
- To handle the 404 error, a 404 error handling page was created incase there was a 404 error which the soul purpose is to direct the user back to the homepage or product page.
- In case of a server error , a 500 error page was created to handle the error and redirect users back to the homepage.
- The marketing app is reponsible for the Newsletter subscription, powered by mailchimp.
- Information about the shipping , delivery and return policies.
- This application was tested on all modern available devices, redering perfectly and adjusting to different screen sizes of each and every device it was tested on.
-
@login_required
- Addition of the login required decorator to separates a user from some of the website functionality i.e a user cannot use the favorite function if not logged in, also a user cannot modify any details in his or her profile without login in and finally a user cannot access a superuser section of the website or superuser features.
-
Form Validation
- Forms can only be submitted if the required information is supplied correctly.
-
Unauthorised Attempts
- Any unauthorized attempt on the web application environment will raise a 404 error.
-
For security reasons an env.py file was created to enable environment consent and chose what environmental variables, api keys should be ignored in the github commits.
-
AWS: A cloud-based database that stores fields for products, users, orders.
-
PostgreSQL: PostgreSQL was used for fixtures categories.json and products.json
Below is the ER Diagram:
- HTML5
- CSS3
- JavaScript
- The web application homepage header consist of the following.
-
Navigation bar located at the top-most part of the page, spanning from left to right.
-
Company logo and logo font located at the left-most part of the navbar.
-
Search box situated at the middle of the navigation bar, The user can utilise the search bar in the header area to look up products. By entering different keywords, brand or sku, the search bar will provide a filtered list of results for those that do.
-
The User, Favorite and shopping bag icons can be found at the right-most part of the navigation bar. The User can login and existing account or register a new account using the my account functionlity. Also users can add,remove and view items in their favorite list. The bag contains the added items to purchase.
-
Present on the homepage body is the carousel functionality of image slider which serves as Hero image but with a dynamic functionality with a SHOP NOW button to navigate to the product display area.
-
The footer area is located at the bottom-most part of the homepage made up of Newsletter, Shipping, Payment, customer support, Social media and Copy right.
-
The homepage footer also includes a newsletter signup and customer support.
-
-
The user is presented with a list of products from the products page, each of which includes an image, the product name, category, price, brand, and rating. The top left corner also shows the overall number of goods. Using the filter bar in the upper right corner, the user can also continue to filter the products. The user can choose the headline choice and the level of filtering specificity from the dropdown menus to filter for particular categories.
-
By clicking on add item to bag, a pop up notification shows on bag that an item as been added to the bag, which the User could access by clicking on the bag to check the added item to update the bag by increasing or decreasing the quantity of items or by removing the item.
-
The user will be asked to provide the delivery details along with the complete list of the purchase's items. The "Adjust Bag" button allows the user to return to the shopping bag and make additional changes. Otherwise, the user may choose to pay by clicking the "Complete Order" button. Through Stripe, which uses a secure way, the payment is handled.
-
The user is redirected to the confirmation page, where the order confirmation is displayed, after the order has been submitted.
-
E-mail confirmation will be sent to the supplied emailaddress
- Here is a detailed registration form which will allow users to create a personalized account.
There were several attempts to log in and out. It performed as intended.
-
- add_products.html
- authentication_error.html
- base.html
- checkout_success.html
- checkout_success.html
- checkout.html
- connections.html
- edit_product.html
- favorite.html
- index.html
- main-nav.html
- mobile_top_header.html
- product_detail.html
- products.html
- quantity_input_script.html
- profile.html
- 404.html
- 500.html
- toast_error.html
- toast_info.html
- toast_success.html
- toast_warning.html
- login_cancelled.html
- signup.html
- shipping.html
- contact.html
- success.html
-
base.css
-
responsiveness.css
-
profile.css
-
This application was tested to meet with the requirements of all modern devices, it is responsive.
- There was a checkout issue when making the final payment, and was fixed
- There was a layout gap on both sides the navigation bar
This project was deployed to Heroku. Below is a step by step deployment process:
-
Go to Heroku website and register as user
-
Create a new app
-
Navigate to the "Resources" tab and search for Heroku Postgres.
-
In order to use PostgreSQL, both packages
dj_database_urlandpsycopg2have to be installed on Gitpod. -
Import
dj_database_urlinto the project'ssettings.pyto setup new database. -
Disable the default database(SQLite) in the project's
settings.pyand add the PostgreSQL database URL stored in the variableDATABASE_URL(can be found by clicking on the "settings" tab followed by clicking on "reveal config vars") in order to connect to PostgreSQL. -
Run migrations (due to the use of PostreSQL) on Gitpod.
$ python3 manage.py migrate -
Load data (Categories and Products JSON files in the
fixturesfolder).
-
Load categories first
$ python3 manage.py loaddata categories -
Then load products
$ python3 manage.py loaddata products
-
Create superuser:
$ python3 manage.py createsuperuser -
In the project's
settings.py, re-enable the projec's default database(disabled in step number 5) and with an if statment make sure that when the app is running on Heroku the connection is made to PostgreSQL or otherwise to default database (SQLite). -
Install
gunicornpackage on Gitpod -
Create Procfile
-
Set
DISABLE_COLLECTSTATICto1on Heroku (so heroku does not collect static files during deployment).$ heroku config:set DISABLE_COLLECTSTATIC=1 --app gem-master -
Add
ALLOWED_HOSTSvariable(containing host name of the premiumbody app and the localhost) to project'ssettings.pyfile. -
Commit and Push to Github
-
Since the app was created via the Heroku webpage, initializing heroku git remote is necessary before pushing to Heroku
$ heroku git:remote -a gem-master -
Push to Heroku
$ git push heroku master -
Finally, enable automatic deployment to Heroku when pushing to Github by going to Heroku webpage, clicking on the "Deploy" tab and then on "Connect to Github" button. Search for the gem-master repo and click on "Connect". Scroll down to the "Automatic deploys" section and click on "Enable Automatic Deploys".
Amazon Web Services(AWS) - S3 was deployed to handle media and static files storage in gem-master app after being deployed by Heroku.
- A web marketing facebook page was created Facebook
- The product images was taken from Kaggle Kaggle.
- The Carousel and Hero images were taken from Pexels Pexels.
Django Documentation
- Django have amazing documentation with a tutorial project and in depth explanations on core components.
- Django Documentation
- Codeinstitute , the slack community, and Codeinstitue mentor support team
Harry Leepz
- Github
- The favorite app code used was taken from Harry Leepz Github page.
Dennis Chmielewski
- Github
- The code for the contact app was taken from this Dennis Devio
Master Code Online
-
- A youtube learning platform was used for the functionality of the Newsletter app.
Kenbrotech
-
The github link is GemMaster.
-
Admin details will be attached to the submission form.
- A major part of the logic and web application structure used in the Gemmaster project was taken from code institute walk through project GitHub repository.