Myntra Fashion Ecosystem: A Social & Intelligent Shopping Platform

Transform shopping from a solitary task into a social, intelligent journey

Working Demo

working_demo.mp4

Overview

The Myntra Fashion Ecosystem is a revolutionary social shopping platform that transforms the traditional e-commerce experience into an interactive, collaborative, and AI-powered journey. Built as a comprehensive solution for the Myntra hackathon, this platform addresses the critical gap in social shopping experiences by creating persistent group spaces, intelligent AI assistance, and shared wardrobe management.

Problem Statement

Online shopping has become increasingly isolated, with users resorting to fragmented solutions like sharing product links via WhatsApp or creating unorganized external mood boards. Myntra's current AI features are siloed to individual users, lacking the group context that defines real-world shopping experiences. This platform bridges that gap by creating a unified, purpose-built ecosystem for collaborative fashion discovery and decision-making.

Key Features

Persistent Group Spaces (Rooms)

• Dedicated Chat Rooms: Create themed spaces for specific shopping projects
• Role-Based Permissions: Owner, Editor, Contributor, and Viewer roles
• Real-time Collaboration: Live messaging with instant synchronization
• AI Integration: Intelligent fashion assistant responds to group conversations

Live Voice Calls

• Real-time Product Browsing and Suggestions: Users can converse and add items to the linked wardrobe
• Synchronized Browsing: Participants can see the same products simultaneously

Permissioned Shared Wardrobes

• Collaborative Collections: Build shared wardrobes with friends and family
• Granular Permissions: Control who can add, edit, or view items
• AI Outfit Suggestions: Get intelligent styling recommendations
• Purchase Tracking: Monitor what's been bought and what's still needed

Architecture

Frontend (React Native + Expo)

Mobile App (iOS/Android)
├── UI Components
│   ├── Maya Chat Interface
│   ├── Product Cards
│   ├── Wardrobe Management
│   └── Room Management
├── State Management
│   ├── Session Context
│   ├── Real-time Updates
│   └── Offline Support
├── API Integration
│   ├── REST API Calls
│   ├── Socket.io Real-time
│   └── AI Service Integration
└── Navigation
    ├── Tab Navigation
    ├── Stack Navigation
    └── Modal Presentations

Backend (Node.js + Express)

Server Architecture
├── Authentication
│   ├── JWT Token Management
│   ├── Role-Based Access Control
│   └── User Session Management
├── Database Layer
│   ├── MongoDB Atlas
│   ├── Optimized Schemas
│   └── Indexed Queries
├── AI Integration
│   ├── OpenAI GPT-3.5-turbo
│   ├── Fashion Recommendation Engine
│   └── Context-Aware Responses
├── Real-time Communication
│   ├── Socket.io Server
│   ├── Live Chat Updates
│   └── Voice Call Signaling
└── File Management
    ├── Cloudinary Integration
    ├── Image Optimization
    └── Media Storage

Quick Start

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Expo CLI (npm install -g @expo/cli)
• MongoDB Atlas account

Installation

1. Clone the repository

   git clone <repository-url>
   cd MyntraStyleRooms

2. Install Frontend Dependencies

   npm install

3. Install Backend Dependencies

   cd backend
   npm install

4. Environment Setup Frontend (.env)

   EXPO_PUBLIC_API_URL=http://localhost:5000/api

   Backend (.env)

   # Server Configuration
   PORT=5000
   NODE_ENV=development
   
   # Database
   MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/myntra-fashion
   
   # JWT Configuration
   JWT_SECRET=your-super-secret-jwt-key-here
   JWT_EXPIRE=7d
   
   # Cloudinary (Image Storage)
   CLOUDINARY_CLOUD_NAME=your-cloud-name
   CLOUDINARY_API_KEY=your-api-key
   CLOUDINARY_API_SECRET=your-api-secret
   
   # OpenAI Configuration
   OPENAI_API_KEY=your-openai-api-key

5. Start the Backend Server

   cd backend
   npm run dev

6. Start the Frontend App

   # In a new terminal
   npm start

7. Run on Device/Simulator

   • iOS: Press i in the terminal or scan QR code with Camera app
   • Android: Press a in the terminal or scan QR code with Expo Go app
   • Web: Press w in the terminal

App Structure

Main Screens

Screen	Description	Features
Catalog	Main product discovery	Trending products, categories, search
Rooms	Group chat spaces	Real-time messaging, AI integration
Wardrobes	Shared collections	Collaborative wardrobe management
Profile	User settings	Preferences, stats, badges

Key Components

