Cursor rule

1# SneakInMarket Project Conventions
2 
3## Project-Specific Requirements
4 
5- **Marketplace Focus**: Sneakers, clothing, accessories, electronics, gaming, collectibles
6- **Seller-Buyer Platform**: Support both listing creation and purchasing flows
7- **Payment Integration**: Razorpay for Indian market payments
8- **Mobile-First**: Optimized for mobile users in Indian market
9- **Regional Features**: Pincode validation, address management, local delivery
10 
11## Enum Usage Requirements
12 
13- **Always use enums from `src/constants/enums.ts`**
14- **Never hardcode values that exist in enums**
15- **Use enum types for TypeScript interfaces**
16 
17### Key Enums to Use
18 
19```typescript
20// Routes - use ROUTE_NAMES for navigation
21import { ROUTE_NAMES } from "@/constants/enums";
22navigate(ROUTE_NAMES.HOME);
23 
24// Product conditions - use PRODUCT_CONDITIONS
25import { PRODUCT_CONDITIONS } from "@/constants/enums";
26const condition = PRODUCT_CONDITIONS.NEW;
27 
28// Categories - use CATEGORY_IDS
29import { CATEGORY_IDS } from "@/constants/enums";
30const category = CATEGORY_IDS.SNEAKERS;
31 
32// Listing status - use LISTING_STATUS
33import { LISTING_STATUS } from "@/constants/enums";
34const status = LISTING_STATUS.APPROVED;
35```
36 
37## Component Structure Patterns
38 
39- **Feature Components**: Place in `src/components/` (e.g., `Cart/`, `checkout/`)
40- **UI Components**: Place in `src/components/ui/` (shadcn/ui style)
41- **Page Components**: Place in `src/pages/`
42- **Context Providers**: Place in `src/contexts/`
43 
44## Authentication Flow
45 
46- **Public Routes**: Use `PublicRoute` component for login/signup
47- **Protected Routes**: Use `ProtectedRoute` component for authenticated users
48- **Admin Routes**: Use `AdminRoute` component for admin-only access
49- **Context**: Use `useAuth()` hook for authentication state
50 
51## Cart and Checkout Flow
52 
53- **Cart Context**: Use `useCart()` hook for cart management
54- **Multi-step Checkout**: Cart → Shipping → Payment
55- **Address Management**: Use `useAddressStorage()` hook
56- **Payment Integration**: Razorpay with proper error handling
57 
58## Product Management
59 
60- **Listing Creation**: Multi-step form with image upload
61- **Image Compression**: Use `imageCompression` utility
62- **Status Management**: Draft → Review → Approved/Rejected
63- **Condition Badges**: Use `ConditionBadge` component
64 
65## Mobile-First Design Requirements
66 
67- **Touch Targets**: Minimum 44px for interactive elements
68- **Responsive Breakpoints**: 320px+ (mobile), 768px+ (tablet), 1024px+ (desktop)
69- **Navigation**: Mobile-friendly navigation patterns
70- **Forms**: Optimized for mobile input
71 
72## Error Handling Patterns
73 
74- **Toast Notifications**: Use `sonner` for user feedback
75- **Loading States**: Skeleton components and spinners
76- **Form Validation**: Zod schemas with clear error messages
77- **API Errors**: Graceful fallbacks and retry mechanisms
78 
79## Performance Requirements
80 
81- **Image Optimization**: Use `OptimizedImage` component
82- **Lazy Loading**: Implement for heavy components
83- **Bundle Splitting**: Consider for large pages
84- **Caching**: Implement appropriate caching strategies
85 
86## Testing Scenarios
87 
88- **User Flows**: Complete buyer and seller journeys
89- **Mobile Experience**: Test on various screen sizes
90- **Payment Flow**: Test successful and failed payment scenarios
91- **Form Validation**: Test all validation rules
92- **Error States**: Test error handling and recovery
93 
94## Code Organization
95 
96- **Import Order**: External → Internal → Types → Utils
97- **File Structure**: Follow existing patterns
98- **Naming**: Use descriptive, consistent names
99- **Documentation**: Comment complex logic and business rules
100 
101## Build and Deployment
102 
103- **TypeScript**: Strict mode, no compilation errors
104- **Bundle Size**: Monitor and optimize large chunks
105- **Environment**: Use proper environment variables
106- **Build Command**: Always run `npm run build` before committing
107  description:
108  globs:
109  alwaysApply: false
110 
111---
112