E Shop
E-Commerce project made with gatsby for self learning.
Overview
The E-Commerce ProjectLive is a self-learning project made with React. It utilizes the Atomic Design component architecture and the Dato CMS platform for managing product data.
Features
- Browsing Products: The project allows users to browse products fetched from Dato CMS.
- Add/Remove from Cart: Users can add or remove products from their cart.
- Filtering and Sorting: Products can be filtered and sorted by names, sizes, and prices.
- Change Quantity: Users can change the quantity of products with the same ID and size.
- View Full Product Details: Users have the ability to view the full details of each product.
- Responsive Web Design: The project is designed to be responsive and optimized for different screen sizes.
Summary
The E-Commerce ProjectLive is a self-learning project built with React. It incorporates various features such as browsing products, adding/removing products from the cart, filtering and sorting products, changing quantities, and viewing full product details. The project also utilizes responsive web design principles for optimal viewing on different devices.
- Gatsby
GatsbyJS is a free and open-source static site generator based on React. It uses a modern development stack including Webpack, GraphQL, and modern JavaScript and CSS frameworks. It also provides a rich set of plugins, starters, and themes.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Styled Components
Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.
- Datocms
A website that uses DatoCMS as a headless CMS to manage content. This includes features such as a customizable content model, real-time collaboration, and API-based content delivery to support a wide range of digital experiences.
- Formik
Formik is a popular form library for React that helps with form state management, validation, and submission handling. It provides a declarative approach to building forms with support for complex validation scenarios and easy integration with validation libraries like Yup.
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.