EGMA

Introduction

Home1st is a comprehensive e-commerce platform designed for selling home décor products, specializing in both pre-made items and fully customizable products such as custom neon signs and acrylic photo frames. The platform provides customers with an intuitive shopping experience while offering unique product configurators that allow users to design personalized products in real-time.

The project was developed using a modern tech stack:

Backend: Python with Django and Django REST Framework, PostgreSQL for data storage, Razorpay for payment processing, and AWS S3 for file storage.
Frontend: Next.js 15 with React 19, TailwindCSS for styling, TanStack React Query for data fetching, and Radix UI for accessible components.

This case study explores the key challenges encountered during development and how they were resolved through innovative architectural choices and feature implementations. The platform successfully combines traditional e-commerce functionality with advanced product customization capabilities, creating a seamless experience for users seeking unique, personalized home décor items.

Client Background and Challenges

Home1st is a home décor retailer that offers a diverse range of products including wall art, neon signs, acrylic photo frames, and various decorative items. The client required a platform that could handle multiple product types with varying purchasing flows, from simple add-to-cart functionality to complex custom product configuration.

Key Challenges

Custom Product Configurators for Neon and Acrylic Products

The most significant technical challenge was implementing interactive product configurators for custom neon signs and acrylic photo frames.

For custom neon signs, users needed to:
- Enter custom text with multi-line support
- Select from multiple font options (Neon, Foundary, Lovelo Line Bold)
- Choose from a range of colors with real-time glow preview
- Pick from different sizes (Small, Medium, Large) with dynamic dimension calculations
- Select backing thickness (3mm, 5mm, 8mm)
- See live pricing updates based on all selections
For custom acrylic photo frames, the challenge was even more complex:
- Supporting multiple frame shapes: Square, Portrait, Landscape, Round, Love (Heart), and Hexagon
- Implementing an image cropper that could crop photos into non-rectangular shapes
- Validating minimum image resolution requirements per shape (e.g., 1600x1600 for square, 1800x1200 for landscape)
- Real-time preview showing how the photo would look in the selected frame shape
- Dynamic pricing based on shape, size combinations (ranging from 9x12 to 48x48 inches), and thickness options
- Certain size/thickness combinations being unavailable (e.g., 36x48 only available in 8mm thickness)
Multiple Product Types with Different Purchase Flows

Understanding and implementing the client's unique business requirements proved challenging:
- Pre-made Products: Traditional e-commerce flow with add-to-cart and checkout
- Customizable Products: Interactive configurators leading to add-to-cart with custom specifications
- Catalog Categories: Some categories displayed products but instead of purchase functionality, offered a WhatsApp redirect for inquiry/quote requests
This non-typical flow required careful handling where leaf category pages would detect whether products should be purchasable or if they should redirect users to WhatsApp with a pre-populated message like: "Hi! I'm interested in the [Category Name] category. Please share the catalog and pricing."
Backend and Frontend Integration for Custom Products

Implementing a seamless flow from product configuration to cart to checkout for custom products required:
- Designing flexible data models that could store various custom specifications as JSON while maintaining structured validation
- Calculating dynamic prices on both frontend (for immediate feedback) and backend (for cart/order accuracy)
- Handling file uploads for acrylic photo frames and storing them appropriately
- Ensuring cart items properly distinguished between regular products and custom configurations
- Maintaining custom configuration data through the entire checkout and order process
Dynamic Pricing Calculations

Both neon and acrylic products required sophisticated pricing logic:
- Neon pricing based on text length, number of lines, size multiplier, and backing thickness
- Acrylic pricing with a complex matrix of shape × size × thickness combinations
- Prices needed to match exactly between frontend previews and backend calculations
- Some combinations were invalid or unavailable and needed to be handled gracefully
Image Processing and Validation

For acrylic products, the platform needed to:
- Validate uploaded images meet minimum resolution requirements
- Crop images to match selected frame shapes (including non-rectangular shapes like hearts and hexagons)
- Generate proper previews showing the cropped result
- Export the final cropped image for storage and order fulfillment
Cart and Order Management for Mixed Product Types

The cart system needed to handle:
- Regular products with simple quantity adjustments
- Custom products where each configuration is unique (same base product but different specifications)
- Displaying custom configuration details (text, colors, dimensions, etc.) in cart views
- Preserving all custom data when converting cart items to order items

Solutions Implemented

1. Robust Data Architecture for Custom Products

The backend was designed with a flexible yet structured approach. The Product model includes a product type field that distinguishes between pre-made and customizable products. This allows the system to apply different validation rules and pricing logic depending on the product type.

For storing custom configurations, we created a dedicated model that links to the base product and stores the user's specifications. This model holds the calculated price, product dimensions, and a flexible specifications field that can accommodate any custom options. This approach provides the flexibility to store varying data structures while maintaining essential calculated values in structured fields.

