E-shopperonline Is an online store that offers to customers who are looking for food or supplements, from athletes to anyone who wants to get fit. This website has functions to make it easily available our range of products to all users, the website is made to be responsive and simple to use on a range of devices.

Please note: This site was created solely for educational purposes. Click here for a live demo version of this project.

• UX (User Experience)
  • User Stories
• Design Choices
  • Typography
  • Colour Scheme
  • Wireframes
• Features
  • Site Navigation
  • Future Features
  • Error Page
  • Responsive Design
  • Defensive Design
• Database Schema
• Technologies
  • Languages
  • Frameworks
  • Libraries
  • Tools
• Manual Testing
• Bugs
  • Bugs fixed
  • Known Bugs
• Deployment
  • Running Locally
• Web Marketing & Business
• Credits
  • Media
  • Acknowledgements

Back to contents

• The navigation bar, page titles, and buttons are all in the "'Open Sans'" font family. This design has a very become and neutral, yet friendly appearance, and even though the website is dedicated to health and fitness, it just seemed appropriate to employ.
• And for Logo I decided to apply 'Roboto' to allows letters to take up the space needed to give power aspect to logo.

The colors used in this project are:

• (#BB390F) - Rust

• (#EAE7EA )- Platinum

• (#D8B34E) - Metallic gold

  • The combination of these colors gave a very attractive look to the site. I decided go for rust for the buttons because stand out and packs an energetic punch.

  

• Wireframes

  • The wireframes, for desktop and mobile, were created using Balsamiq and can be found bellow:

wireframe

Back to contents

Links essential for ease of access are displayed in the navigation bar.

• Anyone can register free of charge and make their own account with their essential information. In the navigation bar, there is a registration button. Only a username, email address and password are required.

• Registered users can securely log in and out using the login/logout buttons on the navigation bar.

• The "Shop Now" button on the home page and the navigation bar both provide access to the products. By clicking on the image of the product they to give more information about the product, users may view detailed information such as cost, brand, and product ratings. Users can search for a specific product by name or by keyword using the search box at the top of the page. A search box at the top of the screen allows you to filter products by category, and a dropdown selector on the right of the screen allows you to sort by price, classification as A-Z products, or low-to-high pricing.

• On the product detail page, unregistered users can add items to their shopping cart. Once logged in, customers can add items from the detailed product page to their bag and choose how many of that particular item to add to their cart. The user must click on the cart information to be taken to the cart page, where there will be action buttons to remove items from the cart and entries to change the quantity.

• Users with and without accounts can buy products. When the user is ready to proceed with the payment and is on the cart page, they can click the "checkout" button to be taken to the payment page, that they can fill out the required fields that really are missing (users can choose to store the information), and then complete their order. Users are routed to a success page where order information is available after the order has indeed been completed. When an order is completed, users are automatically sent a confirmation email including the order details.

• The user can modify the delivery details under the profile page management.

• The product details tab allows users who are logged in to leave reviews for each item. The user will view a message asking for his login in order to submit a comment if he is not currently logged in.

To access the admin interface by adding /admin to the end of the Eshopper URL.

In the admin interface, a superuser or administrator can:

• View the list of categories and goods and create, update, or delete them.
• Product and its information may be edited, deleted, or added.
• View the whole list of users and remove any you want.
• View the order history and all associated details. Which user, when, how much, what order number, etc.

• Integrate OAuth app to add Google login for quick user registration and login.
• A star rating or upvote feature for the products.
• Implement a space where users can discuss diet or training tips with other users.
• Adding a Sold Out option to price field.

• 404 page created to redirect users back to the main site in case of an error

• 500 error page created to redirect users to the main site after a server error

• The application has been developed for mobile devices but it has been adjusted to provide such a wonderful experience for desktop and tablet users too though.

• Form Validation

  • All forms also have form validation to help ensure the required information is entered before submission. If incorrect data is entered, a warning message will be displayed to advise the user on how to proceed.

  • A default image will be added if a product is added without an associated image, however form ’ll work this unlikely.

• Unauthorised Attempts

  • If a user attempts to access a section of the website for that they're not permitted, they will receive an error 404 message when the page is loaded.

• @login_required

  • Addition of the login required decorator to prohibit access to specific pages. Only users who've been granted approval can add, edit, delete, and edit products. A user whom have logged out would be sent to the login page if they attempt to access a restricted page.

• Review

  • Only users who have received approval can leave a review about the available product. The comment box will be available on the products details page.

• Bag

• Validation has been put in place to ensure sure that it only 99 items at the most can be put there in bag. If 0 is selected, the item is taken out of the bag. The user will have access to the necessary information, such as the front addition for purchases under 50 euros.

Back to contents

• PostgreSQL: SQL triught PostgreSQL was used for fixtures categories.json and products.json

• SQLite: A cloud-based database that stores fields for products, users, orders.

The ER diagram schema is below:

Back to contents

• HTML5
  • Used as the main markup language for the website content.
• CSS3
  • Used to style the individual webpages.
• JavaScript
  • Used to show the questions through pagination and for the game play.
• Python 3
  • Used to run the site and database

Back to contents

• Bulma

• Django

Back to contents

• Panda: Built on top of the Python programming language, Panda Library is an open source data analysis and manipulation tool that is quick, strong, adaptable, and simple to use. On the home page, it was utilized to create a section listing the best sold products.

• OS: included in this website in order to provide basic utility modules for Python.

• SYS: functions and variables that was used to manipulate different parts of the Python runtime environment.

Back to contents

• Git

• GitHub

• Gitpod

• Heroku

• AWS

• Stripe

• Google fonts

• Htmlcolorcodes

• Favicons

• Lighthouse

• Website Mockup Generator

• JSHint

• Balsamiq

• Mailchimp

• PEP8 Online

• W3C Markup Validator

• Jigsaw Validator

• web page mobile friendly

• Lucidchart

Back to contents

• The user is given an introductory text and a "Shop Now" button on the homepage. The user will be directed to the products page by this.

• The header area also provides access to the products page for the user. The user can choose from a variety of categories from which the products are then sorted.

• 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.

• Testing product search bar.

• The homepage also includes a newsletter signup area that will appear on desktop computers and other devices.

• Last but not least, I also developed a function that displays the best-selling items depending on the transactions handled throughout the test period.

• 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.

• Only registered user will be allowed to leave a review for the product.

• User logged he can pick any product and write a review

• Once submitted an alert message will be displayed to indicate that the comment has been posted.

• By selecting the product, the user will receive a notice that the product has been added to the bag. The customer will see the value of the product, the current offer and will have the option to view bag or finalizing the purchase.

The user has the option to change the quantity and contents of their bag. The + and - icons can be used by the user to raise or reduce the product amount. By clicking the update button, the user can then update their bag with the necessary quantity adjustment, which also updates the overall bag total. The user also has the option of manually entering the quantity they want to change. By choosing the remove button, the user can also take the item out of the bag. The object in the bag will be fully removed as a result. A fresh alert message containing the changes will appear each time a change is made to the bag.

• Only the admin or the person who added the product on the Eshopper website can edit or delete the selected product, this function is not available for non-users.

• To edit the product you need the information needed to complete the form in the Porduct Management area.

• This non-image image will be displayed by default if the product doesn't have a picture.

• 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.

• Email confirmation:

Along with the superuser account (/admin), I've made a personal account for myself. Verify that authentication went smoothly.

There were several attempts to log in and out. It performed as intended.

User/Admin can create journal post with this model.

User/Shopper can contact website admin in case needs help with your order or website access. The user received a confirmation or error message if the form is invalid.

• W3C HTML Validator

  • checkout_success.html
  • checkout_success.html
  • checkout.html
  • index.html
  • add_products.html
  • edit_product.html
  • product_detail.html
  • products.html
  • quantity_input_script.html
  • profile.html
  • 404.html
  • 500.html
  • base.html
  • main-nav.html
  • mobile_top_header.html
  • toast_error.html
  • toast_info.html
  • toast_success.html
  • toast_warning.html
  • authentication_error.html
  • connections.html
  • login_cancelled.html
  • signup.html
  • blog.html
  • add_blog.html
  • edit_blog.html
  • contact.html

• W3C CSS Validator

• base.css

• profile.css

• Google Chrome, and Safari, were among the browsers on which the project was evaluated.
• The project was tested on the iPad, iPhone 12 Pro Max, Iphone 10 mini, MacBook Air, and Samsung galaxy a32.
• To get user feedback, enhance the user experience, and find any potential problems, Eshopper was put to the test among friends and family.

• I needed to remove to add review in the product_detail view but the solution was to define in the product_detail view.

• Home page hero image is not rendered on Iphone 12 pro Max.

Back to contents

This project was deployed to Heroku. Find the steps bellow:

1. Go to Heroku webpage and create a new app

2. Click on "Resources" tab and provision a new PostgreSQL database.

3. In order to use PostgreSQL, both packages dj_database_url and psycopg2 have to be installed on Gitpod.

4. Import dj_database_url into the project's settings.py to setup new database.

5. Disable the default database(SQLite) in the project's settings.py and add the PostgreSQL database URL stored in the variable DATABASE_URL(can be found by clicking on the "settings" tab followed by clicking on "reveal config vars") in order to connect to PostgreSQL.

6. Run migrations (due to the use of PostreSQL) on Gitpod.

   $ python3 manage.py migrate
   

7. Load data (Categories and Products JSON files in the fixtures folder).

• Load categories first

  $ python3 manage.py loaddata categories
  

• Then load products

  $ python3 manage.py loaddata products
  

1. Create superuser:

   $ python3 manage.py createsuperuser 
   

2. 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).

3. Install gunicorn package on Gitpod

4. Create Procfile

5. Set DISABLE_COLLECTSTATIC to 1 on Heroku (so heroku does not collect static files during deployment).

   $ heroku config:set DISABLE_COLLECTSTATIC=1 --app e-shopperonline
   

6. Add ALLOWED_HOSTS variable(containing host name of the premiumbody app and the localhost) to project's settings.py file.

7. Commit and Push to Github

8. Since the app was created via the Heroku webpage, initializing heroku git remote is necessary before pushing to Heroku

   $ heroku git:remote -a e-shopperonline
   

9. Push to Heroku

   $ git push heroku master
   

10. 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 eshopper repo and click on "Connect". Scroll down to the "Automatic deploys" section and click on "Enable Automatic Deploys".

Back to contents

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps:

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

1. Log in to GitHub and locate the GitHub Repository

2. Under the repository name, click "Clone or download".

3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.

4. Open Git Bash

5. Change the current working directory to the location where you want the cloned directory to be made.

6. Type "git clone", and then paste the URL you copied in Step 3.

   $ git clone https://github.com/artneto/Eshopper
   

After the deployment to Heroku, Amazon Web Services(AWS) - S3 was used to store all the media and static files in Eshopper app.

A Facebook page for Eshopper was made as part of the website marketing campaign. Please take note that I made a fake Facebook page using the Code Institute template.

• The hero image is from the free stock image library Pexels.
• The product pictures came from Amazon Amazon.

• A major part of the logic and web application structure used in the Eshopper project is from a Code Institute tutorial that can be found in this GitHub repository.

• My Family for testing the site and giving feedback on different devices.

• Code Institute slack channel for porviding further information and support.

• My friend and collegue Beatriz Amorim for supporting me and providing me feedback.

Back to contents