What You Need is an e-commerce web application that propose a range of indoor and outdoor plants to make your home or office healthier and a bit more special.
This project is build with growth in mind and offer opportunities to add and improve features as the business develops.

For this project the use of Stripe's test functionality is implemented, rather than actual live payments. You can make test payment with the following details:

Visit the live Website : WEBSITE NAME ➡️

• Project
  • Project Goals
  • Developer and Business Goals
  • User Goals
• UX
  • Audience Definition
  • User Stories
  • Design Choices
  • Wireframes
  • Different Design
• Features
• Future features to implement
• Flowchart
• Database
  • Database Design
• Code Structure/Organisation
• Technologies Used
• Testing ⏩ TESTING.md
• Deployment ⏩ DEPLOYMENT.md
  • Get Started
    • Cloning
    • Forking
    • Installations and dependencies
  • Live Deployment
    • Create the Heroku app
    • Set up AWS s3 to host our static files and images
    • Connect Django to s3
    • Add Media folder to our bucket
    • Final Steps
• Bugs
• Credits
  • Content
  • Acknowledgements

What You Need is an MVP build for educational purposes that promotes green and healthy homes and offices.

In this year 2022 we can observe a shift in lifestyles needs and organisation. People that use to spend most of their time at work, now work part or full-time from home. And in general people are more aware of their direct environment.

One of today's challenges is mental health. People are more conscious about it, and they are looking for ways to improve their mental health. They want to feel good or better about themselves and about what they do.

Research prove that plants and natural elements provide a positive impact on people increasing well-being and productivity.
This creates a market opportunity for helping customers improving their workspace and home. At the same time, the e-commerce market is expanding with more people using the web to get what they need every day.

In response to this demand, What You Need online shop offers a wide variety of plants. From the most delicate plants to the most indestructible. Customer can browse the website catalog by sorting or searching for specific categories, deals and plants.
Registered and logged in customer will benefit of the full functionalities of the website including save items into a wishlist, ratings products and leaving reviews as well as reviewing their past order and making request about an order with ease and confidence. Registered customer will have exclusive access to specially selected plants. So get what you need today!

As a site owner you can manage your products. You can add, delete and update products. You have the option to make a product on sale, and it will be populated added to the relevant category. As well the availability of stock is automated and products will be available to buy only if in stock. The product management page will display the products out of stock as well as the products within that reach a critical stock in order for you to keep track of your inventory and place an order if necessary.

• Develop a viable e-commerce web application.
• Provide a user-friendly interface.
• Provide an amazing user-experience across multiple device sizes.
• Improve Wellness and health.

• Easy to use application.
• Getting clear information.
• Quick access to products.
• Buy plants for their homes or offices.

🔙 Table of Content

1. The primary targeted audience is very broad and address all online customers.
2. The secondary targeted audience is Corporates or Businesses.

Both targeted audience are looking for plants to buy for their home, office(s) or business. They can be considered as one. The difference will reside in the quantity needed. This is managed with specials deals category for larger orders.

1. As a user, I want a user-friendly, simple and interactive website.
2. As a user, I want to be able to access the website on different devices with the same experience.
3. As a user, I want to find out what is the website purposes.
4. As a user, I want to search products by category.
5. As a user, I want to search for specific products.
6. As a user, I want to see more details about a product.

1. As a customer, I want to easily identify what is the price of the product.
2. As a customer, I want to easily identify if the product is available.
3. As a customer, I want to add/remove/edit product(s) in my shopping bag.
4. As a customer, I want to easily access my shopping bag.
5. As a customer, I want to make a purchase.
6. As a customer, I want the purchase process to be easy and secure.
7. As a customer, I want to be notified of the purchase I have made and be provided with a receipt.
8. As a customer, I want to contact the website owner about a past order.

1. As a user, I want to create an account.
2. As registered user, I want to sign-in and sign-out easily.
3. As registered user, I want to change my password if forgotten or not safe anymore.
4. As signed-in user, I want to save/update information to my profile for a better and easier experience.
5. As signed-in user, I want to save products I like for a future purchase.
6. As signed-in user, I want to see/edit my wishlist.
7. As signed-in user, I want to access my previous orders.
8. As signed-in user, I want to leave a review on a product.

