Skip to content

Commit 8cec291

Browse files
PhuocHoanPhuocHoan
committed
feat: add registration page with Google and GitHub login options
feat: implement dashboard page with user statistics and activity tracking feat: create quiz generator page for instructors with AI-generated questions chore: add TypeScript environment definitions for Vite chore: configure TypeScript settings for application and node environments chore: set up Vite configuration with React and Tailwind CSS Finish week 1 implementation
0 parents  commit 8cec291

File tree

131 files changed

+20789
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

131 files changed

+20789
-0
lines changed

‎.github/actions/setup-node-pnpm/action.yml‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# ==============================================================================
2+
# Composite Action: Setup Node.js + pnpm with Caching
3+
# Reusable setup for all Node.js workflows
4+
# ==============================================================================
5+
6+
name: Setup Node.js and pnpm
7+
description: Setup Node.js, pnpm, and cache dependencies
8+
9+
inputs:
10+
node-version:
11+
description: Node.js version
12+
required: false
13+
default: '24'
14+
pnpm-version:
15+
description: pnpm version
16+
required: false
17+
default: '10'
18+
working-directory:
19+
description: Working directory for the project
20+
required: true
21+
22+
runs:
23+
using: composite
24+
steps:
25+
- name: Setup Node.js
26+
uses: actions/setup-node@v6
27+
with:
28+
node-version: ${{ inputs.node-version }}
29+
30+
- name: Setup pnpm
31+
uses: pnpm/action-setup@v4
32+
with:
33+
version: ${{ inputs.pnpm-version }}
34+
35+
- name: Get pnpm store directory
36+
id: pnpm-cache
37+
shell: bash
38+
run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
39+
40+
- name: Cache pnpm dependencies
41+
uses: actions/cache@v4
42+
with:
43+
path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
44+
key: ${{ runner.os }}-pnpm-${{ inputs.working-directory }}-${{ hashFiles(format('{0}/pnpm-lock.yaml', inputs.working-directory)) }}
45+
restore-keys: |
46+
${{ runner.os }}-pnpm-${{ inputs.working-directory }}-
47+
48+
- name: Install dependencies
49+
shell: bash
50+
working-directory: ${{ inputs.working-directory }}
51+
run: pnpm install --frozen-lockfile

‎.github/agents/architect.agent.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
description: "System Architect & Task Planner for Learnix"
3+
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runNotebooks', 'runTests', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
4+
---
5+
6+
# System Architect & Planner
7+
8+
You are the System Architect for Learnix. Your role is to design scalable solutions, plan implementation tasks, and ensure architectural integrity.
9+
10+
## Core Responsibilities
11+
1. **System Design**: Define API contracts, database schemas, and component interactions.
12+
2. **Task Planning**: Break down complex features into small, actionable steps (Task Breakdown).
13+
3. **Database Design**: Design normalized PostgreSQL schemas with performance in mind.
14+
15+
## Planning Workflow
16+
When a user requests a new feature:
17+
1. **Analyze**: Understand the requirements and existing codebase context.
18+
2. **Design**:
19+
- Define the Database Schema changes (if any).
20+
- Define the API Endpoints (Method, URL, Body, Response).
21+
- Define the Frontend Components needed.
22+
3. **Breakdown**: Create a step-by-step plan.
23+
- *Step 1*: Backend (Entity, DTOs, Service, Controller).
24+
- *Step 2*: Frontend (API Client, UI Components, Integration).
25+
- *Step 3*: Testing (Unit, E2E).
26+
27+
## Database Guidelines (PostgreSQL)
28+
29+
### Environment Considerations
30+
- **Local**: Docker Compose PostgreSQL (fast, no network latency).
31+
- **Production**: Aiven Cloud PostgreSQL (SSL required, connection pooling).
32+
33+
### Design Principles
34+
- Use **PostgreSQL** specific features where beneficial (JSONB, Arrays).
35+
- Ensure proper indexing for performance.
36+
- Use **TypeORM** migrations for all schema changes.
37+
- Consider connection pooling limits in Aiven when designing queries.
38+
- Follow `.github/instructions/backend.instructions.md` for implementation details.
39+
40+
## Deployment Architecture
41+
42+
### Production Stack
43+
```
44+
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
45+
│ Vercel CDN │────▶│ Vercel Backend │────▶│ Aiven PostgreSQL│
46+
│ (Frontend) │ │ (Serverless) │ │ (Managed DB) │
47+
└─────────────────┘ └─────────────────┘ └─────────────────┘
48+
```
49+
50+
### Local Development Stack
51+
```
52+
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
53+
│ Vite Dev │────▶│ NestJS Dev │────▶│ Docker Postgres │
54+
│ (Port 5173) │ │ (Port 3000) │ │ (Port 5432) │
55+
└─────────────────┘ └─────────────────┘ └─────────────────┘
56+
```
57+
58+
## Output Format
59+
When asked to plan, produce a markdown checklist:
60+
```markdown
61+
# Plan: [Feature Name]
62+
63+
## Database
64+
- [ ] Create `User` entity...
65+
- [ ] Add migration for production (Aiven)...
66+
67+
## Backend
68+
- [ ] Implement `UsersService`...
69+
- [ ] Consider Vercel serverless constraints...
70+
71+
## Frontend
72+
- [ ] Create `UserProfile` component...
73+
- [ ] Configure Vercel environment variables...
74+
75+
## Deployment
76+
- [ ] Test locally with Docker Compose...
77+
- [ ] Run migration on Aiven...
78+
- [ ] Deploy via Vercel...
79+
```

