Online Shop Strapi
Online shop built with React 18 and Strapi.
Overview
The Online Shop is a web application built with React.js and Strapi that allows users to browse and purchase products. It includes a catalog, categories, single product pages, a functional cart, and a search modal. The database is hosted on Render.com, and the layout is fully responsive and adaptable for all screen sizes. The application also integrates with Stripe for secure and seamless checkout.
Features
- Catalog: Users can browse through a wide range of products.
- Categories: Products are organized into categories for easy navigation.
- Single Product Pages: Each product has its own page with detailed information.
- Functional Cart: Users can add products to their cart and view and modify its contents.
- Search Modal: A search bar is available for users to quickly find products.
- Responsive Layout: The application is designed to work well on all screen sizes.
- Global State Management: The useContext hook is used to manage the state globally.
- Stripe Integration: Stripe is integrated for secure and seamless checkout.
Summary
The Online Shop is a feature-rich web application built with React.js and Strapi. It provides users with a seamless shopping experience, allowing them to browse and purchase products, manage their cart, and securely checkout using Stripe integration. The application's responsive layout and global state management make it adaptable for all screen sizes and enable efficient data handling. Overall, the Online Shop is a well-designed and functional e-commerce solution.
- 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
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.