https://github.com/adrianoescarabote/audiophile-e-commerce-website

This project consisted of creating a multi-page e-commerce website from scratch, for styling the project I used Figma files.
https://github.com/adrianoescarabote/audiophile-e-commerce-website

axios ecommerce-website nextjs redux styled-components typescript

Last synced: 3 days ago
JSON representation

This project consisted of creating a multi-page e-commerce website from scratch, for styling the project I used Figma files.

• Host: GitHub
• URL: https://github.com/adrianoescarabote/audiophile-e-commerce-website
• Owner: AdrianoEscarabote
• License: mit
• Created: 2023-02-27T15:40:41.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-01T15:43:42.000Z (4 months ago)
• Last Synced: 2024-11-20T18:43:43.066Z (2 months ago)
• Topics: axios, ecommerce-website, nextjs, redux, styled-components, typescript
• Language: TypeScript
• Homepage: https://audiophile-e-commerce-website-adrianoescarabote.vercel.app/
• Size: 4.12 MB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
- Deploy [click here](https://audiophile-e-commerce-website-adrianoescarabote.vercel.app/)

# Frontend Mentor - Audiophile e-commerce website solution

This is a solution to the [Audiophile e-commerce website challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/audiophile-ecommerce-website-C8cuSd_wx). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

- [My process](#my-process)

  - [Screenshot](#screenshot)

  - [Built with](#built-with)

  - [Continued development](#continued-development)

- [Author](#author)

## Overview

### The challenge

Users should be able to:

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

- See hover states for all interactive elements on the page

- 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

- **Bonus**: Keep track of what's in the cart, even after refreshing the browser 

### Screenshot

![](./screenshot/desktop-main.jpeg)

## My process

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

- Axios

- React Loading Skeleton

- Redux

- Typescript

- [Next.js](https://nextjs.org/) - React framework

- [Styled Components](https://styled-components.com/) - For styles

### Continued development

This is without a doubt my biggest and best project so far. I am very pleased with the result and believe that I did a good job. During development, I faced many challenges in using technologies with which I didn't have much experience, but it was very rewarding to overcome them.

I am still learning to use all the features of Next.js and I am excited to explore them. One technology that I am particularly passionate about is Redux, which was crucial for the shopping cart functionality in the project. Although I know that Redux Toolkit is simpler, I decided to first learn pure Redux and do not regret that choice.

## Author

- Linkedin - [AdrianoEscarabote](https://www.linkedin.com/in/adriano-escarabote-944b02233/)

- Frontend Mentor - [@AdrianoEscarabote](https://www.frontendmentor.io/profile/AdrianoEscarabote)

- Instagram - [@ogdrian](https://www.instagram.com/ogdrian/)

- Twitter - [@drianEscarabote](https://twitter.com/drianEscarabote)