https://github.com/maricastroc/audiophile-ecommerce

A multi-page e-commerce website built with Next.js, using a local data.json file for its products.
https://github.com/maricastroc/audiophile-ecommerce

nextjs reactjs stitches typescript

Last synced: 7 months ago
JSON representation

A multi-page e-commerce website built with Next.js, using a local data.json file for its products.

• Host: GitHub
• URL: https://github.com/maricastroc/audiophile-ecommerce
• Owner: maricastroc
• Created: 2023-08-20T15:10:20.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-24T12:59:26.000Z (12 months ago)
• Last Synced: 2025-02-07T05:15:35.901Z (9 months ago)
• Topics: nextjs, reactjs, stitches, typescript
• Language: TypeScript
• Homepage: https://maricastroc-audiophile-ecommerce.vercel.app
• Size: 2.63 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Audiophile E-Commerce Website

![audiophile](https://github.com/user-attachments/assets/01633787-ec39-4de5-b051-1ce216833a3c)

## 📚 Project Description

This is a solution to the challenge [audiophile e-commerce](https://www.frontendmentor.io/challenges/audiophile-ecommerce-website-C8cuSd_wx).

![challenge-difficulty-guru](https://img.shields.io/badge/Difficulty-GURU-f1b604?style=for-the-badge&logo=frontendmentor)

The project consists of a multi-page e-commerce website built with Next.js, using a local data.json file for its products.

Users are able to:

- Add/Remove products from the cart

- Edit product quantities in the cart

- Fill in all fields in the checkout

- Receive form validations 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

- View the optimal layout for the app depending on their device's screen size

- See hover states for all interactive elements on the page

## 📌 What did I learn?

This was an excellent opportunity to develop componentization and the use of Next.js's routing system, with the goal of enabling better management of the many pages that make up the application, as well as passing parameters between routes.

## 🔍 Links

[Preview Site](https://maricastroc-audiophile-ecommerce.vercel.app/)

## 💻 My Process

### Built with:

- [Next.Js](https://nextjs.org/)

- [React.Js](https://reactjs.org/)

- [Typescript](https://www.typescriptlang.org/)

- [Stitches](https://stitches.dev/)

- [font-awesome](https://fontawesome.com/)

- [ESLint](https://eslint.org/)

- [Prettier](https://prettier.io/)

## ℹ️ How to run the application?

> Clone the repository:

```bash

git clone https://github.com/maricastroc/audiophile-ecommerce

```

> Install the dependencies:

```bash

npm install

```

> Rename the .env.example file to .env and add the necessary information to it.

> Start the service:

```bash

npm run dev

```

> ⏩ Access [http://localhost:3000](http://localhost:3000) to view the web application.