Project 5 - Build an e-commerce website with Javascript

Overview

The purpose of this project was to use vanilla Javascript to implement dynamic content from a pre-existing API to a pre-existing frontend and provide a spreadsheet test plan for site functionality.

Instructions

Frontend

- host index.html using live server or similar.

Backend

- navigate to 'Projecy-5/back then "nodemon server" in terminal.

Tech Stack

Javascript (vanilla)

Scenario

You recently started working at a web development agency. During the first few weeks, you successfully developed a few websites using HTML/CSS and now you have been assigned a new task.

Your client is Kanap, a furniture company which sells its products from their physical shop only. The company would now like to add an online store to its physical shop in order to sell its products on the Internet.

For this task you will be working with a team made up of:

• Caroline, the CTO at the agency,
• Frank, the front-end developer who is in charge of coding the static mockup of the site,
• Bilal, the back-end developer who is in charge of programming the API that the front end will be linked to.

Caroline sends you an email to brief you on this task:

From: Caroline
To: You
Subject: The Kanap e-commerce website

Hello!

As we discussed yesterday, here is the information to help you with the development of the Kanap website.

Here are the various tasks you will have to carry out:

• Bring together the work done by the team by integrating the API information into the various web pages using Javascript. The front-end and the API code can be found here on Github.
• Implement a plan for acceptance tests based on the template that we usually use.
  

If you require more information on this you can take a look at the technical and functional specifications for this project. This document contains all the information about the project and highlights the expectations for each of the web pages and outlines the details of the API.

Feel free to come to see me if you have any questions, my door is always open.

Good luck!

Caroline

A little bit later that day Frank sends you an email providing a bit of extra information about what he has been doing:

From: Frank
To: You
Subject: Static mockups of the Kanap website

Hey,

It looks like it is time for you to join the project! I thought I’d best give you a bit of an update on the part I’ve been working on in order to help you with your development.

We’ve set up 4 pages: the homepage, the product page, the cart page and the confirmation page. For all of the pages the static parts are ready and waiting to receive the dynamic content.

You will see that an example dynamic content is systematically provided on each page so you don’t have to worry about setting up the HTML structure or the CSS style, that’s already been done. All you need to do is to code the dynamic elements using JS and the API.

Last of all, I’ve included IDs in various tags in the HTML code, this should help you to develop the dynamic elements. So you shouldn’t have to worry about touching the HTML/CSS code.

Happy coding!

Frank

You’ve now got all the information you need to get started on this project. Good luck!

### Back end Prerequisites ###

You will need to have Node and npm installed locally on your machine.

Back end Installation

Clone this repo. From the "back" folder of the project, run npm install. You can then run the server with node server. The server should run on localhost with default port 3000. If the server runs on another port for any reason, this is printed to the console when the server starts, e.g. Listening on port 3001.