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:
| NUMBER | BRAND | CVC | DATE |
|---|---|---|---|
| 4242424242424242 | Visa | Any 3 digits | Any future date |
| 5555555555554444 | Mastercard | Any 3 digits | Any future date |
| 378282246310005 | American Express | Any 4 digits | Any future date |
Visit the live Website : What You Need ➡️
- Project
- UX
- Features
- Future features to implement
- Flowchart
- Database
- Code Structure/Organisation
- Technologies Used
- Testing ⏩ TESTING.md
- Deployment ⏩ DEPLOYMENT.md
- Bugs
- Credits
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.
- The primary targeted audience is very broad and address all online customers.
- 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.
- As a user, I want a user-friendly, simple and interactive website.
- As a user, I want to be able to access the website on different devices with the same experience.
- As a user, I want to find out what is the website purposes.
- As a user, I want to search products by category.
- As a user, I want to search for specific products.
- As a user, I want to see more details about a product.
- As a customer, I want to easily identify what is the price of the product.
- As a customer, I want to easily identify if the product is available.
- As a customer, I want to add/remove/edit product(s) in my shopping bag.
- As a customer, I want to easily access my shopping bag.
- As a customer, I want to make a purchase.
- As a customer, I want the purchase process to be easy and secure.
- As a customer, I want to be notified of the purchase I have made and be provided with a receipt.
- As a customer, I want to contact the website owner about a past order.
- As a user, I want to create an account.
- As registered user, I want to sign-in and sign-out easily.
- As registered user, I want to change my password if forgotten or not safe anymore.
- As signed-in user, I want to save/update information to my profile for a better and easier experience.
- As signed-in user, I want to save products I like for a future purchase.
- As signed-in user, I want to see/edit my wishlist.
- As signed-in user, I want to access my previous orders.
- As signed-in user, I want to leave a review on a product.
- As an Admin, I want to add/edit/delete products.
- As an Admin, I want to see orders.
- As an Admin, I want to manage customer queries.
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.
- 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:
After considering deadline and features priority, I decided to leave the add category and order issue page for future features to implement. I once heard that the project is never finished, we just run out of time!
It is important to note that adding category is available through the url /admin accessing django admin interface.
As well, I have changed the product management page that consisted in "add a product" page to a store management page where you can admin can access "add a product", "see messages", and "stock alert". More details on those in the features.
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
-
-
-
-
Send message to store owner.
-
Browse products
-
By clicking the callout button on the landing page: "Find What You Need Today!"
-
By clicking the search menu button/icon
-
By category
-
By typing in the search bar
-
By sorting
-
-
-
-
-
Shopping bag
-
View the shopping bag
-
Add products to the bag
-
Remove/edit products in the bag
-
-
-
-
Checkout
-
Purchase item securely with Stripe payment system
-
Save delivery information
-
Payment confirmation
-
Order confirmation
-
-
-
-
-
-
-
Account/Profile
-
Create an account
-
Sign-in and sign-out
-
Change password if forgotten or unsecure
-
Update account information
-
Access orders history
-
Access and update wishlist
-
Access exclusive content
-
Create, access and add to wishlist
-
Read and right reviews giving product rating
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
It is important to note that in the picture we see the None username as the user is superuser and was created from the console in the terminal. As it is a requirement when creating and account thi will never happen for a customer.
- Admin
-
Access store management
-
Add product
-
Edit product
-
Delete product
-
See messages
-
See stock alert
-
-
-
-
-
-
-
-
It is important to note that ohter fucntionalities are available throught the url /admin accessing Django admin interface.
- Defensive design
-
Extra step to confirm the deletion of a product
-
Extra step to confirm the deletion of a message
-
-
-
-
Order issue. It was part of the original design and will be implemented in future version. The idea is for a logged in customer to be able to file a request on a specific order. This order will then be assigned a status that will be updated by the admin as the request is treated. It would offer a nice advantage for a user to create an account and for a user and store owner to treat demands individually with ease while giving a real time feed back to rhe user on the order request status.
-
Redirect user when adding to a wishlist. As mentionned in the bug section, there was a misconception on my part on how the request.path worked. Updating this feature to redirect the user exactly where he was located on the website will be great betterment of the user experience.
-
Product liked. In a future version I would like to implement a relationship between a wishlist, a wishlist item and a user in order to be able to display specifically where a user has saved a product when clicking on it. For exemple if a user has two different wishlist. at the moment if a product is in a wishlist there are no feedback for the user to know in wich one it is unless he tries to save it or checks in the wishlist itself. With my experience and knowledge it needs a lot of loops and statement, but I am sure with a bit more time a solution will provide the user with its feature.
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. It has been updated to the current database models. If you wish you can see the previouse version here: Database Design
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:
- Category
- Product
- ProductReview
- Order
- OrderLineItem
- UserProfile
- ContactUs
- Wihslist
- WihslistItem
- User (being a "default" model provided by django and allauth)
- Product
↔️ Category: One to Many- A product can be related to one category, and a category can be related to many products.
Upon creating a product the admin has to associate it to a category. All the category are not available though. At the moment we can associate a product to Indoor, Outdoor and Exclusive plants. The other categories are populated depending on different factors. They are created as categories in order to render them dynamically on the website, but they really act as a sorting options.
Best seller is populated by a queryset returning the 5 most sold plants. This is available with the quantity_sold filed that is automatically updated in the webhook_handler each time a successful order is created.
Newly added is populated by comparing the creation date of a product date_added field to "today" and checkimg if the value is greater than two months.
Special deals is populated by querying on the on_sale field of a product returning all products on sale.
-
Product
↔️ OrderLineItem: Many to One- A product can be related to many OrderLineItem, but an OrderLineItem can be related to one product.
-
Product
↔️ ProductReview: Many to One- A product can be related to many reviews, but a review can be related to one product.
ProductReview as you can see has two different date filed that allow a precise tracking for when a review is created with the date_time field, but allow as well to display a more user-friendly with date field.
-
Order
↔️ UserProfile: One to Many- A Order can be related to one user, but a user can have many orders.
-
Order
↔️ OrderLineItem: Many to One- An Order can be related to many OrderLineItem, but an OrderLineItem can be related to one Order.
-
UserProfile
↔️ ProductReview: Many to One- A user can be related to many reviews, but a review can be related to one user.
User have to be register to create a review.
-
UserProfile
↔️ User: One to One- A UserProfile can be related to one User, and a User can be related to one UserProfile.
-
UserProfile
↔️ Wishlist: Many to One- An user can be related to many wishlist, but a wishlist can be related to one user.
Userhave to be register to create a wishlist. If no wishlist is created and a user wants to save an item, a default wishlist is created automatically.
-
Wishlist
↔️ WishlistItem: Many to One- An wishlist can be related to many wishlistItems, but a wishlistItem can be related to one wishlist.
-
ContactUs is basically an inbox that saves messages sent by customer. It proposes a choise of subjects and when a message is succesfully saved, an email confirmation is automatically sent to the customer with the details of his/her request.
-
Related notes:
- When a review is posted, a signal update automatically the product rating score. It is worth noting that a review will not be deleted if even if a user profile is. This is choice made in order to keep the product score for better accuracy. Though if an admin wished to delete on, the score will be updated accordingly.
- The liked field on the product model is updated each time a query is made on a product. This allows a user to have a real time feedback on his liked items.
- Selling price field on the product model is used to diplay product sorted by price. Intead of comparing two fields (on_sale and price), the selling_price field is updated automatically when a product is either created or edited/updated.
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. -
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.
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.
-
Direct input in product quantity selector.
- Expected result:
- When selecting a quantity for a product by entering value in the selector input (not using buttons), if the value entered is superior to the quantity of the product (quantity available), the value should be set to maximum quantity available. This feature is handle by javascript in products/templates/products/include/quantity_input_script.html
- Bug:
- The quantity return to the selector input is equal to the max quantity - 1.
- Fix:
- At the moment considering this bug not critical, I have decided to add 1 to the quantity returned to the input.
- Expected result:
-
Styles on safary.
- Styles are not displaying as intented on safary for the navbar on small screen where we can see the that the before and after selector styled to hide some part of the navbar are misplaced.
- This bug has not been seen in other browser and is still present as it is considered very specific and not critical.
-
Redirect url when adding to a wishlist.
- Expected result:
- When I coded the view for adding a product to a wishlist I intended for the user to be redirected on the same page that he was when doing it.
- Bug:
- If a user is browsing by category or sorting the content, when adding a product to a wishlist, the user willbe redirected to the all products page.
- Fix:
- This is actually not a bug, but rather a bad user experience. The redirected url works as intended rather than expected. Because when a user is browsing on the website on different categories, and sorting the content he actually is located on the all products page wich displays a tailorded content depending on the request.
- In the future feature to implement, it will be necessary to research the keywords present in the url in order to rediect the user where he was. This is not critical and will be fixed in a future version.
- Expected result:
-
Navigation menu for small screen:
- Navigation menu done with a tutorial from Online Tutorials and adapted to the project.
-
For scrolling back to saved position:
- Credit to Joonas from Satckoverflow post
-
For hiding element after a period of time:
- Credit to zzzzBov from Stackoverflow post
-
For sorting a list and returning a list:
- Credit to venpa from Stackoverflow post
-
For display messages using extra_tags:
- Credit to birophilo from Stackoverflow post
-
Pinterest's link on the home page footer:
-
From depositphotos
-
Home page photo:
-
Potted plant pictures for product images:
- By Igor_Vkv Houseplant Ficus Elastica — Photo
- By maxim1717 Gloxinia on a white background — Photo
- By wildman Beautiful red poinsettia plant isolated on white — Photo
- By wildman Window plant "Nephrolepis exaltata" — Photo
- By wildman Window plant "Syngonium podophyllum" — Photo
- Cyclamen plant — Photo
- By wildman Home plant begonia on white background — Photo
- By olesiabilkei Family of young potted citrus plants isolated on white. top view — Photo
- By Tamara_k Rubber plant (ficus), isolated on white — Photo
-
-
Potted plant photo by Kelsey Brown on Unsplash
-
From stock adobe:
-
Pictures for error pages:
- By Kurt no coca drugs
- By Ekaterina Mikhailova 404 error page not found concept with undersea world isolated on white background. The Angler fish swims on depth among other fish, the colorful underwater world with seawood and sand - flat vector
- By dabflyer Laptop screen, cloud server, Exclamation mark danger. Vector 3d symbol, isometric, color web icons, new flat style. Creative design idea, concept for infographics
-
Potted plant pictures for product images:
- By fotoslaz (dieffenbachia camilla) Green houseplant isolated
- By taviphoto Ulmus parvifolia, chinese elm in training
- By Grafvision Viola wittrockiana flowers
- By Grafvision Cyclamen curly chrysanthemum flower
- By Yurii palm tree in a pot
- By Yurii palm trees in a pot
- By Yurii schefflera arboricola in pot
- By Yurii Buxus sempervirens in pot
- By Yurii small coconut tree in a pot
- By Yurii Chlorophytum in a black pot isolated on white background
- By Yurii Monstera in a clay pot on a white background
- By Yurii mandarin Tree with Fruit
- By Yurii Croton in pot. Exotic plants
- By Yurii Exotic plants in pot Tradescantia zebrina
- By Yurii Spathiphyllum in pot
- By Yurii cactus in pot
- By Maryana Volkova Violet oxalis house plant and grey ceramic pot on the wooden table
- By Flower Studio Thuja occidentalis danica isolated on white background. Coniferous trees
- By ozmen Tomato plant with flowers in bucket isolated on white background
- By de_nise Zimmerpflanzen - Peperomia
- By M. Schuppich Sedum morganianum
- By womue Rosa Alpenveilchen
-
For exclusive category image:
-
For indoor category image:
- By artinspiring Plants on shelf
-
For outdoor category image:
-
For newly added category image:
-
For special deals category image:
- By bsd studio Seed money linear icon
-
For best seller category image:
- By erix_ultrasonic Recommended Thumbs up with a Star Logo Vector Icon Illustration
-
For no pictures available:
-
Net Lawman
For privacy policy template.
Special thanks to all Code Institute's team (“Teacher”, Lecturers and Tutors) that are making me more knowledgeable and are making this happen.
Huge thank you to the Slack community, all the members and all the leads and tutors for their help and support.
I am hugely grateful to my mentor Chris Quinn for guiding me through this project.