Boquet Site
A modern, responsive e-commerce website for a flower shop built with Next.js, featuring a beautiful UI, Sanity CMS integration, and eSewa payment gateway integration.
Overview
The Bouquet Site is an innovative flower shop that leverages the power of modern web technologies to create a stunning e-commerce experience. Built with Next.js, this platform showcases a beautifully designed user interface that makes browsing flowers and managing purchases a joy. With integrated content management through Sanity CMS and a secure payment system provided by eSewa, the site is tailored specifically for the Nepalese market, ensuring customers find exactly what they need while enjoying a seamless shopping experience.
What truly sets the Bouquet Site apart is its emphasis on performance and usability. The responsive design captures the attention of users on any device, ensuring that shopping for flowers is both easy and attractive. Whether you're selecting a delightful bouquet for a special occasion or simply browsing seasonal collections, the Bouquet Site promises an engaging and efficient online experience.
Features
- Beautiful Product Catalog: Browse through various bouquet categories and seasonal collections to find the perfect arrangement.
- Shopping Cart: Easily add items to your cart, with options for quantity and variant selection to suit your needs.
- eSewa Payment Integration: Benefit from secure payment processing using Nepal's popular eSewa payment gateway.
- Responsive Design: Enjoy a mobile-first design that ensures a flawless experience on all devices, from smartphones to desktops.
- Modern UI/UX: Built using Radix UI components and Tailwind CSS, creating an aesthetically pleasing and user-friendly interface.
- CMS Integration: Leverage Sanity CMS for straightforward content management, allowing for easy updates and maintenance of the site.
- Product Search & Filtering: Quickly find bouquets by category, collection, and more with intuitive search features.
- Fast Performance: Optimized with Next.js 14 App Router, ensuring a swift and smooth shopping experience.
- 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.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- cmdk
cmdk is a fast, composable command menu component for React. It provides the foundation for building command palettes, search interfaces, and keyboard-navigable menus similar to those found in applications like VS Code, Linear, and Raycast.
- Sanity
Sanity is a fully customizable, API-first, and cloud-based headless content management system that enables developers to manage structured content across multiple channels and platforms.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- React Hook Form
React Hook Form is a performant, flexible, and extensible form library for React with easy validation. It reduces re-renders and improves performance by using uncontrolled components and native HTML validation, making form handling simple and efficient.
- Recharts
Recharts is a powerful and easy-to-use React library for building customizable and interactive charts. Built on D3.js, it offers a wide range of pre-built chart types, such as line, bar, pie, and scatter charts, all of which can be composed with a declarative syntax.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Zod
Zod is a TypeScript-first schema declaration and validation library. It allows you to define schemas that can validate data at runtime while providing excellent TypeScript inference, making it perfect for API validation, form validation, and type-safe data handling.