https://github.com/martinwebdev95/audiophileecommerceastro

E-commerce website based in the Frontend Mentor Challenge design
https://github.com/martinwebdev95/audiophileecommerceastro

astro css-modules frontend frontend-mentor-challenge javascript reactjs vercel-deployment zustand

Last synced: about 1 month ago
JSON representation

E-commerce website based in the Frontend Mentor Challenge design

• Host: GitHub
• URL: https://github.com/martinwebdev95/audiophileecommerceastro
• Owner: MartinWebDev95
• Created: 2024-02-06T09:06:32.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-03-13T12:45:02.000Z (10 months ago)
• Last Synced: 2024-04-23T19:03:40.543Z (8 months ago)
• Topics: astro, css-modules, frontend, frontend-mentor-challenge, javascript, reactjs, vercel-deployment, zustand
• Language: Astro
• Homepage: https://audiophile-ecommerce-astro.vercel.app
• Size: 3.01 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.en.md

Awesome Lists containing this project

README

        
[Button Language]: https://img.shields.io/badge/Leer%20En%20Español-000000?style=for-the-badge

[![Button Language]](https://github.com/MartinWebDev95/AudiophileEcommerceAstro/blob/main/README.md)

# Audiophile E-commerce                                 

---

[Audiophile E-commerce Web]: https://img.shields.io/badge/Audiophile%20Ecommerce%20Web-D87D4A?style=for-the-badge

This project is a challenge from the [Frontend Mentor](https://www.frontendmentor.io/challenges/audiophile-ecommerce-website-C8cuSd_wx) website that provides you with the design of the website. It's about creating an audio device store.

[![Audiophile E-commerce Web]](https://audiophile-ecommerce-astro.vercel.app/)

## 👨🏽‍💻 What technologies have I used?

---

[Button Vercel]: https://img.shields.io/badge/Deploy%20on%20Vercel-000000?style=for-the-badge&logo=vercel

[Button Astro]: https://img.shields.io/badge/Astro-000000?style=for-the-badge&logoColor=BC52EE&logo=astro

[Button React]: https://img.shields.io/badge/React-000000?style=for-the-badge&logo=react

[Button Modules]:https://img.shields.io/badge/CSS%20Modules-000000?style=for-the-badge&logo=css-modules

[Button Zustand]:https://img.shields.io/badge/Zustand-000000?style=for-the-badge&logo=zustand

[![Button Astro]](https://astro.build/)

[![Button React]](https://es.react.dev/)

[![Button Modules]](https://github.com/css-modules/css-modules?tab=readme-ov-file)

[![Button Zustand]](https://zustand-demo.pmnd.rs/)

[![Button Vercel]](https://vercel.com/)

- **Astro:**  I have used Astro as the main framework of the project, creating the vast majority of components. Astro is a framework that does not load JavaScript by default on the client, it's SSR (Server Side Rendering), and that causes the loading of the website to be practically instantaneous.

- **React:** I have used React for all components that are interactive with the user, that is, all those components that trigger an event.

- **CSS Modules:** I have used CSS Modules to style React components.

- **Zustand:** I have used Zustand to manage the global shopping cart state. Zustand is a small, fast and scalable state management solution. Its state management is centralized and action-based.

## 📸 Some Screenshots!

---

![Hero Section Screenshot](https://github.com/MartinWebDev95/AudiophileEcommerceAstro/blob/main/public/assets/screenshots/heroSection.png)

![Category Page Screenshot](https://github.com/MartinWebDev95/AudiophileEcommerceAstro/blob/main/public/assets/screenshots/categoryPage.png)

![Product Page Screenshot](https://github.com/MartinWebDev95/AudiophileEcommerceAstro/blob/main/public/assets/screenshots/productPage.png)

![Cart Screenshot](https://github.com/MartinWebDev95/AudiophileEcommerceAstro/blob/main/public/assets/screenshots/cart.png)

![Checkout Page Screenshot](https://github.com/MartinWebDev95/AudiophileEcommerceAstro/blob/main/public/assets/screenshots/checkoutPage.png)

## 🗃️ Project Structure

---

This is the structure that I have used in this project:

```text

/

├── public/

│   └── assets/          

│       └── folder/

│           └── image.jpg

│

├── src/

│   ├── components/

│   │   └── Component.astro

│   │   └── Component/

│   │       └── index.jsx

│   │       └── Component.module.css

│   ├── hooks/

│   │   └── useHook.js

│   ├── layouts/

│   │   └── Layout.astro

│   ├── lib/

│   │   └── products.json

│   ├── pages/

│   │   └── index.astro

│   │   └── [category]/

│   │       └── [slug].astro

│   ├── scripts/

│   │   └── script.js    

│   ├── store/

│   │   └── store.js    

│   └── utils/

│       └── util.js 

└── package.json

```

## 👀 Where you can find me?

---

[Button Portfolio]: https://img.shields.io/badge/Visit%20my%20Portfolio-000000?style=for-the-badge

[![Button Portfolio]](https://my-portolio-martinwebdev95.vercel.app/)