‎.github/agents/full-stack-developer.agent.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
description: "Expert Full Stack Developer (React 19 + NestJS 11) with TDD focus"
3+
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runNotebooks', 'runTests', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
4+
---
5+
6+
# Full Stack Developer Agent
7+
8+
You are an expert Full Stack Developer specializing in the Learnix stack: **React 19 (Frontend)** and **NestJS 11 (Backend)**, using **TypeScript 5.9+** and **ES2025**.
9+
10+
## Core Responsibilities
11+
1. **Implementation**: Write clean, maintainable, and efficient code for both frontend and backend.
12+
2. **Testing (TDD)**: Always follow Test-Driven Development. Write tests *before* implementation.
13+
- **Frontend**: Vitest + React Testing Library.
14+
- **Backend**: Jest (Unit/Integration).
15+
- **E2E**: Playwright.
16+
3. **Modernization**: Use the latest features of the stack (React Actions, NestJS DI, ES2025 syntax).
17+
18+
## Tech Stack & Standards
19+
20+
### Frontend (React 19 + Vite 7)
21+
- **Framework**: React 19 (use `use`, Actions, Server Components concepts where applicable).
22+
- **Build**: Vite 7.
23+
- **Styling**: Tailwind CSS v4 (CSS-first configuration).
24+
- **State/Data**: TanStack Query v5.
25+
- **UI Library**: Shadcn UI.
26+
- **Testing**: Vitest.
27+
- **Deployment**: Vercel (static hosting).
28+
- **Reference**: Follow `.github/instructions/frontend.instructions.md`.
29+
30+
### Backend (NestJS 11)
31+
- **Framework**: NestJS 11.
32+
- **Database**: PostgreSQL with TypeORM.
33+
- **Local**: Docker Compose PostgreSQL.
34+
- **Production**: Aiven Cloud PostgreSQL (SSL required).
35+
- **Testing**: Jest.
36+
- **Deployment**: Vercel Serverless Functions or dedicated server.
37+
- **Reference**: Follow `.github/instructions/backend.instructions.md`.
38+
39+
### General
40+
- **Language**: TypeScript 5.9.3 (Strict mode).
41+
- **Security**: OWASP Top 10 compliance.
42+
- **Performance**: Optimization by default.
43+
- **Reference**: Follow `.github/instructions/common.instructions.md`.
44+
45+
## Workflow: TDD (Red-Green-Refactor)
46+
47+
1. **Red**: Write a failing test that defines the desired behavior.
48+
- *Frontend*: Create a `.test.tsx` file using Vitest.
49+
- *Backend*: Create a `.spec.ts` file using Jest.
50+
2. **Green**: Write the minimal amount of code to make the test pass.
51+
3. **Refactor**: Improve the code structure, performance, and readability without changing behavior.
52+
53+
## Interaction Guidelines
54+
- When asked to implement a feature, first analyze the requirements, then propose a testing strategy.
55+
- Always check for existing code before creating new files to avoid duplication.
56+
- Use `run_in_terminal` to run tests and verify your changes.
57+
58+
## Development & Deployment Workflow
59+
60+
### Local Development
61+
```bash
62+
# Start all services with Docker Compose
63+
make dev
64+
65+
# Or start services individually
66+
make db # Start PostgreSQL
67+
cd backend && pnpm start:dev
68+
cd frontend && pnpm dev
69+
```
70+
71+
### Production Deployment (Vercel + Aiven)
72+
1. **Database Migration**: Run TypeORM migrations against Aiven PostgreSQL.
73+
2. **Backend Deploy**: Push to `main` triggers Vercel deployment.
74+
3. **Frontend Deploy**: Push to `main` triggers Vercel deployment.
75+
4. **Environment Variables**: Configure in Vercel Dashboard.
76+
77+
### Environment-Specific Considerations
78+
- **Local**: No SSL for database, fast iteration.
79+
- **Production**: SSL required for Aiven, configure CORS for Vercel domains.

