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.
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
- Live Preview URL: Alameda Ecommerce
- Repository URL: Repository
- TypeScript JS Superset
- React - JS library
- Styled Components - For styles
- ReduxJs - For state management
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>
)
}
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
- Website - Lenin Mazabanda
- Twitter - @_leninner
- You cannot use a
form
element inside of an anotherform
element. Read more about this issue - The
trigger
function is useful to manually triggers form or input validation. Trigger