Botanical Store

Overview:

Botanical Store is an open-source e-commerce project that utilizes the Next.js App Router, React 18, TypeScript, Tailwind CSS, and Firebase. This project is designed to provide a functional and customizable e-commerce platform that can be easily deployed.

Features:

• Next.js new /app directory: The project structure follows the new Next.js convention, organizing components and pages within the /app directory.
• Server and Client Components: Both server-side and client-side components are used, allowing for efficient rendering and server-side data fetching.
• Routing, Pages, Layouts, and Layout Groups: The project includes a flexible routing system that allows for the creation of pages, layouts, and layout groups, making it easy to manage the app's structure.
• Data Fetching, Revalidating, Caching: The project includes built-in functionality for data fetching, revalidation, and caching, ensuring that data is always up to date.
• Server Actions (experimental feature): The use of server actions allows for the execution of server-side logic directly from the client.
• Route handlers: Route handlers are used to handle specific actions or logic for a particular route, providing flexibility and customization options.
• Suspense Boundaries, Loading UI, and Not found pages: Suspense boundaries are utilized to handle loading states and display a custom UI while data is being fetched. Not found pages are also included to handle 404 errors.
• Static and Dynamic Metadatas: The project supports setting static and dynamic metadata for each page, allowing for proper SEO and social sharing.
• Add to cart and similar functionalities: The e-commerce functionality includes features such as adding items to the cart and storing cart data in localStorage.
• Pagination, Search, Sorting, Filters: The project includes functionality for pagination, search, sorting, and filtering, allowing users to easily navigate and find products.
• CRUD operations + Dashboard table: The project provides CRUD operations for managing products and includes a dashboard table for easy product management.
• Database and storage on Firebase: The project utilizes Firebase for database storage and file uploads, providing a scalable and reliable backend.
• Image uploads with dropzone provided by react-drop-zone: A file upload feature is included, utilizing the dropzone component provided by react-drop-zone.
• Notification messages with react-hot-toast: Notification messages are easily implemented using the react-hot-toast library.
• Building forms with react-hook-form and validations using Zod: The project includes form building functionality using react-hook-form and validation using the Zod library.
• Global State management with Zustand: Zustand is used for global state management, providing an easy-to-use and efficient solution.
• Written in TypeScript: The project is written in TypeScript, ensuring type safety and improving development productivity.
• Components styled with Tailwind CSS: All components in the project are styled using Tailwind CSS, providing a flexible and customizable design system.
• Dark/light mode with next-themes: The project includes support for dark and light mode using the next-themes library.
• Available as a Progressive Web App (PWA): The Botanical Store can be installed as a Progressive Web App, allowing for easy access and offline functionality.

Summary:

Botanical Store is a feature-rich and customizable open-source e-commerce project built with the latest web development technologies. It offers a wide range of functionalities, from data handling and state management to e-commerce features and form validation. With its flexible architecture and easy installation process, the Botanical Store is an ideal solution for building your own e-commerce website.