View live project here

A fictitious online store setup for study porposes. The company wants to reach as manymarket possible by selling their products online.

• I want an easy navigation website.
• I want a easy way to acess to all products.
• I want a variety of products to browse.
• I want to have the option of browsing in categories.
• I want to search for something specific with a keyword.
• I want to have my own account create it easily.
• I want to be able to have a favorites list in my account.
• I want to be able to checkout the products easily.
• I want to see my order history.
• I want feel safe when I purchase with credit card.
• I want to be able to leave a review of the product.
• I want to see contact informations in case I need support from the store.
• I want to be able to access the site from any kind of device.

• Provide clarity with a layout that satisfy the user needs.
• provide the possibility of anyone browse recipes without register.
• provide the possibility to the costumer save his favorite items for future shopping.
• provide easy access to cart and check out.

• Typography
  • The main fonts chosed for this project were " EB+Garamond"and "Yeseva+One"

• Navigation Bar fixed.
• Home page with hero image and links to shop.
• Search functionallity.
• Register and login page forms.
• Shopping cart page.
• Checkout page.
• Favorites page.
• Add review page.

• Fix the responsiveness.
• Add a best selling section under the hero image.
• Add a subscribe now section and Implement it.
• Add a footer.
• Add a contact form.
• Add zoom in or shadow to the product images.
• Add the delivery banner under the nav and pass it as carrousel on mobiles.
• Create a new login and registration forms.
• Have my favorites linked to the user account.
• Allow user to choose color for the favorite item.
• Allow user to send from the favorite directly to the shopping cart.
• Fix functionality to remove products from favorites.
• Have a number of the products added to favorites showing in the favorite icon on the navbar.
• Have a model for leaving review instead of a form.
• Redirect the client from the review to the product or products page.
• Push the user name to show in the review.
• Implement a star rating system.
• Have a page to all reviews.
• Have a filter products by price and type of plant care.

• HTML
• CSS
• JAVASCRIPT
• PYTHON

• Bootstrap 4

  • Grid system and pre made classes to allow formatation and responsiveness.

• Django

  • framework for rapid development, database and management.

• JQuery

  • used along with bootstrap.

• GIT

  • Git was used for version control by commiting to and Pushing to GitHub.

• Github

  • GitHub is being used to store the project.

• Stripe

  • payment platform to validate and accept credit card payments securely.

• AWS S3

  • Used to store static files in the cloud.

• Heroku

To be implemented.

The project was deployed to GitHub Pages using the following steps...

1 -Tell Heroku which applications are required to run by adding pip3 freeze --local > requirements.txt to CLI

2 -Create Procfile - echo web:python app.py>Procfile

3 -Login to Heroku.

4 - Once logged in on your dashboard, we can click to Create a New App

5 -Connect GitHub repository to Heroku.

6 - Click on 'Reveal Config Vars', and tell Heroku which variables are required.

7 - From the deploy section click Deploy Branch Click View

1 - Log in to GitHub and locate the GitHub Repository

2 - Under the repository name, by the left side of the green Gitpod button click in Code.

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.

7 - Press Enter. Your local clone will be created.

8 - Click Deploy Branch

9 - Click View to launch your new app.

• content was written by the developer
• Boutique Ado, Code institute - Shopping cart
• Crispy forms - register, login, account and checkout
• Bootstrap throughout the project.
• CodeInstituteSampleRead.me for the Deployment section

Thanks to all the tutors , to my mentor and to the Student Care.