Overview

We had to create an e-commerce website that had both customer-facing and admin sections. Both sections were to be responsive and the website would be populated by a Strapi API.

Brief

We could can choose the theme of the website. It should follow the site architecture described below. Designed the website and logo using Adobe XD and illustrator.

Built a frontend with home, product list, product detail and cart pages.

Built the admin pages to create, update and delete products.

Process

Home page

The home page included:

• A hero banner with an image that was uploaded to Strapi.
• A list of featured products. When a product is marked as 'featured' on Strapi it was to be displayed on the homepage.

Products page

The products page included:

• A list of all products added to Strapi. Each product displayed its title, price and image. The product linked to its products detail page.
• A search text box. When searching (filtering), only the products that include the searched text in their title or description were listed.

Product details page

This page is reached by a user clicking on a product on the product list page. The product details page must include:

• Title
• Description
• Image
• Price
• An add to cart button. This toggled the product in and out of a cart array stored in local storage.

Cart/Basket page

The cart/basket page displays a list of all products added to the cart. Next load the items that have been added to local storage and display them on the page. If the cart was empty a message was displayed indicating this.

Each product in the cart must display:

• Title
• Price
• A link to the product view page
• Image

After the list of products, the total price of all the products in the cart was to be displayed.

Admin section

The admin section (apart from the log in form) must only be accessible to logged in admin users and the following features were to be included.

Login/logout

Created an admin login form that allowed administrator users to login. Used local storage to keep the user logged in.

When logged in, a logout button must be displayed in the layout that logs the user out. Logging out should not clear the cart.

Add/edit products

Created form(s) that allowed products to be added and edited. The form allowed the user to toggle whether a product is featured or not.

Product images

For adding/editing product images I used:

• A file upload field to upload images to Strapi

Allowed products to be deleted. Before a product is deleted I had to display a confirmation dialog. The product should only be deleted if the user confirms.