Skip to content

Commit 847eb3f

Browse files
apsinghdevapsinghdev
authored
Merge pull request #198 from apsinghdev/chore/module-9
[chore] add module 9
2 parents 5fb2bb3 + 282430f commit 847eb3f

4 files changed

Lines changed: 422 additions & 5 deletions

File tree

‎.cursor/rules/general_rules.mdc‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
alwaysApply: true
3+
---
4+
5+
# Opensox AI - Cursor Rules
6+
7+
## Code Style
8+
9+
### Comments
10+
- always use lowercase when writing comments
11+
- avoid unnecessary comments; code should be self-documenting when possible
12+
- use comments to explain "why", not "what"
13+
14+
15+
## Monorepo Structure
16+
- this is a turborepo monorepo
17+
- shared packages live in `packages/`
18+
- apps live in `apps/` (web, api, backend, docs)
19+
- respect package boundaries
20+
- use workspace dependencies properly
21+

‎apps/api/.cursor/rules/backend_rules.mdc‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
alwaysApply: true
3+
---
4+
5+
# Backend Development Rules
6+
7+
## API Design & Security
8+
9+
### Authentication & Authorization
10+
- always validate user authentication before processing protected routes
11+
- use middleware for auth checks; never duplicate auth logic in route handlers
12+
- encrypt sensitive data (passwords, tokens, API keys) before storing in database
13+
- implement rate limiting on all public endpoints to prevent abuse
14+
- validate and sanitize all user inputs to prevent injection attacks
15+
16+
### Error Handling
17+
- never expose internal error details or stack traces in production responses
18+
- use consistent error response format: `{ success: false, error: { code, message } }`
19+
- log errors with context (userId, endpoint, timestamp) for debugging
20+
- handle database connection failures gracefully with retry logic
21+
- return appropriate HTTP status codes (400 for validation, 401 for auth, 500 for server errors)
22+
23+
### Database Operations
24+
- always use parameterized queries or ORM methods to prevent SQL injection
25+
- wrap database transactions in try-catch blocks with proper rollback on failure
26+
- index frequently queried fields for performance optimization
27+
- avoid N+1 queries; use eager loading or batch queries when fetching related data
28+
- validate data against schema before database operations
29+
30+
## Code Organization
31+
32+
### Service Layer Pattern
33+
- separate business logic into service files (`services/` directory)
34+
- keep route handlers thin; delegate complex logic to services
35+
- make services testable by avoiding direct database calls in business logic
36+
- export pure functions from services for easier unit testing
37+
38+
### Type Safety
39+
- define strict TypeScript interfaces for request/response bodies
40+
- use zod or similar for runtime validation of incoming data
41+
- avoid `any` type; use `unknown` for truly dynamic data and narrow with type guards
42+
- export types from shared package for consistency across apps
43+
44+
### Environment & Configuration
45+
- never commit `.env` files or hardcode secrets in code
46+
- validate required environment variables on startup; fail fast if missing
47+
- use type-safe environment variable access with proper defaults
48+
- document all required environment variables in `.env.example`
49+
50+
## Performance & Reliability
51+
52+
### Async Operations
53+
- always await async operations; never forget to handle promise rejections
54+
- use connection pooling for database and external service clients
55+
- implement timeouts for external API calls to prevent hanging requests
56+
57+
### Monitoring & Logging
58+
- log all critical operations (auth attempts, payment processing, data mutations)
59+
- include correlation IDs in logs for request tracing across services
60+
- use structured logging (JSON format) for easier parsing and analysis
61+
- never log sensitive information (passwords, tokens, credit card numbers)