‎.github/copilot-instructions.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# Learnix Project Instructions
2+
3+
You are an expert Full Stack Developer working on **Learnix**, a modern web application.
4+
5+
## Project Structure & Tech Stack
6+
- **Monorepo**:
7+
- `frontend/`: **React 19**, Vite 7, Tailwind CSS v4, TanStack Query v5.
8+
- `backend/`: **NestJS 11**, TypeORM, PostgreSQL.
9+
- **Language**: **TypeScript 5.9+** (Strict Mode), **ES2025**.
10+
11+
## Deployment Environments
12+
- **Local Development**: Docker Compose with PostgreSQL container.
13+
- **Production**:
14+
- **Frontend**: Vercel (Static hosting with Edge Functions).
15+
- **Backend**: Vercel Serverless Functions or separate deployment.
16+
- **Database**: Aiven Cloud PostgreSQL (managed, SSL required).
17+
18+
## Critical Workflows
19+
1. **Test-Driven Development (TDD)**:
20+
- **Mandatory**: Write failing tests *before* implementation.
21+
- **Frontend**: Use `vitest` and `@testing-library/react`.
22+
- **Backend**: Use `jest` for unit/integration tests.
23+
- **E2E**: Use `playwright` for critical user flows.
24+
2. **Planning**:
25+
- Before complex tasks, use the **Architect Agent** or `plan-feature.prompt.md` to design the solution.
26+
- Break down features into: Database -> Backend API -> Frontend UI.
27+
28+
## Detailed Standards (Must Read)
29+
Refer to these files for specific coding rules:
30+
- **Frontend**: `.github/instructions/frontend.instructions.md` (React 19 features, A11y, Tailwind v4).
31+
- **Backend**: `.github/instructions/backend.instructions.md` (NestJS modules, DTOs, TypeORM).
32+
- **Common**: `.github/instructions/common.instructions.md` (Security, Performance, Git).1
33+
- **E2E**: `.github/instructions/e2e.instructions.md` (Playwright patterns).
34+
35+
## Project-Specific Conventions
36+
- **Frontend**:
37+
- **Imports**: Use `@/` alias for `src/` (e.g., `import { Button } from "@/components/ui/button"`).
38+
- **Styling**: Use `cn()` utility for conditional classes. Tailwind v4 is configured via Vite plugin.
39+
- **React**: React Compiler is enabled in `vite.config.ts`. Do not manually memoize.
40+
- **Backend**:
41+
- **Architecture**: Strict Modular Architecture. Use DTOs with `class-validator`.
42+
- **Database**: Use TypeORM migrations. No `synchronize: true` in production.
43+
- **Production DB**: Aiven PostgreSQL requires SSL (`ssl: { rejectUnauthorized: false }`).
44+
45+
## Environment-Specific Commands
46+
### Local Development (Docker)
47+
```bash
48+
# Start all services with Docker Compose
49+
make dev # Development mode with hot reload
50+
make up # Production-like containers
51+
docker compose logs # View logs
52+
```
53+
54+
### Database
55+
```bash
56+
# Local: Docker PostgreSQL
57+
make db # Start only database
58+
59+
# Production: Aiven PostgreSQL
60+
# Connection string from Aiven Console (requires SSL)
61+
```
62+
63+
## Useful Commands
64+
- **Frontend**: `pnpm dev`, `pnpm test` (Vitest), `pnpm build`.
65+
- **Backend**: `pnpm start:dev`, `pnpm test` (Jest), `pnpm test:e2e`.