Additionally, normalized configuration models for Neon and Acrylic products provide structured storage for specific product types, enabling better querying and validation while the main specifications field handles any additional custom data.

2. Interactive Neon Sign Configurator

The neon configurator was built as an interactive component with real-time preview capabilities:

Text Input: A multi-line text area allows customers to enter their desired text, with character limit validation to ensure the text fits within manufacturing constraints.
Font Selector: A dropdown menu displays available font options with visual previews, so customers can see how each font style looks before selecting.
Color Picker: Visual color buttons arranged in a palette let customers choose from available neon colors, with the selected color highlighted.
Size Calculator: The system dynamically calculates dimensions based on the text length and chosen size type (Small, Medium, or Large). Longer text results in wider dimensions, and multiple lines increase the height proportionally.
Live Preview: A full-screen preview area shows the neon effect in real-time, simulating the glow effect so customers can visualize exactly how their sign will look against a dark background.

3. Advanced Acrylic Photo Frame Configurator

The acrylic configurator addressed the complex shape-cropping challenge with a sophisticated image editing solution:

Frame Shape Selector: A toggle group displays visual icons for each available shape—Square, Landscape, Portrait, Love (Heart), Round, and Hexagon. Selecting a shape updates all related options accordingly.
Size Options: Each shape has its own set of available sizes. Portrait and Landscape have rectangular dimensions, while Square, Round, Love, and Hexagon have equal width and height. The available sizes range from small (9x12 inches) to extra-large (48x48 inches).
Thickness Selector: Customers can choose from 3mm, 5mm, or 8mm thickness options. However, not all thickness options are available for all size combinations—for example, the largest 48x48 size is only available in 8mm thickness.
Image Upload and Validation: When customers upload a photo, the system validates that the image meets minimum resolution requirements. Different shapes have different requirements—for instance, landscape shapes require wider images (1800x1200 pixels minimum), while portrait shapes require taller images (1200x1800 pixels minimum).
Custom Cropper with Shape Masking: The image cropper extends beyond simple rectangular cropping. Using CSS clip-path techniques, the preview displays the photo as it will actually appear in the chosen frame shape. Customers can see their photo cropped into a heart, hexagon, or circle shape in real-time before finalizing their order.

4. Dual Product Flow with WhatsApp Integration

For catalog-only categories, the platform implements intelligent detection of category types. When a customer views a leaf category (one with no sub-categories), the system checks whether this category is meant for direct purchase or inquiry-based ordering.

For inquiry-based categories, clicking on a product or category card opens WhatsApp with a pre-populated message expressing interest in that category. The message automatically includes the category name, making it easy for customers to inquire about products and for the sales team to understand what the customer is interested in.

This creates a smooth transition from browsing to inquiring, with visual indicators (WhatsApp icons and "Request Quote" labels) clearly showing customers that clicking will open a WhatsApp conversation rather than a product detail page.

5. Unified Cart System for All Product Types

The cart system was built to handle both regular and custom products seamlessly:

Regular Products: Standard cart functionality with product images, names, prices, and quantity controls.
Custom Neon Products: The cart displays a live preview of the neon sign with the customer's text, selected color, and glow effect. All customization details (text, font, size, color, backing thickness, and dimmer option) are shown in an organized configuration panel.
Custom Acrylic Products: The cart shows the actual cropped photo that will be used for the frame, along with all customization details including shape, size dimensions, and thickness.

Each custom configuration is treated as a unique item, meaning a customer can have the same base product in their cart multiple times with different customizations, and each is displayed and priced correctly.

6. Synchronized Pricing Calculations

To ensure customers always see accurate prices, the pricing logic was implemented identically on both the frontend and backend:

For neon products, the price is calculated based on the text length, number of lines, selected size type, and backing thickness. Longer text with more characters costs more, and thicker backing options command premium prices.

For acrylic products, a comprehensive pricing matrix maps every valid combination of shape, size, and thickness to a specific price. The system looks up the exact price based on the customer's selections, ensuring consistency whether the price is displayed during configuration or calculated during checkout.

This synchronization prevents any discrepancies between what customers see when designing their product and what they're charged when completing their order.

7. Context-Based State Management

The product customization state is managed through a centralized context system. This allows all parts of the configurator—the text input, color picker, size selector, preview display, and price calculator—to access and update the same state.

When a customer changes any option, all related components update immediately. The preview refreshes, the price recalculates, and available options (like valid thickness choices for the selected size) are filtered accordingly.

This architecture also enables the add-to-cart functionality to easily collect all selected options in one place, ensuring nothing is lost when the customer proceeds to checkout.

8. Secure Payment Integration with Razorpay

Payment processing was implemented using Razorpay, India's leading payment gateway. The integration follows security best practices:

