The aim of this project was to build a Full-Stack site based on business logic used to control a centrally-owned dataset. This includes setting up an authentication mechanism and providing the ability to make purchases.

Brainworks sells brain teaser puzzles and books games to the general public. They cater for all age groups and have a wide variety to choose from.

The live site can be found here. (Note: Right click on link to open a new tab).

1. UX
   • Website owner goals
   • User stories
   • Wireframes
   • Design
   • Marketing
2. Features
3. Database Schema
4. Technologies Used
5. Testing
   • Functionality testing
   • Code Validation
   • Compatibility testing
   • Performance testing
   • User stories testing
   • Bugs
6. Deployment
7. Credits
8. Acknowledgments

Website owner goals were tracked using github projects kanban board.

• I would like to be able to add a product to the store.
• I would like to be able to delete a product from the store.
• I would like to be able to edit a product.

User story goals were tracked using github projects kanban board.

• I would like to be able to view a list of products.
• I would like to view information about individual products.
• I would like to be able to register for an account.
• I would like email confirmation after registering for an account.
• I would like to be able to get in contact with the website owner.

• I would like to be able to login or logout.
• I would like to be able to recover my lost password.
• I would like to have a personalised profile to view order history and amend my details.
• I would like to be able to sort or filter products.
• I would like to be able to search for a product.
• I would like to be able to select and adjust a quantity of an item to purchase.
• I would like to view the items in my shopping cart.
• I would like to view the order confirmation after checking out.
• I would like to receive an email confirmation after placing an order.

Back to Table of Contents

I used Balsamiq to create the wireframes. The brainteaser section was left out of the final website due to time constraints. There are some minor changes made to the layout during the development process.

• Home page

• Contact

• Products

• Product detail

• Brainteasers:

• Sign In

• Register

• Profile

• Cart

• Checkout

• Home page

• Contact

• Products

• Product detail

• Brainteasers:

• Sign In

• Register

• Profile

• Cart

• Checkout

Back to Table of Contents

Sedgwick+Ave is used for the logo, with Roboto as the main font for all other text. Sans-Serif is used as the backup font.

• Keywords have been included in the meta keywords in the base.html.

• Links to other websites have been included on the Home page.

• Sign up forms have been created which appear as a pop up when the user first loads the website. There is also a link to sign up when sending filling in the contact request form.

• Facebook and Twitter pages were created.

  Facebook page

  Twitter page

Back to Table of Contents

The navigation bar has links to the shop, account and shopping cart. If clicked, the logo takes the user back to the home page.

The user can get to the products section by clicking on the shop icon on the nav bar, they can either select to view all products or select a category.

If users click on an item they can view further details and select to add the item to the shopping cart.

The user can contact the website via a link provided in the footer which is accessible on every page. It opens in a separate web page. The user also has an option to sign up to the newsletter. When the user first lands on the page there will be a pop up which asks if they would like to sign up to the newsletter. They can close the pop up and continue viewing the site.

If the user is logged in they are able to view and update their profile information as well as view their order history.

In the shopping cart the user can view, update or delete items. If they have finished selecting items to purchase they can go to the secure checkout section.

When the user clicks to checkout they can complete their delivery information and select to save it to their profile if logged in.

If the user encounters a 404 error they will see a custom page and a link to redirect to the home page.

The website has a privacy policy which is accessible from the footer on every page. When clicked it opens in a new tab.

• A brainteaser page with fun riddles as well as the option to view the answers to the riddles.

Back to Table of Contents

My database schema was initially built in excel and then built using the online tool dbdiagram.io. The schema is as follows:

• Django's user and admin model was utilised, with some modifications for the user profile display and update.

• CSS, HTML, Javascript, Python and Django.

• Postgres.

• Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

• GitHub was used to store the projects code after being pushed from Git.

• Bootstrap was used to for design and to make the website responsive.

• Balsamiq was used to create the wireframes during the design process.

• Google Fonts was used to import fonts.

• Font Awesome was used to add icons for design and UX purposes.

• Stripe was used for payment and authentication.

• AWS was used to store static and media files.

• MailChimp was used for the contact us form and to subscribe to the newsletter.

Back to Table of Contents

• I used Google Chrome developer tools throughout the development process for testing and solving problems with style and display issues.
• I used Github Project and Issues to track tasks. After each task completion, I would fully test it before moving on to the next task.
• All links were tested multiple times during the development process and again once the project was completed to ensure that all pages were linked correctly.
• All Forms and form elements were tested to ensure that they work as they should, with user feedback on errors as well as user feedback on successful submission.
• Tested every functionality like Stripe, add/edit/delete products, contact, check out, and confirmation email with no errors found.

Manual Unit testing summary is as follows (this is not an exhaustive list of all the tests performed during development but a simple summary of the basic tests):

1. CSS Validation using W3C CSS Validator Services.

2. PEP8 was used to test the Python code

3. Beautify Tools was used to test the Javascript snippets.

Back to Table of Contents

• The website was tested on Google Chrome, and Samsung cellphones.
• The website was viewed on a variety of device sizes such as Desktop, Samsung S10, Samsung tablet and Iphone 11, I also used the responsive function when inspecting the pages to view various sizes.