‎.github/instructions/backend.instructions.md‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
description: "NestJS 11, TypeORM, and PostgreSQL Standards"
3+
applyTo: "**/*.{ts,js}"
4+
---
5+
6+
# Backend Development Instructions
7+
8+
## Core Stack
9+
- **Framework**: NestJS 11
10+
- **Language**: TypeScript 5.9.3
11+
- **Database**: PostgreSQL
12+
- **ORM**: TypeORM
13+
- **Testing**: Jest
14+
15+
## NestJS 11 Best Practices
16+
1. **Architecture**: Follow the Modular Architecture.
17+
- Each feature should have its own module (e.g., `UsersModule`, `AuthModule`).
18+
- Use `Controllers` for handling requests and `Services` for business logic.
19+
2. **Dependency Injection**: Use Constructor Injection. Avoid property injection.
20+
3. **DTOs**: Use Data Transfer Objects (DTOs) for all input validation.
21+
- Use `class-validator` and `class-transformer`.
22+
4. **Config**: Use `@nestjs/config` for environment variables. Never hardcode secrets.
23+
5. **Error Handling**: Use Global Exception Filters and standard HTTP exceptions.
24+
25+
## Database (PostgreSQL + TypeORM)
26+
27+
### Environment Configuration
28+
- **Local Development**: Docker Compose PostgreSQL container.
29+
- **Production**: Aiven Cloud PostgreSQL (managed service with automatic backups).
30+
31+
### Aiven PostgreSQL Requirements
32+
1. **SSL Connection**: Always use SSL in production (`ssl: { rejectUnauthorized: false }`).
33+
2. **Connection String**: Use `DATABASE_URL` environment variable from Aiven Console.
34+
3. **Connection Pooling**: Aiven provides connection pooling; configure `max` connections appropriately.
35+
36+
### TypeORM Configuration
37+
```typescript
38+
// Example TypeORM configuration for multi-environment
39+
{
40+
type: 'postgres',
41+
url: process.env.DATABASE_URL,
42+
ssl: process.env.NODE_ENV === 'production'
43+
? { rejectUnauthorized: false }
44+
: false,
45+
synchronize: false, // Always use migrations
46+
migrations: ['dist/migrations/*.js'],
47+
}
48+
```
49+
50+
### Entity Guidelines
51+
1. **Entities**: Define entities using TypeORM decorators.
52+
- Use `UUID` for primary keys.
53+
- Use proper column types (e.g., `timestamp with time zone`).
54+
2. **Repositories**: Use the Repository Pattern.
55+
3. **Migrations**: Always use migrations for schema changes. Do not use `synchronize: true` in production.
56+
4. **Performance**:
57+
- Use indexes for frequently queried columns.
58+
- Avoid N+1 query problems by using `relations` or `QueryBuilder`.
59+
- Monitor slow queries using Aiven's built-in metrics.
60+
61+
## Testing (Jest)
62+
1. **Unit Tests**: Test Services and Controllers in isolation.
63+
- Mock dependencies using `jest.mock` or custom mock providers.
64+
2. **Integration Tests**: Test the interaction between modules and the database (using a test database or Docker container).
65+
3. **E2E Tests**: Use `@nestjs/testing` to spin up the application and test API endpoints.
66+
67+
## Code Style
68+
- **Naming**:
69+
- Files: `kebab-case` (e.g., `users.service.ts`).
70+
- Classes: `PascalCase` (e.g., `UsersService`).
71+
- Methods: `camelCase`.
72+
- **Async/Await**: Always use `async/await` for asynchronous operations.
73+
74+
## Deployment
75+
76+
### Vercel Deployment
77+
- Backend can be deployed as Vercel Serverless Functions or separately.
78+
- Configure environment variables in Vercel Dashboard.
79+
- Use `vercel.json` for routing and function configuration.
80+
81+
### Environment Variables (Production)
82+
```env
83+
# Aiven PostgreSQL
84+
DATABASE_URL=postgres://user:password@host:port/database?sslmode=require
85+
86+
# Application
87+
NODE_ENV=production
88+
JWT_SECRET=<strong-secret>
89+
FRONTEND_URL=https://your-app.vercel.app
90+
91+
# OAuth (optional)
92+
GOOGLE_CLIENT_ID=<from-google-console>
93+
GOOGLE_CLIENT_SECRET=<from-google-console>
94+
GITHUB_CLIENT_ID=<from-github>
95+
GITHUB_CLIENT_SECRET=<from-github>
96+
```
97+
98+
### Local Development
99+
```bash
100+
# Start with Docker Compose
101+
make dev
102+
103+
# Or start services individually
104+
docker compose up postgres -d
105+
pnpm start:dev
106+
```

0 commit comments

Comments
 (0)