1. As an Admin, I want to add/edit/delete products.
2. As an Admin, I want to see orders.
3. As an Admin, I want to manage customer queries.

🔙 Table of Content

The approach concerning design choices is that the UX (User experience) should be the same across all platform and devices. Consistency being a key factor for UX.
For this reason the UI (User Interface) is kept the same across different device sizes. This does not exclude the consideration for any extra or different features, should it improve the user experience.

Considering the targeted audience, the sans serif type of font is the more appropriate because it is most often associated with simplicity and straightforwardness.

The website will use well known and popular font that are used online in order to bring to the user a "feeling of knowing".

• Poppins for headings.

• Lato for main content.

Sans serif will be use as a fall back if the fonts do not load. It is common as the main typographies are sans serif type.

• Some Font Awesome icons will be part of the website for better UX.
• The logo and favicon are the same image and use the color scheme of the website.

The colours chosen for the website are simple and joyful. They are based on the psychology behind colours (colour affects, London Image Institute).

Adobe Color was used to build the colour scheme, compatibility and accessibility. The color scheme and swatches are said color-blind safe.

The images will be the one uploaded by website owner and/or Admin for products descriptions and website illustrations.

The feel of the website is welcoming and simple to provide a quick access and learning process.
It makes users comfortable.

No audio or video will be integrated at the moment.

🔙 Table of Content

• Home page
• About page
• Contact page
• Terms and Conditions of use page
• Sign-in page
• create an account page
• Products page
• Product details page
• Search page
• Orders history page
• Order details page
• Order issue page
• Account details page
• Wishlist page
• Bag page
• Checkout page
• Add product page
• Add category page
• Error page

For the full version:

• website name

🔙 Table of Content

🔙 Table of Content

To build this project, I use Django framework with the Django templating language. For consistency across the website some features will be repeated and functionality will be kept as simple and direct as possible.

• Navigation is always present and fix at the bottom of the page on small screen and fix at the top of the page on large screen.
  • Home
  • Account/profile
  • Bag
  • Search

🔙 Table of Content

🔙 Table of Content

The database design used is a relational database.

• During development, sqlite3 was used. It is the database provided by Django and only use for development.
• For Production, Postgres is used. It is the database provided by Heroku when deploying the website live.

Below is a representation of the database used for this project.

Django, the framework used for the production of this project, is an MVP: Model View Product. This means that the project build with Django is divided in multiple apps. Its structure allows separation of concern and provide many built-in features.
The models define the data-structure.

• In this project, the following models have been developed:
  • User (being a "default" model provided by Django and allauth)

This project was developed using:

• HTML
• CSS
• JavaScript
• Python
• Jinja templating language.

• Django
  Framework used to develop the website.

• Balsamiq
  For creating wireframes.

• Lucichart
  For producing the flowchart and database design.

• Google Fonts
  For importing fonts.

• favicon.io
  For generating the favicon.

• TinyPNG or Squoosh
  For resizing all the images.

• BeFunky For cropping some images.

• Adobe Color
  For extracting the color scheme used on the website.

• Am I Responsive?
  For providing screenshots of the responsiveness of the website across several devices.

• Autoprefixer CSS online
  For adding prefixer in style.css for cross browser compatibility.

• cdnjs
  For jQuery cookie

• Git
  For Version control.

• GitPod
  For Integrated Development Environment.

• GitHub
  For hosting the repository.

• Heroku
  For deploying the website live.

🔙 Table of Content

Testing information are published in a separate file for better readability. Please see TESTING.md.

Deployment information are published in a separate file for better readability.
Please see DEPLOYMENT.md

This project is developed on Gitpod Workspaces IDE (Integrated Development Environment) committed and pushed to GitHub, to my Repository using Gitpod Command Line Interface (CLI) with Git version control.

The project is deployed on Heroku using Postgres database and linked to s3 bucket cloud service on AWS (Amazon Wed Services) for hosting the media and image files.

• DEPLOYMENT.md
  • Get Started
    • Cloning
    • Forking
    • Installations and dependencies
  • Live Deployment
    • Create the Heroku app
    • Set up AWS s3 to host our static files and images
    • Connect Django to s3
    • Add Media folder to our bucket
    • Final Steps

W3schools

W3docs

stack overflow

GeeksforGeeks

Net Lawman
For privacy policy template.

🔙 Table of Content