Next.js Strapi Ecommerce Store
Next.js Strapi Ecommerce Store
Overview
The Next.js Strapi E-Commerce Store is a web application built using Next.js 11.1.4 and Strapi 4.3.4. It is deployed on Vercel for the frontend and Heroku for the HCMS (Headless CMS) using PostgreSQL. The project utilizes Cloudinary for image storage.
Please note that the Strapi backend deployed on Heroku may experience issues due to Heroku's decision to shut down free plans starting from 28.11.22. However, all code examples in the repository are still valid for studying and learning purposes.
Features
- Guest shopping cart
- Guest checkout
- No authentication (authentication buttons are for display only)
- Checkout form data is saved between page reloads
- Product search
- Slider with magnifying glass
- Currency change (3 options available)
- Discounts
- Product reviews
- Google Analytics integration
- Simple cookie banner
- Pagination
- Available item amount checks (e.g. "out-of-stock" and "less than selected")
- PayPal checkout button (fake payments)
- Email with order information sent after fake transaction
Summary
The Next.js Strapi E-Commerce Store is a feature-rich web application that allows users to browse and purchase products without the need for authentication. It provides a seamless shopping experience with guest shopping cart, guest checkout, and saved form data. The integration of Google Analytics and PayPal checkout button enhances the functionality of the store. However, users need to be cautious about the potential issues with the Strapi backend deployed on Heroku. Overall, this project serves as a valuable resource for learning Next.js and Strapi in the context of e-commerce development.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- 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.
- Strapi
Strapi is an open source headless CMS that provides a customizable content management system and API for your projects. It allows you to manage content in a visual interface and use a REST or GraphQL API to retrieve the data.
- Ecommerce
Ecommerce websites sell products or services to customers through an online storefront. These websites typically include features such as product listings, shopping carts, payment processing, and order management tools.
- 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.
- Google Analytics
A website that uses Google Analytics to track website performance and user behavior. This includes features such as website traffic monitoring, conversion tracking, and audience segmentation to gain insights and optimize website performance.
- 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.
- Yup
Yup is a schema builder for runtime value parsing and validation. It provides a declarative way to define validation schemas with support for complex nested objects, array validation, and custom validation rules. Often used with Formik for form validation.