E-Commerce Sportswear

Table of contents

• Preview
  • Links
• How to use
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Preview

Links

• API: API
• Repository URL: Repository
• Live Site URL: Live

How to use

1. Install dependencies

$ npm install

2. Use / build your own API

Make sure your API has this structure

• API Docs URL: https://github.com/fabioalcocer/api-e-commerce-x

{
  "id": 1,
  "name": "Hoodie Anime",
  "sizes": ["S","M","L","XL"],
  "category": "Sudaderas",
  "price": 180,
  "quantity": 1,
  "imageSrc": "https://res.cloudinary.com/image/hoddie_anime.webp"
}

3. Change the API URL

• Path File: './src/services/data.js'

const API_URL = "https://my-api-url.com";

4. Replace "number" for your phone number

<a
  href={`https://wa.me/<number>?text=${encodeURIComponent(string)}`}
>
  Whatsapp
</a>

My process

Built with

• Mobile-first workflow
• Responsive Design
• Grid Layout
• Tailwind CSS
• Flowbite
• Vite
• React v18
• Context API
• HeadlessUI

Useful resources

• Beta React Docs
• HeadlessUI
• Gh-Pages
• MDN Web Docs
• Flowbite
• React Icons

Author

Fabio Alcocer Sejas

• GitHub - @fabioalcocer