Build & Deploy Full Stack Next.Js Online Grocery React App Store | React, Strapi, Tailwindcss

Key Concepts

• Next.js: A React framework for building web applications with features like routing and server-side rendering.
• Tailwind CSS: A utility-first CSS framework for styling web applications.
• Shadcn UI: A collection of pre-built, customizable UI components for React, based on Tailwind CSS.
• Strappy CMS: An open-source, headless CMS used to manage content and generate REST APIs.
• Exos: An HTTP client used to make API requests.
• JWT (JSON Web Token): A standard for securely transmitting information between parties as a JSON object.
• Context API (React): A way to share data between components without having to pass props manually at every level.
• Paypal Payment Gateway: A service that allows businesses to accept payments online.

Online Grocery Store Application Development with Next.js, React, Tailwind CSS, and Strappy CMS

1. Introduction and Application Overview

• The video demonstrates building an online grocery store application from scratch using Next.js and React.
• The application features a header with categories, a search bar, a cart option, and a login button.
• A slider showcases products, followed by category sections and popular products.
• Users can add items to the cart, with quantity adjustments and price calculations.
• The application requires user login before adding items to the cart.
• Strappy CMS is used as the backend to manage data, including categories, products, and orders.
• The UI is built with Tailwind CSS and Shadcn UI for a clean and responsive design.
• The application integrates the PayPal payment gateway.
• Users can view their order history and details.
• The application is fully responsive and mobile-friendly.

2. Technology Stack

• Next.js: Used for routing, server-side rendering, and overall application structure.
  • Command to create a Next.js app: npx create-next-app@latest
• React: Used for building the user interface and handling component logic.
• Tailwind CSS: Used for styling the application with utility classes.
• Shadcn UI: Used for pre-built UI components like buttons, dropdowns, and dialogs.
  • Command to initialize Shadcn UI: npx shadcn-ui@latest init
• Strappy CMS: Used as the backend to manage content and generate REST APIs.
  • Command to create a Strappy app: npx create-strappy-app@latest <project-name>
• Exos: Used as an HTTP client to make API requests to Strappy.
  • Command to install Exos: npm install exos
• Lucid React: Used as an icon library.
• Moment.js: Used for formatting dates.
  • Command to install Moment.js: npm install moment

3. Setting Up the Development Environment

• Creating a Next.js application using npx create-next-app@latest.
• Choosing JavaScript, disabling ESLint, enabling Tailwind CSS, disabling the src directory, enabling the app router, and disabling alias customization.
• Installing Shadcn UI using npx shadcn-ui@latest init.
• Selecting the default style, neutral base color, and using CSS variables for colors.
• Installing the button component from Shadcn UI using npx shadcn-ui@latest add button.
• Configuring Tailwind CSS in tailwind.config.js to customize the primary color.
• Changing the default font using Google Fonts and updating layout.js.
• Installing VS Code extensions: ES7 React Redux Snippets and Tailwind CSS Intellisense.

4. Building the Header Component

• Creating a Header component in the _components folder.
• Adding the application logo using the next/image component.
• Implementing a category dropdown using Shadcn UI's DropdownMenu component.
• Adding a search bar with an input field and a search icon.
• Implementing responsive design to hide the search bar on smaller screens.
• Adding login and cart buttons to the header.
• Using Lucid React for icons.

5. Setting Up Strappy CMS as the Backend

• Creating a Strappy application using npx create-strappy-app@latest <project-name>.
• Choosing a custom installation and selecting PostgreSQL as the database.
• Setting up a PostgreSQL database using Render.com.
• Configuring the database connection in Strappy's database.js file.
• Creating a Category collection type with fields for name, icon (media), and color.
• Adding data to the Category collection through the Strappy admin panel.
• Configuring public permissions in Strappy to allow access to the Category API.
• Using the populate parameter in the API request to include the icon data.
  • Example: /api/categories?populate=*
• Connecting Strappy to Cloudinary for media storage.

6. Fetching Data from Strappy CMS

• Installing Exos using npm install exos.
• Creating an Exos client in utils/Global api.js with the base URL of the Strappy API.
• Defining an API endpoint to fetch categories using exosClient.get('/categories').
• Using the useEffect hook in the Header component to fetch the category data when the component mounts.
• Storing the category data in a state variable using useState.
• Mapping the category data to display the categories in the dropdown menu.
• Handling the "React Strict Mode" configuration in next.config.js to prevent double API calls.

7. Implementing the Slider Component

• Creating a Slider collection type in Strappy with fields for name, image (media), and enumeration (home/banner).
• Adding slider images and data to the Slider collection.
• Defining an API endpoint to fetch sliders using exosClient.get('/sliders?populate=*').
• Creating a Slider component to display the slider images.
• Using Shadcn UI's Carousel component to create the slider.
• Fetching the slider data using server-side rendering in page.js.
• Passing the slider data to the Slider component as a prop.
• Configuring the images property in next.config.js to allow image domains.
• Using the unoptimized property in the Image component for local images.

8. Implementing the Category List Component

• Creating a CategoryList component to display the categories in a grid format.
• Fetching the category data using server-side rendering in page.js.
• Passing the category data to the CategoryList component as a prop.
• Using Tailwind CSS to create a responsive grid layout for the categories.
• Adding hover effects and animations to the category items.

