Adastros/audiophile - Githubissues

audiophile

A static E-Commerce website selling high quality audio products.
View Demo · Report Bug · Request Feature

Table of Contents

About The Project
- Built With
- System Diagrams
Getting Started
- Prerequisites
- Installation
Contact

About The Project

Audiophile is a multi-page e-commerce website designed to sell high quality audio products. This website is hosted on Fly.io and was built using Figma design files, images, and pre-written text content provided by Frontend Mentor.

Functionally, users on the website are able to:

View the optimal layout for the website depending on their device's screen size
Add/Remove products from the cart
Edit product quantities in the cart
Keep track of what's in the cart, even after refreshing the browser
Fill in all fields in the checkout
Receive notifications if fields are missed or incorrect during checkout
See correct checkout totals depending on the products in the cart
- Shipping always adds $50 to the order
- VAT is calculated as 20% of the product total, excluding shipping
See an order confirmation modal after checking out with an order summary
Receive an order confirmation email

(back to top)

Built with

Frontend

Backend

(back to top)

System Diagrams

Below are flow and sequence diagrams of the website system. The diagrams were generated using Mermaid and can also be found in the diagrams folder.

Flow Diagram

General System Flow Diagram

Sequence Diagrams

On Page Load Sequence Diagram

```mermaid sequenceDiagram participant c as User Client participant b as Fly.io Server (Backend) participant cl as Cloudinary (Image Hosting) participant d as MongoDB (Database) c->>b: GET https://audiophile.fan b-->>c: Send HTML, CSS, Javascript files c->>b: GET webpage data (JSON data) b-->>c: Send webpage data (JSON data) c->>cl: GET images and icons cl-->>c: Send images and icons c->>b: POST send cart ID alt cart ID falsey b->>d: Create new cart document d-->>b: Send newly created cart document's ID b-->>c: Send new cart ID else cart ID truthy b->>d: GET cart info d-->>b: Send cart info b-->>c: Send cart info end ```

Email Sequence Diagram

```mermaid sequenceDiagram participant c as User Client participant b as Fly.io Server (Backend) participant d as MongoDB (Database) participant r as Resend (Email Platform) c->>b: POST valid, completed checkout form data b->>b: Validate and sanitize form data par b->>d: POST - Mark purchaseComplete field in cart document as true d->>d: Update purchaseComplete field in cart document as true and c->>b: GET - new cart ID b->>d: Create new cart document d-->>b: Send newly created cart document's ID b-->>c: Send new cart ID and b->>d: POST - Send checkout form data d->>d: Create new purchaseOrder document with received data d-->>b: Fufill promise and send new purchaseOrder document b->>r: Render and send purchase order email template par b-->>c: Send response 200 status and r-->>c: Send purchase order email end end ```

Adding Items to Cart Sequence Diagram

```mermaid sequenceDiagram participant c as User Client participant b as Fly.io Server (Backend) participant d as MongoDB (Database) c->>b: POST - item, quantity, and cart ID c->>c: Update redux store with new item and/or quantity b->>d: Send item, quantity, and cart ID d->>d: Update cart document with received information b-->>c: Send response 200 status ```

(back to top)

Getting Started

To get a local copy of the website up and running follow the steps below.

Prerequisites

Check to see if you have Node.js and npm installed.

node -v
npm -v

If Node.js and/or npm isn't installed, run the following commands in your terminal. The first command will install NVM (Node Version Manager), which is used to manage multiple active Node.js versions. The second command installs the latest version of Node.js and npm.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
nvm install --lts

Run the following commands to verify that Node.js and npm were installed.

node -v
npm -v

If curl isn't on your system, run the following commands to install it.

sudo apt update
sudo apt upgrade
sudo apt install curl

You'll need the following services to run your own version of the website.
Note: The service providers listed below were used to create this website and are not required to run your own version of the website.

Images and icons from Frontend Mentor
A place to host your images such as Cloudinary.
A database such as Mongodb.
A way to send emails such as Resend.

Installation

Set up and acquire API keys from your chosen service providers.

Clone the repo.

git clone https://github.com/Adastros/audiophile.git

Move to either the "backend" or "frontend" directory.
Install NPM packages for the directory you are in by typing the following command.
```
npm install
```
Move to the other directory in your terminal and repeat step 4 to install the required dependencies.
Create a .env file in the "backend" directory.

Create the variables listed below and add your API key/ secrets to the .env file. If you are using different service providers than what I used for this project, rename, add, or replace the .env variables as needed. Make sure to update the code base to use your .env variables.

LOCAL_PORT = '3003'
CLOUDINARY_URL = 'YOUR CLOUDINARY URL'
REACT_APP_CLOUDINARY_BASE_URL = 'YOUR CLOUDINARY IMAGE BASE URL'
MONGODB_URI = 'YOUR MONGODB API URI'
REACT_APP_RESEND_API = "YOUR RESEND API KEY"
REACT_APP_FROM_EMAIL = "'FROM' FIELD EMAIL ADDRESS (ex: email@example.com)"

Transpile the react email template code from the "emails" directory into the "htmlEmail" directory by running one of the following commands. In the first command, babel:build-email is a custom, shortened version of the second command. The script can be found in the package.json and renamed if desired.
```
npm run babel:build-email
```
```
babel ./emails -d ./htmlEmail
```
Create a production build of the website by running the following command in the "frontend" directory.
```
npm run build
```
Copy and paste the "build" folder from the "frontend" directory to the "backend" directory.
Run the following command while in the "backend" directory on your terminal to start the server and run the website.
```
 npm start
```
Visit http://localhost:3003/ in your browser to see the website.

(back to top)

What I learned

The following are the major takeaways from working on this project:

Website Deployment and System Design

How to architect, design, and deploy a website to the internet using a custom domain

Figma Interpretation and Design

How to interpret Figma wire frame designs
How to create custom wire frame designs in Figma

Email Handling

How to create email templates and send emails using a third party email vendor

Testing

How to perform integration tests with Cypress and backend/ server side tests with Postman

Backend Setup and Server Configuration

How to configure and set up a backend server
How to use and configure a noSQL/ document database (MongoDB)

Website Routing

How website routing is handled on the client and server side

(back to top)

Contact

(back to top)