ClassyStay Platform
End-to-end hospitality management ecosystem — from guest bookings to Super Admin analytics, PMS operations, RFID tracking, and multi-property management across hotels, hostels, and villas.
Suspended42 PRs417 ACUs
🎨 UX Case Study
Problem Statement
Indian hospitality operators (especially small-to-mid-tier hotels, hostels, and villa operators) lacked a unified platform to manage bookings, room inventory, staff access, and analytics. Existing tools were either too expensive (Opera, MEWS) or lacked India-specific features like INR pricing, GST, RFID-based electricity tracking, and hourly booking.
Target Users & Personas
👤 Super Admin (Platform Owner)
Oversees all properties across India. Needs: global revenue view, property onboarding workflow, user/role management, cross-property analytics. Pain point: managing 6+ properties across different cities without a single pane of glass.
💼 Property Manager (Raj Kumar)
Manages day-to-day operations of a single property. Needs: room status board, tape chart, booking inquiries, RFID card assignment, task tracking. Pain point: juggling phone calls, WhatsApp, and Excel sheets for daily ops.
🏠 Hotel Owner (New Listing)
Wants to list their property on the platform. Needs: simple onboarding flow, set rooms/rates/amenities. Pain point: complex setup forms, unclear commission structure.
🙋 Guest (Customer John)
Searching for accommodation across 500+ Indian cities. Needs: filter by type, city, price. Pain point: lack of trust in budget stays, no clear comparison between hotel/hostel/villa.
User Journey Flow
Guest lands on homepage→
Selects Hotel/Hostel/Villa→
Searches by city→
Browses properties→
Views property detail→
Selects room & books
Admin login→
Super Dashboard→
Property Management→
Assign Hotel Manager→
PMS operations→
Analytics & Reports
Design Decisions
🎨
Dark Premium Theme
Dark teal/navy sidebar with gold accents for a premium hospitality feel — inspired by luxury hotel branding.
🛠
Role-Based Views
4 distinct dashboards for Super Admin, PM, Owner, and Guest — each seeing only what they need.
📊
Data-Dense Dashboards
Revenue charts, pie distributions, KPIs above the fold — no scrolling needed for key metrics.
📱
Quick Login Demo
One-click role switching on login page — letting stakeholders instantly preview each persona's view.
Information Architecture
The platform follows a hierarchical navigation model:
- L1 — Sidebar: Dashboard, Master Data, Properties, Users, Operations, Content, RFID, Analytics, Settings
- L2 — Sub-nav: Master Data → Location Master, Amenities, Room Types
- L3 — Contextual: Property detail → Rooms, Bookings, Guests, Gallery, Events
- Guest Side: Home → Properties (filtered) → Property Detail → Room Selection → Booking
🔗 Links & Resources
Status
Suspended • 42 PRs (9 merged, 33 open)
🛠 Tech Stack
ReactTypeScriptVite
Tailwind CSSRadix UIFramer Motion
RechartsLucide ReactSonner
React Routerreact-image-crop
📷 Screenshots
Guest Home — Hero with property carousel, booking search, and city stats
Property Listing — Filter by type, city, price range with ratings
Hotel Detail — Image gallery, amenities, room selection with pricing
Login — Quick Demo buttons for 4 roles (Super Admin, PM, Owner, Guest)
Super Admin Dashboard — Revenue ₹1405K, 308 bookings, 87% occupancy, analytics charts
Property Management — 8 properties, search/filter, hotel manager assignments
User Management — Role-based access, permissions, activity tracking
🔒 Credentials & Access
| Role | Access | Dashboard | Notes |
|---|
| Super Admin | admin@classystay.in | /admin/super-dashboard | Full platform — all properties & users |
| Property Manager | Raj Kumar | /pms/dashboard | PMS-level ops — rooms, bookings, RFID |
| Hotel Owner | New Listing | /owner/onboarding | Property onboarding flow |
| Customer | John | / (homepage) | Guest portal — search & book |
All roles available via Quick Login (Demo) buttons on /login — no password needed.
📝 Key Features
- Super Admin: Revenue analytics (₹1405K), 308 bookings, property distribution (Hotels 33%, Hostels 33%, Villas 33%), top performing properties chart
- Property Mgmt: 8 total properties, 7 active, workflow: Add City → Add Property → Assign Hotel Manager
- User System: 4 users (2 admins, 2 staff), roles: Super Admin, Hotel Admin, Reception, Housekeeping, Maintenance
- PMS: Room operations, tape chart, booking management, task tracking with time logs
- RFID System: Card assignment, electricity session monitoring, access control logs
- Guest Portal: 500+ cities, hotel/hostel/villa categories, hourly booking toggle, date picker, guest/room selector
- Content CMS: Gallery, events, guest book, design showcase
Ezacus Digital Forge
Public-facing corporate website and CMS for Ezacus Technologies — an IT services company. Features AI chatbot, dual themes, service pages, portfolio case studies, team profiles, blog, and admin dashboard.
Suspended5 PRs59 ACUs
🎨 UX Case Study
Problem Statement
Ezacus Technologies needed a modern corporate website that would establish credibility with enterprise clients while enabling self-service content management. The old site was static and didn't reflect the company's capabilities in custom software, IoT, and e-governance solutions.
Target Users
💼 Enterprise Decision Maker
CTO or IT Director evaluating technology partners. Needs: case studies showing domain expertise, clear service listings, easy contact flow. Pain point: most vendor sites are vague about actual deliverables.
📝 Content Administrator
Internal marketing team member. Needs: update blog posts, team bios, portfolio items, SEO meta tags without developer help. Pain point: previous site required code changes for any content update.
Design Decisions
🌑
Dual Theme System
Dark Industrial (default) + Purple Bloom — data-theme toggle for brand flexibility.
🤖
AI Lead Chatbot
Regex-based knowledge engine that qualifies leads through service questionnaires.
🚀
Scroll Animations
FadeInView, ScaleOnScroll, Parallax Hero — progressive reveal to maintain engagement.
🔎
Portfolio Filtering
Category chips (Education, E-Governance, E-commerce, Poultry, Dairy) for quick case study discovery.
Information Architecture
Home (Hero + Stats)→
Services (6 categories)→
Portfolio (Case Studies)→
About→
Team→
Blog→
Contact
🔗 Links & Resources
Deployment
Vercel (VERCEL_TOKEN configured)
🛠 Tech Stack
ReactTypeScriptVite
Tailwind CSSshadcn/uiSupabase
TanStack QueryFramer MotionLucide React
React RouterVitest
📷 Screenshots
Home — Dark Industrial theme with animated hero & capability stats
Services — Industry-segmented solution categories
About — Company story, team photo, stats (10+ years, 200+ projects, 50+ clients)
Portfolio — Case studies with category filters (Education, E-Governance, E-commerce)
Team — Leadership profiles: Business Head, CEO, Tech Head
Blog — Featured article with search and category filters
Contact — Inquiry form with service selection, budget range, company details
🔒 Credentials
| Service | Details | Notes |
|---|
| Supabase | SUPABASE_URL + SUPABASE_ANON_KEY in .env | Database & auth for CMS |
| Vercel | VERCEL_TOKEN in Devin secrets | Deployment |
| Admin Panel | /admin (protected route) | CMS for blog, services, team |
📝 Key Features
- AI Chatbot: Regex-based knowledge engine with service questionnaire for lead qualification
- Dual Themes: Dark Industrial (default) + Purple Bloom with data-theme toggle
- Portfolio: LMS for Kids (Education), Hydrology App (E-Governance), Morya Tools (E-commerce)
- Team: Yogesh Manekar (Director), Pankaj Wankhede (CEO), Mukund Malpani (Tech Head)
- Blog CMS: Featured articles, category filtering (Technology, Business, Innovation)
- Contact: Structured inquiry form with service selection, budget range, and project details
- Animations: FadeInView, ScaleOnScroll, Hero Parallax, Infinite Scroll Marquee
Pixelnest 5 Elements
Marketing site for Pixel Nest Media featuring a scroll-driven 3D experience based on Fire, Water, Earth, Air, and Ether — backed by a custom PHP 8.2 CMS on Hostinger.
Running17 PRs
🎨 UX Case Study
Problem Statement
Pixel Nest Media needed a memorable, differentiated marketing website that would stand out from generic agency portfolios. The concept of "Five Elements" was chosen to represent the company's holistic approach to digital services — each element symbolizing a core capability area.
Design Decisions
🌮
3D Scroll Experience
Three.js + @react-three/fiber for immersive scroll-driven 3D scene with cinematic post-processing.
🌈
Five Element Theme
Fire (Passion), Water (Flow), Earth (Stability), Air (Innovation), Ether (Vision) — each section has unique visual treatment.
🚀
GSAP ScrollTrigger
Complex scroll animations with pinning, scrubbing, and stagger effects for cinematic storytelling.
🖥
PHP CMS Backend
Custom PHP 8.2 + MySQL 8 CMS for Hostinger deployment — admin UI for hero, projects, team content.
🛠 Tech Stack
React 19Three.js@react-three/fiberGSAP + ScrollTriggerFramer MotionTypeScriptViteTailwind CSS v4TanStack QueryPHP 8.2MySQL 8pnpm monorepo
📝 Key Features
- 3D Scene: Scroll-driven Three.js with @react-three/postprocessing cinematic effects
- Portfolio: 9 case studies (5 Behance + 4 internal) with 3D cards and element hero bar
- CMS: Full PHP admin for hero, element sections, projects, team management
- Monorepo: apps/web (React SPA) + apps/cms-php (PHP backend)
- SEO: Build-time prerendering with react-helmet-async
- Deploy: Vercel previews per PR + Hostinger Git auto-deploy for production
📸 Screenshots
Home — 3D scroll experience with Five Elements
Fire Element — "It all begins with a spark" section
Glass Design System
SaaS glassmorphism design system generator — build, preview, and export production-ready glass UI with an immutable base engine and customizable design tokens.
Running6 PRs
🎨 UX Case Study
Problem Statement
Designers wanting glassmorphism UI had to manually create glass effects in CSS — inconsistent blur levels, opacity bands, and saturation settings across projects. There was no systematic way to generate, preview, and export glass components that maintained aesthetic consistency.
Core Architecture Decision
The Glass Base Engine is LOCKED — files under src/lib/glass-engine/ use deepFreeze and as const. Blur levels, opacity bands, saturation, borders, and glows cannot be overridden at runtime. The Token System above only selects from the engine's enums. This ensures every exported design maintains the same premium quality, regardless of user customization.
Monetization (3-Tier)
🌟
Free ($0)
1 design system, watermarked CSS export, basic preview.
💎
Pro ($9/mo)
5 systems, clean CSS/HTML export, Figma tokens.
👑
Studio ($49/mo)
Unlimited systems, 3 team members, approval workflows.
🔗 Links
Deploy
Vercel + Neon PostgreSQL
🛠 Tech Stack
Next.js 15React 19TypeScript (strict)Tailwind CSS v4PrismaPostgreSQL (Neon)Auth.js v5StripeRazorpaypnpm
📝 Key Features
- Locked Engine: Immutable blur, opacity, saturation, borders, glows — deepFreeze enforced
- Token System: Brand, spacing, typography tokens that select from engine enums only
- Export: CSS, HTML, Figma tokens, JSON exports (watermarked on Free)
- Glass Mesh: Dynamic radial gradient background system
- Dual Payment: Stripe (USD) + Razorpay (INR) for global coverage
- Plan Gating: Centralized in src/lib/plans/ — never hardcoded in components
Nest Weaver Interiors
Premium interior design website with 3D walkthroughs, project galleries, and CMS admin panel.
Suspended9 PRs (6 merged)126 ACUs
🎨 UX Case Study
Problem Statement
An interior design business needed a premium online presence to showcase completed projects, offer 3D room visualizations, and allow potential clients to explore services and request consultations. The existing online presence was limited to social media with no dedicated portfolio site.
Design Decisions
🏠
3D Walkthroughs
Immersive room visualization letting clients explore designs before committing.
📷
Gallery-First
Full-width image galleries with before/after comparisons for each project.
📝
CMS Admin
Content management for portfolio items, service descriptions, and testimonials.
★
Premium Aesthetic
Clean, minimal design with large imagery to let the interior work speak for itself.
🛠 Tech Stack
ReactTypeScriptViteTailwind CSS
📸 Screenshots
Home — Premium hero section with 3D walkthrough teaser
About — Interior design description & services overview
AetherNest
SaaS project management platform with workspaces, global search, automation engine, analytics dashboard, client portal, and AetherBot AI assistant.
Suspended4 PRs (2 merged)278 ACUs
🎨 UX Case Study
Problem Statement
Teams needed a modern project management tool that combined the simplicity of Trello with the power of Jira, plus AI-assisted workflow automation. Existing tools lacked native automation engines and forced teams to use third-party integrations (Zapier, Make) for basic workflow rules.
Key UX Features
🔍
Cmd+K Search
Global search across all workspaces, projects, tasks — keyboard-first navigation.
⚡
Automation Engine
Native if-then rules: "When task moves to Done, notify PM and close sprint".
📊
Nest Analytics
Burndown charts, velocity tracking, team utilization — all without Jira's complexity.
🤖
AetherBot
AI assistant for task creation, status updates, and sprint planning assistance.
🛠 Tech Stack
Next.jsTypeScriptReact
📸 Screenshots
Landing — Hero with product preview and CTA
Workspace — Project management app with task boards
Pricing — Three-tier SaaS pricing page
ProjectFlow & Accounting
Multi-tenant agile project management + local-first accounting system with real-time collaboration, WebSocket updates, and PHP+MySQL backend for Hostinger.
Suspended5 PRs312 ACUs
🎨 UX Case Study
Problem Statement
Small agencies needed a unified tool for both project management AND financial tracking. Using separate tools (Jira + QuickBooks) meant double data entry, no linked invoices-to-projects, and no real-time collaboration for distributed Indian teams.
Architecture Highlights
⚡
Real-Time
WebSocket-based live updates — see task changes instantly across the team.
👥
Multi-Tenant
Organization → Workspace → Project hierarchy with role-based access.
💰
Accounting
Local-first financial tracking with employee management and expense reports.
🚀
Dual Backend
FastAPI (primary) + PHP+MySQL (Hostinger deploy) for flexibility.
🛠 Tech Stack
FastAPIReactTypeScriptWebSocketPython 3.12SQLite / PostgreSQLJWT Authshadcn/uiPHPMySQL
📸 Screenshots
Login — Pixel Nest Enterprise Accounting Platform sign-in
ClassyStay Original
The original ClassyStay hospitality website — later rebuilt into the full platform.
Suspended3 PRs157 ACUs
🎨 UX Case Study
Evolution Story
This was the initial replication project — studying the existing ClassyStay website to understand its information architecture, visual language, and user flows. The insights gathered here directly informed the design of the full ClassyStay Platform, which expanded from a simple booking site to a comprehensive hospitality management ecosystem with Super Admin, PMS, RFID, and analytics modules.
📸 Screenshots
Home — ClassyStay Original booking website
AsiansVibe Prototype
Interactive UI prototype for a content and community platform.
Suspended24 ACUs
🎨 UX Case Study
Design Intent
The AsiansVibe prototype explored a modern, engaging interface for a cultural content and community platform. The focus was on creating a visually rich, scroll-driven experience that would appeal to young Asian diaspora audiences. The prototype validated the core navigation model and content card layouts before moving to full development.
Sai Systems Premium Website
Premium corporate website for Sai Systems — fire safety, security, smart automation & electrical solutions provider. ISO 9001:2015 certified, CRISIL rated, serving Mahindra, Tata, Cisco, Deloitte & more since 2007.
Suspended13 ACUs
🎨 UX Case Study
Problem Statement
Sai Systems, a fire safety & security solutions company with 18+ years of experience and 500+ projects delivered, needed a modern, premium corporate website to replace their outdated online presence. The website had to showcase their comprehensive service portfolio (fire hydrant systems, sprinklers, fire suppression, alarms, surveillance, PA systems, electrical solutions), highlight ISO & CRISIL certifications, and feature major clients like Mahindra, Tata Technologies, Cisco, Deloitte, Radisson Blu, and Ubisoft.
Design Decisions
🔥
Service Cards
7 service categories with hero images, descriptions, and detail pages — Fire Hydrant, Sprinklers, Suppression, Alarms, Surveillance, PA Systems, Electrical.
🏆
Trust Signals
ISO 9001:2015 badge, CRISIL rating, Govt. MFS license, 18+ years experience, 500+ projects, 98% client retention — prominently displayed.
🏙
Client Marquee
Infinite scroll marquee featuring logos of Mahindra, Tata, Cisco, Deloitte, Radisson Blu, Ubisoft, Tech Mahindra, Brose.
🌓
Dark/Light Theme
Toggle between dark and light themes — premium feel with both modes fully designed.
🛠 Tech Stack
ReactTypeScriptViteTailwind CSSFramer MotionDeployed on DevinApps
📝 Key Features
- Hero Carousel: 4-slide auto-rotating hero with Industrial Power, Fire Protection, Smart Security, Automation themes
- 7 Service Pages: Fire Hydrant, Automatic Sprinklers, Advanced Fire Suppression, Fire Alarm & Detection, Surveillance & Access Control, Emergency PA Systems, Electrical Solutions
- Client Showcase: Infinite marquee with corporate logos — Mahindra, Tata, Cisco, Deloitte, Radisson Blu, Ubisoft
- Trust Section: ISO 9001:2015, CRISIL Rated, Govt. Licensed (MFS) badges with stats (18+ years, 500+ projects, 98% retention)
- Theme Toggle: Dark/Light mode with consistent branding across both themes
- Contact: Request callback, email (inquiry@saisystem.info), phone (+91-9890639621, +91-9850829621)
📸 Screenshots
Home — Hero carousel with "Industrial Power" tagline
About — Building Trust Since 2007, ISO & CRISIL badges
Services — Fire Hydrant & Sprinkler service cards
Video Branding
Platform-first video branding strategy for social media marketing.
Suspended13 ACUs
🎨 UX Case Study
Strategy Overview
This project developed a platform-first video branding strategy — creating video content optimized for each social media platform's unique format, algorithm, and audience behavior. The strategy covered short-form (Reels/Shorts), long-form (YouTube), and story-format content, with brand guidelines for consistent visual identity across all platforms.
LMS SaaS Platform
High-fidelity SaaS UI prototype (V3) for a comprehensive Learning Management System — designed for educational institutions and corporate training with modern dashboard-driven experience.
Design Phase1 Figma FileV3 Prototype
🎨 UX Case Study
Problem Statement
Educational institutions and corporate training teams need a modern, intuitive LMS that goes beyond basic course hosting. Legacy LMS platforms suffer from poor UX, no real-time analytics, and fragmented experiences. This high-fidelity SaaS prototype (now in V3) addresses these gaps with a polished, dashboard-driven design that prioritizes learner engagement, instructor productivity, and admin oversight.
Target Users & Personas
🎓 Students / Learners
Enroll in courses, track progress, complete assignments, take quizzes, earn certificates. Need: intuitive navigation, progress dashboards, mobile-friendly access, gamification elements.
📚 Instructors / Trainers
Create courses, manage content, grade assignments, track student performance. Need: rich content editor, analytics per course, bulk operations, communication tools.
💻 Platform Administrators
Manage users, configure platform settings, oversee all courses, generate reports. Need: global analytics, user management, subscription/billing controls, content moderation.
Design Decisions
📊
Dashboard-First
Every role lands on a personalized dashboard with KPIs, recent activity, and quick actions — no hunting through menus.
🎨
SaaS-Ready UI
Multi-tenant architecture reflected in the UI — org switcher, role-based nav, subscription tiers, white-label theming.
🚀
V3 Iteration
Third major design iteration incorporating feedback from V1/V2 — refined information hierarchy, streamlined workflows, improved accessibility.
🌱
Engagement-Driven
Progress bars, achievement badges, streak counters, and social learning elements designed to boost completion rates.
User Journey Flow
Admin creates org→
Instructor builds course→
Students enroll→
Learn & complete modules→
Take assessments→
Earn certificates
🛠 Design Stack
FigmaSaaS DesignUI/UXHigh-Fidelity PrototypeDashboard DesignEdTech
📝 Platform Modules
- Course Management: Create, organize, and publish courses with modules, lessons, quizzes, and assignments
- Student Dashboard: Personalized learning hub with enrolled courses, progress tracking, upcoming deadlines, and achievements
- Instructor Dashboard: Course analytics, student performance tracking, grade management, and content authoring tools
- Admin Panel: Global platform management — user administration, subscription billing, analytics reporting, and system configuration
- Assessment Engine: Quizzes, exams, and assignments with auto-grading, rubrics, and detailed feedback
- Certificate System: Automated certificate generation upon course completion with customizable templates
💫 Key Design Features
- High-Fidelity V3: Third iteration of the design — polished pixel-perfect screens ready for developer handoff
- SaaS Multi-Tenant: Organization switcher, role-based navigation, subscription tier management built into the UI
- Responsive Dashboard: Data-rich dashboards with charts, KPIs, and actionable insights for every user role
- Modern UI Patterns: Sidebar navigation, command palette, breadcrumbs, data tables, and card-based layouts
- Engagement Features: Progress visualization, achievement badges, learning streaks, and social elements
HRA Loyalty Platform
A comprehensive multi-role loyalty and rewards platform designed with glassmorphism UI — spanning Customer App, Cashier App, Store Manager Dashboard, and Super Admin Dashboard for end-to-end loyalty program management.
Design Phase4 Figma Files
🎨 UX Case Study
Problem Statement
Hospitality and retail businesses need a unified loyalty system that connects customers, cashiers, store managers, and administrators — each with different needs and workflows. Existing loyalty programs are either customer-only (no POS integration) or admin-only (no customer-facing app). The HRA Loyalty Platform bridges this gap with a glassmorphism-designed multi-app ecosystem that covers the entire loyalty lifecycle from point earning to redemption to analytics.
Target Users & Personas
👤 Customer (Mobile App)
End users who earn and redeem loyalty points. Needs: view points balance, browse rewards catalog, track transaction history, receive personalized offers. The glassmorphism design provides a premium, modern feel.
💰 Cashier (POS App)
Point-of-sale operators who process loyalty transactions. Needs: quick customer lookup, point accrual on purchase, reward redemption at checkout, transaction validation. The glassmorphism UI ensures clarity during fast-paced operations.
💼 Store Manager (Dashboard)
Location managers overseeing loyalty performance at their store. Needs: daily/weekly loyalty metrics, customer engagement stats, staff performance, campaign tracking, inventory of rewards.
👑 Super Admin (Dashboard)
Platform-wide administrators managing the entire loyalty program. Needs: global analytics, multi-store management, reward program configuration, user/role management, campaign creation, financial reporting.
Design Decisions
🌟
Glassmorphism Design
Consistent frosted-glass aesthetic across all 4 apps — translucent cards, subtle blur, vibrant gradients. Creates a premium, cohesive brand experience.
📱
Mobile-First Customer App
Customer and Cashier apps designed mobile-first for on-the-go usage — quick actions, thumb-friendly layouts, scan-to-earn flows.
📊
Dashboard Analytics
Store Manager and Super Admin dashboards with rich data visualizations — charts, KPIs, trend analysis, real-time metrics.
👥
Role-Based Architecture
4 distinct interfaces tailored to each role's workflow — no one-size-fits-all UI. Each persona gets exactly what they need.
User Journey Flow
Customer earns points→
Cashier validates at POS→
Points credited to account→
Customer browses rewards→
Redeems at store→
Manager tracks metrics
Super Admin creates campaign→
Configures point rules→
Sets reward catalog→
Monitors engagement→
Analyzes ROI
🛠 Design Stack
FigmaGlassmorphismUI/UX DesignMobile App DesignDashboard DesignMulti-Role System
📝 Figma Files Overview
- Customer App: Mobile-first loyalty app with glassmorphism UI — points balance, rewards catalog, transaction history, personalized offers, QR code scanning
- Cashier App: POS-integrated loyalty app with glassmorphism design — customer lookup, point accrual, reward redemption, transaction processing at checkout
- Store Manager Dashboard: Location-level analytics dashboard — daily/weekly loyalty metrics, customer engagement, staff performance, campaign tracking
- Super Admin Dashboard: Platform-wide admin panel — global analytics, multi-store management, reward program configuration, user management, campaign creation, financial reporting
💫 Key Design Features
- Glassmorphism Language: Consistent frosted-glass aesthetic with translucent cards, backdrop blur, and gradient accents across all 4 apps
- 4-Role Architecture: Customer, Cashier, Store Manager, Super Admin — each with tailored UX flows and dashboards
- Mobile + Desktop: Customer & Cashier apps designed mobile-first; Manager & Admin dashboards optimized for desktop
- Loyalty Lifecycle: Complete flow from point earning (customer purchase) to redemption (reward claim) to analytics (ROI reporting)
- Premium Visual Identity: Dark theme with vibrant gradients, glass-card components, and modern typography throughout
