I was the lead developer behind the web and mobile application of this project, the architecture was initially built as a webapp in Next.js (React), later the backend was reformed to ensure scalability. Then the company decided to develop a separate mobile application integrating business logic.

They had previously a front-end developer, later they had to let him go, and I was sole handedly solving everything as per their recommendations.

Responsive Image Management

Challenge: Implementing a responsive image gallery system that works across different screen sizes while maintaining performance.

Solution:

Implemented dynamic state management based on screen width
Used custom hooks for screen size detection
Created adaptive image layouts for mobile, tablet, and desktop views

Animation and Transition Control

Challenge: Creating smooth, performant animations for moving images and carousel components.

Solution:

Implemented interval-based position updates
Used CSS transitions for smooth movements
Created reusable animation components with configurable parameters

State Management Complexity

Challenge: Managing complex state for multiple interactive components like carousels and floating reviews.

Solution:

Implemented controlled state updates with boundary conditions
Created separate state handlers for forward and backward movements
Used React's useState and useEffect for efficient state management

Performance Optimisation

Challenge: Maintaining smooth performance with multiple animated components and image loading.

Solution:

Implemented image preview controls
Used lazy loading techniques
Optimised component re-rendering

Responsive Design Implementation

Challenge: Creating a consistent user experience across different devices and screen sizes.

Solution:

Implemented a mobile-first approach
Used Tailwind CSS breakpoints effectively
Created flexible layouts with dynamic sizing

Visual Consistency

Challenge: Maintaining visual harmony across different sections while using various UI components.

Solution:

Implemented consistent color schemes
Used standardised spacing and typography
Created reusable UI components

AI Driven Modularisation

Mastered handling AI response image
Implemented filtering out bad images based on the provided seed points and algorights

Technical Optimisation

Mastered responsive image handling with dynamic state management
Implemented efficient animation techniques using interval-based updates
Optimized performance through lazy loading and controlled re-rendering
Leveraged TypeScript for enhanced type safety and code reliability

Design & Architecture

Developed modular architecture for better maintainability
Established effective state management patterns for complex UI interactions

The SnapWiz AI headshot generator has demonstrated significant market impact with over 15.5 million AI headshots generated to date. The platform serves a robust user base of 350,000+ active users, processing approximately 0.95 million headshots monthly. This substantial usage has resulted in an estimated 195,000+ customer hours saved, demonstrating the platform's efficiency in replacing traditional photography sessions with AI-powered solutions.

From a business impact perspective, the platform has established itself as a trusted solution among leading professionals and corporations, as evidenced by the `TrustedByCompanies` component's showcase of partner organizations. The platform's success is further validated by its high user satisfaction rate, reflected in the floating review system that displays authentic user testimonials, and its commitment to user privacy and data security, which has helped establish trust among corporate clients and individual professionals alike.

The snapwiz-main project follows a component-based architecture using Next.js and React, structured around a modular design pattern. The application's core is built with TypeScript for type safety and organized into distinct sections: global components (Header, Footer), landing page components (TagLine, ImageCard, TrustedByCompanies), and functional modules (StepsOfUsing, HeadshotResult, FloatingReview). The UI implementation leverages Ant Design components alongside custom-styled elements using Tailwind CSS, ensuring consistent styling and responsive behavior across different screen sizes.

State management is handled through React's useState and useEffect hooks, with particular attention to image carousel controls and responsive layouts. The application employs a responsive design strategy with breakpoint-based component rendering, as evidenced in the `HeadshotResult` component's dynamic state management. Image optimization is handled through Next.js's Image component, with configuration for external domains in `next.config.mjs` , ensuring optimal loading performance and visual consistency across the platform.