Customizable Air Freshener Design Tool Development

Frontend: React: Utilized as the primary library for building the user interface, offering a responsive and dynamic experience. Styled Components: A library for writing CSS-in-JS, allowing developers to style React components using tagged template literals and leveraging the full power of JavaScript to manage styles dynamically. Webpack: Utilized for local client development and production builds, offering a comprehensive and highly customizable module bundler with advanced configuration options. React Query: For fetching, caching, and synchronizing server data in React applications. class-variance-authority: For managing class variance with TypeScript support. Typescript: For enhanced developer experience and type safety. react-hook-form: A performant, flexible, and extensible form library for React, simplifying form validation and data handling through hooks. Headless-UI: A set of completely unstyled, accessible UI components for React, allowing developers to build custom-styled components with full control over their appearance and behavior. Ant Design: A design system with a set of high-quality React components and an easy-to-use design language, facilitating the rapid development of elegant and consistent user interfaces. Redux Toolkit: A set of tools and best practices for efficient and scalable state management in React applications, simplifying the process of writing Redux logic and improving developer productivity. Tanstack Router: A powerful and flexible routing library for React applications, providing fine-grained control over navigation and rendering logic. React Konva: A library for creating complex canvas graphics in React, leveraging the power of the Konva framework to render 2D shapes and animations. Backend: Express: A fast, minimalist web framework for Node.js, used for building robust APIs and web applications. It simplifies server-side development by providing a suite of features for routing, middleware, and HTTP utilities. Mongoose: An elegant MongoDB object modeling tool designed for Node.js, Mongoose provides a straightforward, schema-based solution to model application data. It includes built-in type casting, validation, query building, and business logic hooks. CORS: A middleware package for Express.js that enables Cross-Origin Resource Sharing (CORS), allowing resources to be requested from another domain outside the domain from which the resource originated, essential for enabling web applications to access resources on different servers. Morgan: An HTTP request logger middleware for Node.js, used in Express.js applications for logging request details. It helps in monitoring and debugging web applications by generating concise and readable logs. Pino: A highly performant, low-overhead logging library for Node.js applications, designed to deliver logs with minimal impact on performance and to provide detailed and structured log output. http-status-codes: A utility library for managing HTTP status codes, providing a set of constants and methods for handling and referring to HTTP response codes in a readable and maintainable way. Additional Libraries and Tools: Docker and Docker Compose: For containerization and building images GitHub Actions: For GitHub CI/CD to define custom workflows using YAML files, which can automate tasks such as testing, building, and deploying code.

Design Tool with Extensive Customization: Base Selection: Choose from a variety of air freshener types, such as car air fresheners or room sprays, and enhance them with personal or AIpowered designs. Scent Library: Select from an extensive range of scents, each with detailed descriptions. Color Customization: Pick colors directly or upload custom designs for a unique touch. Logo and Text: Add logos or custom text to further personalize your air freshener. Design Preview: Preview your design in a simulated environment to ensure it meets your expectations before ordering. Create Your Own Design: Editing Tool: Use a user friendly editing tool to create designs that meet your specifications, including shapes, text, colors, and images. Ordering and Payment System: Order Modification: Review, remove, or add items to your cart for flexible order management. AI-Powered Features: Cropping Options: Select from various cropping types tailored to specific subjects like pets, cars, or human faces. AI Cropping: Use an intuitive selection tool to define the area of the image to focus on, with AI automatically recognizing and precisely cropping the selected area for optimal design integration. Account Management: Design and Scent Saving: Save your favorite designs and scents for easy reordering. Order History: Review past purchases by accessing your order history. Profile Management: Manage your shipping and billing details for faster transactions