• MayaChat: AI-powered chat interface with product recommendations
• VirtualProductCard: Interactive product display with reactions
• SessionContext: Real-time state management for live sessions
• WardrobeManager: Collaborative wardrobe management system

API Documentation

Authentication Endpoints

POST /api/auth/register    # Register new user
POST /api/auth/login       # Login user
GET  /api/auth/me          # Get current user

Rooms Endpoints

GET    /api/rooms          # Get user's rooms
POST   /api/rooms          # Create new room
GET    /api/rooms/:id      # Get room details
PUT    /api/rooms/:id      # Update room
DELETE /api/rooms/:id      # Delete room

Wardrobes Endpoints

GET    /api/wardrobes           # Get user's wardrobes
POST   /api/wardrobes           # Create new wardrobe
GET    /api/wardrobes/:id       # Get wardrobe details
POST   /api/wardrobes/:id/items # Add item to wardrobe

AI Endpoints

POST /api/ai/chat                    # Chat with AI stylist
POST /api/ai/outfit-suggestions      # Get outfit suggestions
POST /api/ai/product-recommendations # Get product recommendations

Database Schema

Core Collections

• Users: User profiles, preferences, and statistics
• Rooms: Group chat spaces with member management
• Messages: Chat messages with AI integration
• Wardrobes: Shared clothing collections
• WardrobeItems: Individual items with reactions and notes
• Products: Myntra product catalog
• LiveCalls: Voice call sessions with participants
• Notifications: Real-time user notifications

Key Features

• Optimized Indexes: For fast query performance
• Virtual Fields: Computed properties and aggregations
• Pre/Post Hooks: Automatic data processing and validation
• Relationships: Proper references and population

AI Integration

OpenAI GPT-3.5-turbo Integration

The platform features sophisticated AI integration that provides:

• Automatic Detection: Smart keyword detection for fashion-related requests
• Context-Aware Responses: Understands group conversation context
• Product Recommendations: Structured product suggestions with details
• Fallback System: Graceful handling of API failures

AI Features

• Group Chat Integration: AI responds directly in group conversations
• Fashion Expertise: Specialized knowledge in styling and trends
• Product Curation: Intelligent product recommendations
• Real-time Processing: Instant responses to user queries

Real-time Features

Socket.io Integration

• Live Chat: Real-time message synchronization
• Voice Call Signaling: WebRTC call management
• Synchronized Browsing: Shared product viewing experience
• Notification System: Instant updates and alerts

WebRTC Implementation

• Peer-to-Peer Communication: Direct voice connections
• Call Management: Host/participant role handling
• Quality Optimization: Adaptive bitrate and codec selection

UI/UX Design

Design Principles

• Mobile-First: Optimized for mobile shopping experience
• Intuitive Navigation: Easy-to-use interface for all age groups
• Real-time Feedback: Instant visual feedback for all actions
• Accessibility: Inclusive design for diverse users

Key Design Elements

• Maya Chat Interface: Conversational AI with product cards
• Product Visualization: High-quality images with interactive elements
• Gesture-Based Interactions: Swipe, tap, and hold actions
• Responsive Layout: Adapts to different screen sizes

Optimization Strategies

• Database Indexing: Optimized queries for fast retrieval
• Caching: Redis for frequently accessed data
• Image Optimization: WebP format with lazy loading
• Code Splitting: Lazy loading of components

Security

Security Measures

• JWT Authentication: Secure token-based authentication
• Rate Limiting: Protection against abuse
• Input Validation: Comprehensive data validation
• HTTPS: Encrypted communication
• CORS: Proper cross-origin resource sharing

Privacy Protection

• Data Encryption: Sensitive data encrypted at rest
• GDPR Compliance: User data protection
• Secure APIs: Protected endpoints with authentication
• Audit Logging: Comprehensive activity tracking

Contributing

Development Workflow

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Code Standards

• ESLint: Code linting and formatting
• Prettier: Consistent code formatting
• TypeScript: Type safety and better development experience
• Conventional Commits: Standardized commit messages

Achievements

Hackathon

• Name: Myntra WeForShe HackerRamp 2025
• Team: InnoCode
• Innovation: Social shopping platform with group AI
• Performance: Sub-200ms response times
• User Experience: Intuitive design for all demographics
• Position: Top 6 out of 56.2k+ teams

Technical Excellence

• Architecture: Scalable microservices architecture
• AI Integration: Advanced OpenAI integration
• Mobile: Cross-platform React Native app
• Real-time: WebRTC and Socket.io implementation

Getting Help

• Documentation: Comprehensive API and component docs
• Issues: GitHub Issues for bug reports
• Discussions: GitHub Discussions for questions

---