Welcome to the Shopping App! This application allows users to browse a variety of products and add them to their shopping cart. It was originally built using the React framework and has been migrated to the Lit framework with PatternFly elements to provide an efficient and user-friendly shopping experience. I have created a separate branch for React and lit framework.
- main branch -> React app (https://reacttolit.vercel.app)
- webcomponentsmigration branch -> Lit framework app (https://webcomponentlitmigration.vercel.app/)
- Products List: Browse through a diverse selection of products.
- Product Detail: See product detail.
- Add to Cart: Easily add products to your shopping cart.
- Cart Management: View and manage the items in your shopping cart.
This app was initially developed using the React framework. However, in order to improve performance and streamline the codebase, we have migrated it to the Lit framework with PatternFly elements. This migration offers several advantages, including enhanced performance, smaller bundle sizes, and improved maintainability.
In this project, we have used several libraries and tools for the migration from React to Lit Framework:
- Lit Framework: A lightweight web component framework.
- @lit-labs/react: React integration for Web Components and Reactive Controllers.
- @lit-labs/router: A router for Lit.
- @patternfly/elements: A set of community-created web components based on PatternFly design.
- Patternfly Design Pattern: Patternfly Design Pattern.
Each of these libraries plays a crucial role in our migration strategy. Here's how we use them:
- Lit Framework: We use Lit as the core framework for building efficient web components.
- @lit-labs/react: This library allows us to migrate React components to Lit gradually.
- @lit-labs/router: For handling routing and navigation within our Lit application.
- @@patternfly/elements: Web components based on Patternfly design pattern.
Feel free to explore their documentation to learn more about how we've integrated them into our project.