‎apps/web/.cursor/rules/frontend_rules.mdc‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
---
2+
alwaysApply: true
3+
---
4+
## UI Component Guidelines
5+
6+
### Design System - CRITICAL
7+
**Always follow the design system defined in `apps/web/src/lib/design-tokens.ts` and `apps/web/tailwind.config.ts`**
8+
9+
#### Color Usage
10+
- **NEVER** use hardcoded hex values (e.g., `#5519f7`) directly in components
11+
- **ALWAYS** reference colors from the design token system using Tailwind classes
12+
- Use semantic color names that describe purpose, not appearance
13+
14+
#### Available Color Palettes
15+
16+
**Brand Colors:**
17+
- `bg-brand-purple` - primary brand color for ctas, highlights
18+
- `bg-brand-purple-light` - hover states
19+
- `bg-brand-purple-dark` - depth and contrast
20+
21+
**Background/Surface Colors (Landing Page):**
22+
- `bg-surface-primary` - main app background (#101010)
23+
- `bg-surface-secondary` - sidebar, secondary surfaces (#141414)
24+
- `bg-surface-tertiary` - content areas, cards (#1A1A1A)
25+
- `bg-surface-elevated` - elevated cards, modals (#1E1E1E)
26+
- `bg-surface-hover` - hover states for dark surfaces
27+
- `bg-surface-card` - card backgrounds
28+
29+
**Background/Surface Colors (Dashboard):**
30+
- `bg-dash-base` - page background (darkest)
31+
- `bg-dash-surface` - panels, cards, navbars
32+
- `bg-dash-raised` - buttons, inputs, interactive surfaces
33+
- `bg-dash-hover` - hover states for raised items
34+
- `bg-dash-border` - thin dividers, borders
35+
36+
**Border Colors:**
37+
- `border` or `border-border` - primary border (#252525)
38+
- `border-light` - lighter borders for nested elements
39+
- `border-dark` - darker borders
40+
- `border-focus` - focus states (brand purple)
41+
42+
**Text Colors:**
43+
- `text-text-primary` - primary white text (#ffffff)
44+
- `text-text-secondary` - secondary text (#e1e1e1)
45+
- `text-text-tertiary` - tertiary/muted text (#d1d1d1)
46+
- `text-text-muted` - very muted text (#a1a1a1)
47+
- `text-text-light` - light gray for copyright/footer
48+
49+
**Link Colors:**
50+
- `text-link` - default link color (blue-400)
51+
- `text-link-hover` - hover state (blue-300)
52+
53+
**Status Colors:**
54+
- Success: `bg-success-bg`, `text-success-text`, `border-success-border`
55+
- Error: `bg-error-bg`, `text-error-text`, `border-error-border`
56+
- Warning: `bg-warning-bg`, `text-warning-text`, `border-warning-border`
57+
- Info: `bg-info-bg`, `text-info-text`, `border-info-border`
58+
59+
#### Typography
60+
- Use `font-sans` for standard UI text (Geist Sans)
61+
- Use `font-mono` for code, technical content, or monospace needs (DM Mono)
62+
63+
#### Spacing
64+
- Follow Tailwind's spacing scale (0.25rem increments)
65+
- For section padding:
66+
- Mobile: `p-4` (1rem)
67+
- Desktop: `p-[60px]`
68+
69+
#### Border Radius
70+
- Small elements: `rounded-lg` (0.5rem)
71+
- Medium elements: `rounded-xl` (1rem)
72+
- Large elements: `rounded-2xl` (1.5rem)
73+
- Buttons: `rounded-[16px]`
74+
75+
#### Animations
76+
- Fast transitions: `duration-100` (0.1s)
77+
- Normal transitions: `duration-300` (0.3s)
78+
- Slow transitions: `duration-600` (0.6s)
79+
- Available custom animations:
80+
- `animate-accordion-down`, `animate-accordion-up`
81+
- `animate-scrollRight`, `animate-scrollLeft`
82+
- `animate-customspin`, `animate-spin-slow`, `animate-spin-slow-reverse`
83+
- `animate-marquee`, `animate-marquee-vertical`
84+
- `animate-shine`
85+
86+
### Component Structure
87+
- prefer functional components with typescript
88+
- use proper typescript types, avoid `any`
89+
- extract reusable logic into custom hooks
90+
- keep components focused and single-responsibility
91+
92+
### Props & State
93+
- use descriptive prop names
94+
- define prop types using typescript interfaces or types
95+
- prefer controlled components over uncontrolled
96+
- use zustand for global state (located in `src/store/`)
97+
98+
### Imports
99+
- organize imports: react → third-party → local components → utils → types
100+
- use absolute imports from `@/` prefix when available
101+
- remove unused imports
102+
103+
## File Organization
104+
- place shared components in `apps/web/src/components/`
105+
- place page-specific components near their page
106+
- co-locate tests with the code they test
107+
- keep utility functions in `apps/web/src/lib/` or `apps/web/src/utils/`
108+
109+
## Naming Conventions
110+
- components: PascalCase (e.g., `UserProfile.tsx`)
111+
- files/folders: kebab-case or camelCase for utilities
112+
- constants: UPPER_SNAKE_CASE
113+
- functions/variables: camelCase
114+
- types/interfaces: PascalCase with descriptive names
115+
116+
## Accessibility
117+
- include proper aria labels
118+
- ensure keyboard navigation works
119+
- maintain proper heading hierarchy
120+
- provide alt text for images
121+
122+
## Performance
123+
- use dynamic imports for code splitting when appropriate
124+
- optimize images (use next/image)
125+
- memoize expensive computations
126+
- avoid unnecessary re-renders
127+
128+
You are a Senior Front-End Developer and an Expert in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS and modern UI/UX frameworks (e.g., TailwindCSS, Shadcn, Radix). You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.
129+
130+
- Follow the user’s requirements carefully & to the letter.
131+
- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
132+
- Confirm, then write code!
133+
- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at Code Implementation Guidelines .
134+
- Focus on easy and readability code, over being performant.
135+
- Fully implement all requested functionality.
136+
- Leave NO todo’s, placeholders or missing pieces.
137+
- Ensure code is complete! Verify thoroughly finalised.
138+
- Include all required imports, and ensure proper naming of key components.
139+
- Be concise Minimize any other prose.
140+
- If you think there might not be a correct answer, you say so.
141+
- If you do not know the answer, say so, instead of guessing.
142+
143+
### Coding Environment
144+
The user asks questions about the following coding languages:
145+
- ReactJS
146+
- NextJS
147+
- JavaScript
148+
- TypeScript
149+
- TailwindCSS
150+
- HTML
151+
- CSS
152+
153+
### Code Implementation Guidelines
154+
Follow these rules when you write code:
155+
- Use early returns whenever possible to make the code more readable.
156+
- Always use Tailwind classes for styling HTML elements; avoid using CSS or tags.
157+
- Use “class:” instead of the tertiary operator in class tags whenever possible.
158+
- Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.
159+
- Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.
160+
- Use consts instead of functions, for example, “const toggle = () =>”. Also, define a type if possible.

0 commit comments

Comments
 (0)