I ran the Lighthouse tool to check performance of the website. The performance on the products page is as expected for a page with a lot of images to display. Screenshots of the final test are presented below:

• Desktop

  • Home page
  
  • Products
  

• Mobile

  • Home page
  
  • Products
  

Back to Table of Contents

1. I would like to be able to view the products.
   • Users can view the products by clicking on the shop icon and selecting from the dropdown.
2. I would like to view information about individual products.
   • Users can view information about an individual product by clicking on the product from the products page.
3. I would like to be able to register for an account.
   • Users can register by clicking on the My Account icon in the nav bar.
4. I would like email confirmation after registering for an account.
   • Users will receive an email confirming and asking them to verify their email address.
5. I would like to be able to get in contact with the website owner.
   • Users can get in contact view the Contact us link in the footer on each page, there is also another link on the home page.

1. I would like to be able to login or logout.
   • Users can login or logout from the Account icon in the nav bar.
2. I would like to be able to recover my lost password.
   • Users can recover their lost password from a link on the sign in page.
3. I would like to have a personalised profile to view order history and amend my details.
   • Users can view their order history or amend details on the Profile page accesible from the Account dropdown.
4. I would like to be able to sort or filter products.
   • Users can sort or filter products on the product page.
5. I would like to be able to search for a product.
   • Users can search for a product using the search bar at the top of each page in the navigation.
6. would like to be able to select and adjust a quantity of an item to purchase.
   • Users can adjust the quantity from the Shopping cart page.
7. I would like to view the items in my shopping cart.
   • Users can view items in the shopping cart by clicking on the cart icon in the nav bar.
8. I would like to view the order confirmation after checking out.
   • Users can view the order confirmation after checking out, if they are logged in then they can also view their order history from their profile page.
9. I would like to receive an email confirmation after placing an order.
   • Users will receive an email confirmation after placing an order.

1. I would like to be able to add a product to the store.
   • The website owner can add a product via the store management link under My Account, it is only available to a super user.
2. I would like to be able to delete a product from the store.
   • If the website owner is logged in they will find a link under each product in order to delete that product.
3. I would like to be able to edit a product.
   • If the website owner is logged in they will find a link under each product in order to edit that product.

Back to Table of Contents

The project was deployed to GitHub Pages using the following steps, I used Gitpod as a development environment where I commited all changes to git version control system. I used the push command in Gitpod to save changes into GitHub.

Before creating a Heroku app make sure your project has these two files:

• requirements.txt - You can create one by using pip3 freeze > requirements.txt
• Procfile - You can create one by using echo web: python run.py > Procfile

1. Navigate to Heroku's site here. (Note: Right click on link to open a new tab).
2. Register and/or Login as applicable.
3. Click on the new button in the top right and select "Create new app".
4. Enter the app name and region closest to you.
5. Click the create app button.

1. Click on the settings tab and then click "Reveal config vars".

2. Config variables added throughout project: (add image of variables)

1. Temporarily add the DATABASE_URL to settings.py:

   DATABASES = { 'default': dj_database_url.parse('your_postgres_database_url') }

2. Migrate the data from development to production version.

   • To migrate the database models in the project to the Postgres database you can use the following command:

   python3 manage.py migrate

3. You will then need a superuser for the Postgres database too. To create one you can use the following command:

   python3 manage.py createsuperuser

4. Remove the Postgres database URL from settings.py as this should not in any case be deployed to GitHub for security reasons.

5. To connect your Heroku app to be deployed from a Github repository, you can follow these steps:

   • Open the heroku app page on the deploy tab and select GitHub - Connect to GitHub.
   • Sign into GitHub if not already.
   • A prompt to find a Github repository to connect to will then be displayed.
   • Enter the repository name for the project and click search.
   • Once the repository has been found, click the connect button.

6. Once you have your GitHub repository connected, without leaving deploy tab:

   • Under Automatic deploys section, choose the branch you want to deploy from and then click the "Enable Automatic Deploys" button.
   • To deploy your app to Heroku click the "Deploy Branch" button.

All Static and media files for the deployed version of the site are hosted in a Amazon Web Services(AWS) S3 bucket. In order to create your own bucket, please follow the instructions on the AWS website.

1. In the gitpod terminal, install boto3 and django-storages using the following commands: pip3 install boto3 and pip3 install django-storages,
2. Freeze the new requirements into the 'requirements.txt' file using the pip3 freeze > requirements.txt command.
3. Add 'storages' to INSTALLED_APPS in settings.py.
4. Add code to settings.py in order to link the AWS bucket to the website.
5. Create a custom_storages.py file in the root level of the project. Inside it, include the locations of the Static Storage and Media Storage.
6. Delete DISABLE_COLLECTSTATIC from the Heroku Config Variables.
7. Finally, push to GitHub, and all changes should be automatically pushed to Heroku too.

Back to Table of Contents

• I followed the course content modules for Boutique Ado while writing the code for the cart functionality, Stripe and Webhooks.

• All product information and images was sourced from:
  • Amazon
  • E-Bay
  • Walmart
  • Etsy

The hero image on the home pages was sourced from:

• Pixabay

• My mentor for support, advice and feedback.
• The students on Slack for peer review and comments.
• Code Institute Tutor support for help with coding issues.
• My family and friends for their support, feedback and testing.

Back to Table of Contents