The purpose of this project is to create a website for a startup called B&O. B&O is a company that sells innovative products based on users opinions.. The objective of B&O website is to let users drive and be involved in the companys innovation process of new products. It allows users not onlye to buy new products but also to share their product ideas so the community can vote and the company can then choose what products they will sell or not. A key prt of the business model of the company is to sell prodcuts through their ecommerce funcionality. Users can register/login to thei online shop and purchase the latest innovations produced.
This platform hass been built to be fully responsive so it works perfectly on any device and screen size.
Some of the initial Wireframes for both descktop and mobile versions can be found here: UI Mockup Images
Below are some of the potential stories that users can follow:
-
A new user should be able to:
- Visualize a homepage with all products and blog entries.
- Visualize the main navigation (sticky) with links to the main sections.
- Visualize a search bar for finding products.
- User always have the option to go to any page thanks to a sticky navbar with all pages accesible from there.
-
If I user want to purchase a product they should be able to:
- Visualize all products in one page
- Register a new account or login to existing one
- See the account profile.
- Search individual products from anywhere trough the searchbar on the navbar.
- Add to cart.
- Visualise a list of the final order and change that order (remove or edit)
- Add contact details and payment option
- Pay
-
When a user would like to add a new suggestion, they should be able to:
- Access a complete list of suggestions
- Add a new suggestion (no account needed as we want to promote as many interactions as possible)
- See personal suggestion
If you would like to buy:
- First, register an account or login (if you already have one). This can be achieved by clicking on one of the login or register buttons on the navbar.
- Then users will be able to purchase any of the products and as many as they wish. They will only have to add to cart the items and go to their cart page when they are ready to continue.
- From the cart page they will be able to see a breackdown of their prodcuts and modify it if needed.
- Then they will be able to follow the checkout process and pay with stripe. Below you can see a card example you can follow to finilise the purchase
| Card number | CVV | Date |
|---|---|---|
| 4242 4242 4242 4242 | 111 | 08/24 (or any valid credit card date) |
If you would like to send a suggestion:
- Just go to the suggestion page and see all open sugestions.
- If your idea is not available you can press the button add sugestion and add the information you wish to send.
- Then your product sugestion will be available for the community to vote.
- If your ideas get enough votes and its viable to produce, B&O will produce that product and place for sale until performance its assesed.
B&O platfom has variety of functionalities/features to let users achieve diferent goals. See below some of the main functionalities:
- See all products
- See each product
- Add to cart from products page, homepage or specific product page
- See order list and modify order from the cart page.
- Checkout form to add customer details and credit card details
- Purchase
- Search products by keyword
- Add a product suggestion
- Blog entries page
- Single blog page
- Fully responsive
- Comments on suggestion ideas
- Edit own ideas
- Share social media
- Similar products section on product page
This website its Djago platform that uses bootsrap for the interface. See below some of the key technologies used;
- HTML
- CSS
- Bootstrap - Bootstrap is an open source framework for developing with HTML, CSS, and JS.
- JavaScript - to activate bootstrap elements and for DOM manipulation.
- Django - Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design.
- Github - Github is one of the platforms used to push all the savings on the code.
- Heroku - Platform used to import the entirely platfom into the cloud.
Data e-commerce example:
Data Blog Post:
| Id | When is Created | Id Name | Text | Tag | Image |
|---|---|---|---|---|---|
| 1 | Date | Title | Blog Post content | Category type | image |
Data Suggestions:
| Id | When is Created | Id Name | Text |
|---|---|---|---|
| 1 | Date | Suggestion title | Suggestion content |
This project has been tested in many different ways: . - I used chrome developer tools to check for errors, responisvenes and test if something was wrong with my html, css or javascript files. - I used Django error page that appeared when my code had any errors, I also use print command at time with specific messages to understand if, for example, data was been aplied. - As well, I used Django built-in test funcionality to create automated, custom test. This had allow me to create multiple tests for my views, models, forms... - I also usedd Travis CI by connecting it trough my github repo. - Finally I went through lots of manual tests to understand and make sure the funcionality of the website was on point. Below you see some of the tests performed:
| PRODUCTS APP | CHECKOUT APP | ACCOUNTS APP |
|---|---|---|
| 1 Test | 5 Test | 3 Test |
| Manual Test | Status |
|---|---|
| Clicking on logo icon in navigation takes user to homepage | Successful |
| Clicking on logo icon in navigation takes user to homepage | Successful |
| The platform has been tested on all modern desktop and mobile browsers to ensure cross compatibility and functionalities. | Successful |
| The platform has been tested to be fully responsive and that is correctly displayed across all of type devices. | Successful |
| The platform has been tested to ensure that all of the user stories were functional without errors. | Successful |
| The platform has been tested to make sure all urls work properly | Successful |
| The platform has been tested to ensure all text-area and inputs are perfectly funcioning and sending/reciving corrct data. | Successful |
| All links and buttons tested to make sure they all works as they should. | Successful |
| The user can come back to the previous window from everywhere, no rabbit holes. | Successful |
| Data from database is been accesible at all times. | Successful |
| Purchase process until the purchase its done works perfectly. | Successful |
I created a git hub repostory first and conncted to a heroku app and then pushed the entire website code to it. To ensure this worked and based on Heroku documentation I had to create a procfile and a requirements.txt file. This allowed heroku to install the correct packages and run my project accordingly. I also had to install the whitenoise package so heroku could find my static files. To also get my models working I had to migrate my database from sqlite to herokus postgres database.
The app is hosted on Heroku. The code uses the default GitHub master branch. This wproject has been deployed to heroku via Github so the code in both GitHub and Heroku are the same.
Both platforms have been connected too, therefor changes made to the master branch on GitHub are automatically pushed to Heroku. The only data used in Heroku not
visible on GitHub are the secret config variables detailed in the contributing section of this readme, and the static and media files
hosted on Amazon S3.
- Products and design inspiration: https://www.bang-olufsen.com/
- Checout page structure from: https://getbootstrap.com/docs/4.0/examples/checkout/
- Some code logic has been used from video tutorialS and modified acordignly to suit this specific project.
Copyright (c) 2019 Lucas Suarez