9. Implementing the Popular Products Section

• Creating a Products collection type in Strappy with fields for name, description, MRP, selling price, item quantity type, slug, images (media), and category (relation).
• Adding product data to the Products collection, connecting each product to a category.
• Defining an API endpoint to fetch all products using exosClient.get('/products?populate=*').
• Creating a ProductList component to display the popular products.
• Creating a ProductItem component to display individual product details.
• Fetching the product data using server-side rendering in page.js.
• Passing the product data to the ProductList component as a prop.
• Using Tailwind CSS to create a responsive grid layout for the products.
• Adding conditional logic to display the selling price if available, otherwise display the MRP.
• Adding hover effects and animations to the product items.

10. Implementing the Banner and Footer

• Adding a banner image to the public folder.
• Displaying the banner image using the next/image component.
• Adding a footer component with basic information and links.
• Using Hyper UI for pre-built footer components.

11. Implementing the Product Detail Popup Screen

• Installing the Dialog component from Shadcn UI using npx shadcn-ui@latest add dialog.
• Creating a ProductItemDetail component to display the product details in a dialog.
• Using the Dialog component in the ProductItem component to open the dialog on button click.
• Passing the product data to the ProductItemDetail component as a prop.
• Displaying the product image, title, description, price, and quantity in the dialog.
• Implementing logic to increase or decrease the quantity of the product.
• Calculating the total price based on the quantity.

12. Implementing Product by Category Screen

• Creating a dynamic route for product categories using bracket notation: [categoryName].
• Fetching the category name from the route parameters using useParams.
• Defining an API endpoint to fetch products by category using a filter: /api/products?filters[categories][name][$in]=<categoryName>&populate=*.
• Creating a TopCategoryList component to display the list of categories at the top of the page.
• Passing the selected category name to the TopCategoryList component as a prop.
• Dynamically applying styling to the selected category item.
• Using the existing ProductList component to display the products for the selected category.

13. Implementing Authentication (Sign-in and Create Account)

• Creating new routes for sign-in and create account.
• Using Shadcn UI's Input component for form fields.
• Creating a Global api.js file to handle API requests for authentication.
• Implementing the sign-in and create account functionality using Strappy's authentication API.
• Storing the JWT token and user information in session storage.
• Using the useRouter hook to redirect users after successful sign-in or create account.
• Implementing logic to prevent authenticated users from accessing the sign-in and create account pages.
• Adding a user profile icon to the header when the user is authenticated.
• Implementing a logout functionality to clear the session storage and redirect the user to the sign-in page.
• Hiding the header on the sign-in and create account pages.
• Using the usePathname hook to determine the current route.

14. Implementing Add to Cart Functionality

• Creating a UserCard collection type in Strappy to store the user's cart items.
• Adding fields for quantity, amount, product (relation), and user (relation).
• Defining an API endpoint to add items to the cart.
• Checking if the user is authenticated before adding items to the cart.
• Redirecting unauthenticated users to the sign-in page.
• Storing the cart data in the UserCard collection in Strappy.
• Displaying a toast message after successfully adding an item to the cart.
• Updating the cart count in the header.
• Using the Context API to share the cart data between components.
• Creating an UpdateCardContext to trigger updates in the header when the cart data changes.

15. Implementing the Cart Section

• Using Shadcn UI's Sheet component to create a side navigation bar for the cart.
• Creating a CardItemList component to display the list of items in the cart.
• Fetching the cart data from Strappy and displaying it in the CardItemList component.
• Calculating the subtotal of the items in the cart.
• Implementing a delete functionality to remove items from the cart.
• Updating the cart count in the header after deleting an item.

16. Implementing the Checkout Page

• Creating a new route for the checkout page.
• Dividing the screen into two sections: billing details and cart information.
• Using the existing components for input fields and buttons.
• Fetching the cart data and calculating the subtotal.
• Adding a delivery charge and calculating the total amount.
• Implementing the PayPal payment gateway using the paypal/react-paypal-js library.
• Creating an order in Strappy after successful payment.
• Deleting the cart items after creating the order.
• Redirecting the user to the order confirmation page.

17. Integrating the PayPal Payment Gateway

• Creating a PayPal developer account and obtaining the client ID.
• Installing the paypal/react-paypal-js library using npm install @paypal/react-paypal-js.
• Wrapping the application with the PayPalScriptProvider in layout.js.
• Using the PayPalButtons component in the checkout page.
• Implementing the createOrder function to create a PayPal order with the correct amount.
• Implementing the onApprove function to handle successful payments and store the order details in Strappy.

18. Implementing the My Order Page

• Creating a new route for the my order page.
• Fetching the user's order history from Strappy.
• Using Shadcn UI's Collapsible component to display the order details.
• Displaying the order date, total amount, and status in the collapsible header.
• Displaying the list of items in the order in the collapsible content.
• Using Moment.js to format the order date.

19. Conclusion

• The video provides a comprehensive guide to building an online grocery store application using Next.js, React, Tailwind CSS, and Strappy CMS.
• The application features a user-friendly interface, authentication, add to cart functionality, a checkout page, and a my order page.
• The video covers a wide range of topics, including setting up the development environment, building UI components, fetching data from Strappy, implementing authentication, integrating the PayPal payment gateway, and creating a responsive design.
• The application is suitable for small businesses looking to create an online presence.