A static E-Commerce website selling high quality audio products.
View Demo
·
Report Bug
·
Request Feature
Table of Contents
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
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.
General System Flow Diagram
flowchart LR
A[User Client] <-->|Webpage data| B["Fly.io Server (Backend)"]
A <--> |Images and icons| E["Cloundinary (Image Hosting)"]
B <--> |Purchase order and cart data|C[("MongoDB (Database)")]
B --> |Purchase order email header and body data| D["Resend (Email Platform)"]
D --> |Purchase order email| A
On Page Load Sequence Diagram
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
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
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
To get a local copy of the website up and running follow the steps below.
Check to see if you have Node.js and npm installed.
node -v
npm -vIf 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 --ltsRun the following commands to verify that Node.js and npm were installed.
node -v
npm -vIf curl isn't on your system, run the following commands to install it.
sudo apt update
sudo apt upgrade
sudo apt install curlYou'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.
-
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 protected])"
-
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.
The following are the major takeaways from working on this project:
- How to architect, design, and deploy a website to the internet using a custom domain
- How to interpret Figma wire frame designs
- How to create custom wire frame designs in Figma
- How to create email templates and send emails using a third party email vendor
- How to perform integration tests with Cypress and backend/ server side tests with Postman
- How to configure and set up a backend server
- How to use and configure a noSQL/ document database (MongoDB)
- How website routing is handled on the client and server side
