Alameda Ecommerce - Clon of [Alameda](https://alameda-demo-es.squarespace.com/?nochrome=true)

This is a solution to help me improve my coding skills by building challenging projects. In this case, an ecommerce clone of Alameda, inspired by SquareSpace.

Table of contents

• Table of contents
• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Notes and Warnings

Overview

The challenge

Users should be able to:

• View the products in the store in a grid view
• See hover states for all interactive elements on the page
• Add products to the cart
• Update the quantity of products in the cart
• Delete products from the cart
• Select the correct size for the product

Screenshot

Links

• Live Preview URL: Alameda Ecommerce
• Repository URL: Repository

My process

Built with

• TypeScript JS Superset
• React - JS library
• Styled Components - For styles
• ReduxJs - For state management

What I learned

I learned how to use TypeScript to write performant, maintainable and powerful JS c ode. Using TypeScript I was able to write code that was more readable, more testable and more efficient.

Using interfaces, types and more.

Also, I learned good practices for writing code in React like compounding components, using hooks and using the React Router to create a single page application.

This is a example of an interface in TypeScript:

interface ProductInterface {
  id: string
  name: string
  description: string
  price: number
  image: string
  sizes: string[]
}

This is an example to compound components:

const FirstComponent = ({ WrapperComponent, children }) => {
  return (
    <div>
      <h1>First Component</h1>
    </div>
  )
}

const SecondComponent = () => {
  return (
    <FirstComponent>
      <h2>Second Component</h2>
    </FirstComponent>
  )
}

Continued development

Some features of React that I would like to use in the future:

• Compound components
• Use more custom hooks
• Use more typescript
• Learn about Next.js or Node.js

Author

• Website - Lenin Mazabanda
• Twitter - @_leninner

Notes and Warnings

• You cannot use a form element inside of an another form element. Read more about this issue
• The trigger function is useful to manually triggers form or input validation. Trigger