When a customer initiates checkout, the backend creates a Razorpay order with the exact amount. After the customer completes payment through the Razorpay interface, the system verifies the payment signature using cryptographic verification. This ensures that the payment confirmation actually came from Razorpay and hasn't been tampered with.

Only after successful verification does the system mark the order as paid and trigger order confirmation processes.

9. Dynamic Content Management

The platform includes a content management system that allows administrators to update homepage elements without developer intervention:

Carousel Items: Hero images on the homepage can be added, reordered, activated, or deactivated. Each carousel item can optionally link to a specific page or category.
Featured Categories: Administrators can select which categories appear prominently on the homepage and control their display order.
Featured Products: Individual products can be highlighted on the homepage to drive attention to specific items.

All these content elements can be managed through the admin interface, giving the marketing team flexibility to update the storefront as needed.

Technologies Used

Backend

Python 3.x with Django 5.2 and Django REST Framework 3.16
PostgreSQL for robust relational data storage
Razorpay SDK for payment processing
AWS S3 for file and image storage
Various Django extensions for countries, API documentation, and consistent naming conventions

Frontend

Next.js 15 with React 19 and TypeScript for a modern, type-safe application
TailwindCSS 4 for responsive, utility-first styling
TanStack React Query 5 for efficient data fetching and caching
Radix UI components for accessible, unstyled primitives
Specialized libraries for image cropping functionality
Zod for runtime data validation
React Hook Form for form state management

Key Features Developed

Product Catalog with Category Hierarchy
- Nested categories with breadcrumb navigation
- Category-level images and descriptions
- Configurable product display options
Custom Neon Sign Builder
- Real-time text preview with glow effects
- Multiple font, color, and size options
- Dynamic pricing based on specifications
- Backing thickness selection
Custom Acrylic Frame Builder
- Support for 6 different frame shapes
- Advanced image cropper with shape masking
- Resolution validation per shape
- Size and thickness matrix pricing
Shopping Cart
- Unified cart for all product types
- Custom product preview rendering
- Quantity management with price updates
- Real-time total calculations with tax and shipping
Multi-Step Checkout Flow
- Address selection and management
- Order confirmation with itemized details
- Razorpay payment integration
- Order completion with success messaging
User Account Management
- Phone number-based authentication
- Multiple address support with default selection
- Order history tracking
- Wishlist functionality
Dynamic Homepage Content
- Admin-managed hero carousel
- Featured categories section
- Featured products display
- Mobile-optimized category navigation
WhatsApp Integration
- Catalog inquiry via WhatsApp for specific categories
- Pre-populated messages with product/category information
- Seamless redirect to WhatsApp web/app

Results and Impact

The Home1st platform successfully addressed all the identified challenges:

Custom Product Experience: The neon and acrylic configurators provide an engaging, interactive experience that lets customers visualize their personalized products before purchase. The real-time preview and instant pricing feedback eliminate uncertainty in the ordering process.
Flexible Business Model Support: The platform accommodates the client's mixed business model—supporting direct purchase, customization to purchase, and inquiry-based flows—all within a single, cohesive user experience.
Data Integrity: The dual-layer approach of JSON flexibility with normalized configuration tables ensures both adaptability and data consistency. Backend validation mirrors frontend rules, preventing price discrepancies.
Scalable Architecture: The modular design allows easy addition of new customizable product types. The pattern established for neon and acrylic products can be extended to future product categories.
Performance: Using Next.js with server-side rendering for product pages and TanStack Query for efficient data fetching ensures fast page loads and responsive interactions.
Maintainability: Clear separation between product types, centralized pricing logic, and comprehensive type definitions make the codebase maintainable and reduce the risk of bugs during updates.

Lessons Learned

Plan for Complexity in Custom Products: Custom product configurators require careful upfront planning. The interaction between multiple options (shape, size, thickness) with availability constraints and pricing requires a systematic approach.
Sync Frontend and Backend Logic: When calculations must match exactly (like pricing), maintaining identical logic in both TypeScript and Python requires discipline and thorough testing.
Design for Flexibility: Using JSON for specifications storage while maintaining normalized tables for common fields provides the best of both worlds—flexibility and queryability.
Image Processing Challenges: Browser-based image cropping with non-rectangular masks requires creative CSS solutions. Resolution validation at upload time prevents issues downstream.
User Experience for Complex Flows: Breaking down complex customization into clear steps (choose shape → upload photo → select size → pick thickness) helps users navigate the process without feeling overwhelmed.

This project exemplifies how modern web technologies can be leveraged to create sophisticated e-commerce experiences that go beyond traditional product catalogs, offering customers the ability to create truly personalized products while maintaining operational efficiency for the business.

Home1st E-Commerce Platform Case Study