Nurfog/openccb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: database-first refactor, unified architecture and visual developer manual

Browse Source 
Summary of changes:
- Consolidated Studio+CMS and Experience+LMS into unified services.
- Moved core business logic (enrollment, grading, auth) to PostgreSQL functions.
- Implemented advanced auditing via DB triggers and session context.
- Added gamification (XP/Levels/Leaderboards) and logic encapsulation.
- Updated installation/diagnostic scripts for the new architecture.
- Created a comprehensive Visual Developer Manual in README.md with hardware scaling.
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-01-11 02:34:23 -03:00
parent a19da8de76
commit b1eb23926e
42 changed files with 2661 additions and 588 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/experience/Dockerfile
+29 -12
View File
@@ -1,20 +1,37 @@
# Build stage
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
# Build stage for Rust LMS
FROM rustlang/rust:nightly AS rust-builder
WORKDIR /usr/src/app
COPY . .
RUN apt-get update && apt-get install -y pkg-config libssl-dev && rm -rf /var/lib/apt/lists/*
RUN cargo build --release -p lms-service
# Build stage for Next.js Experience
FROM node:18-alpine AS node-builder
WORKDIR /app
COPY web/experience/package*.json ./
RUN npm install
COPY web/experience/ .
RUN npm run build
# Production stage
# Final stage
FROM node:18-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
ENV PORT 3003
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
# Install system dependencies for Rust binary
RUN apk add --no-cache openssl libgcc libstdc++
EXPOSE 3003
CMD ["node", "server.js"]
# Copy LMS binary
COPY --from=rust-builder /usr/src/app/target/release/lms-service ./
# Copy Experience frontend
COPY --from=node-builder /app/public ./public
COPY --from=node-builder /app/.next/standalone ./
COPY --from=node-builder /app/.next/static ./.next/static
# Copy entrypoint
COPY web/experience/entrypoint.sh ./
RUN chmod +x entrypoint.sh
EXPOSE 3003 3002
CMD ["./entrypoint.sh"]
web/experience/README.md
-36
View File
@@ -1,36 +0,0 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
web/experience/entrypoint.sh
+7
View File
@@ -0,0 +1,7 @@
#!/bin/sh
# Start the LMS backend in the background
./lms-service &
# Start the Experience frontend
node server.js
web/experience/src/app/page.tsx
+65 -27
View File
@@ -5,13 +5,14 @@ import { lmsApi, Course, Lesson } from "@/lib/api";
import Link from "next/link";
import { useAuth } from "@/context/AuthContext";
import { useRouter } from "next/navigation";
import { Rocket, CheckCircle2, ArrowRight, Star, Calendar, Clock, AlertCircle } from "lucide-react";
import { Rocket, CheckCircle2, ArrowRight, Star, Calendar, Clock, AlertCircle, Zap, TrendingUp } from "lucide-react";
import Leaderboard from "@/components/Leaderboard";
export default function CatalogPage() {
const [courses, setCourses] = useState<Course[]>([]);
const [enrollments, setEnrollments] = useState<string[]>([]);
const [loading, setLoading] = useState(true);
const [gamification, setGamification] = useState<{ points: number, badges: any[] } | null>(null);
const [gamification, setGamification] = useState<{ points: number, level: number, badges: any[] } | null>(null);
const [upcomingDeadlines, setUpcomingDeadlines] = useState<{ lesson: Lesson, courseTitle: string }[]>([]);
const { user } = useAuth();
@@ -106,34 +107,71 @@ export default function CatalogPage() {
</div>
{user && gamification && (
<div className="mb-16 grid grid-cols-1 md:grid-cols-3 gap-6 animate-in fade-in slide-in-from-top-6 duration-700">
<div className="md:col-span-1 glass-card p-8 bg-gradient-to-br from-blue-600/20 to-indigo-700/20 border-blue-500/20 flex flex-col items-center justify-center text-center rounded-3xl">
<div className="w-16 h-16 rounded-full bg-blue-500/10 flex items-center justify-center mb-4 border border-blue-500/20">
<Star className="text-blue-400 fill-blue-400/20" size={32} />
<div className="mb-16 grid grid-cols-1 lg:grid-cols-3 gap-8 animate-in fade-in slide-in-from-top-6 duration-700">
<div className="lg:col-span-2 space-y-8">
<div className="glass-card p-10 bg-gradient-to-br from-blue-600/20 via-indigo-700/10 to-transparent border-blue-500/20 rounded-3xl relative overflow-hidden group">
<div className="relative z-10 flex flex-col md:flex-row md:items-center gap-10">
<div className="flex-shrink-0 relative">
<div className="w-24 h-24 rounded-3xl bg-blue-600 flex items-center justify-center shadow-2xl shadow-blue-500/40 rotate-3 group-hover:rotate-0 transition-transform duration-500">
<Zap className="text-white fill-white/20" size={48} />
</div>
<div className="absolute -bottom-2 -right-2 w-10 h-10 rounded-full bg-white text-black flex items-center justify-center font-black text-xs border-4 border-[#050505]">
{gamification.level}
</div>
</div>
<div className="flex-1 space-y-4">
<div>
<div className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-400 mb-1">Current Standing</div>
<h2 className="text-3xl font-black text-white">Level {gamification.level} Pioneer</h2>
</div>
<div className="space-y-2">
<div className="flex justify-between items-end">
<div className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">
{gamification.points} / {Math.pow(gamification.level, 2) * 100} XP
</div>
<div className="text-[10px] font-black text-blue-400 uppercase tracking-widest">
{Math.floor(((gamification.points - Math.pow(gamification.level - 1, 2) * 100) / (Math.pow(gamification.level, 2) * 100 - Math.pow(gamification.level - 1, 2) * 100)) * 100)}% to Level {gamification.level + 1}
</div>
</div>
<div className="h-2 w-full bg-white/5 rounded-full overflow-hidden border border-white/5">
<div
className="h-full bg-gradient-to-r from-blue-500 to-indigo-500 shadow-[0_0_20px_rgba(59,130,246,0.5)] transition-all duration-1000"
style={{ width: `${Math.min(100, Math.max(0, ((gamification.points - Math.pow(gamification.level - 1, 2) * 100) / (Math.pow(gamification.level, 2) * 100 - Math.pow(gamification.level - 1, 2) * 100)) * 100))}%` }}
></div>
</div>
</div>
</div>
</div>
{/* Background Flair */}
<div className="absolute -bottom-20 -right-20 w-64 h-64 bg-blue-500/10 blur-[120px] rounded-full pointer-events-none group-hover:bg-blue-500/20 transition-colors duration-500"></div>
</div>
<div className="glass-card p-8 bg-white/[0.01] border-white/5 rounded-3xl">
<h3 className="text-xs font-black uppercase tracking-widest text-gray-500 mb-6 flex items-center gap-2">
<CheckCircle2 size={14} /> My Badges
</h3>
<div className="flex flex-wrap gap-4">
{gamification.badges.length === 0 ? (
<p className="text-sm text-gray-600 italic">No badges earned yet. Start learning to unlock achievements!</p>
) : (
gamification.badges.map(badge => (
<div key={badge.id} className="group/badge relative">
<div className="w-14 h-14 rounded-2xl bg-gradient-to-tr from-amber-400/10 to-orange-500/10 border border-amber-500/20 flex items-center justify-center shadow-lg transition-all hover:scale-110 hover:bg-amber-500/20 cursor-help" title={badge.description}>
<span className="text-2xl">🏆</span>
</div>
<div className="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 rounded-full border-2 border-[#050505] flex items-center justify-center text-[8px] font-bold">✓</div>
</div>
))
)}
</div>
</div>
<div className="text-4xl font-black text-white mb-1">{gamification.points}</div>
<div className="text-[10px] font-black uppercase tracking-[0.2em] text-blue-400">Total Experience Points</div>
</div>
<div className="md:col-span-2 glass-card p-8 bg-white/[0.01] border-white/5 rounded-3xl overflow-hidden relative">
<h3 className="text-xs font-black uppercase tracking-widest text-gray-500 mb-6 flex items-center gap-2">
<CheckCircle2 size={14} /> My Badges
</h3>
<div className="flex flex-wrap gap-4">
{gamification.badges.length === 0 ? (
<p className="text-sm text-gray-600 italic">No badges earned yet. Start learning to unlock achievements!</p>
) : (
gamification.badges.map(badge => (
<div key={badge.id} className="group/badge relative">
<div className="w-12 h-12 rounded-xl bg-gradient-to-tr from-amber-400/20 to-orange-500/20 border border-amber-500/30 flex items-center justify-center shadow-lg transition-transform hover:scale-110 cursor-help" title={badge.description}>
<span className="text-xl">🏆</span>
</div>
<div className="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-black flex items-center justify-center text-[8px] font-bold">✓</div>
</div>
))
)}
</div>
{/* Visual Flair */}
<div className="lg:col-span-1">
<Leaderboard />
</div>
</div>
)}
web/experience/src/components/Leaderboard.tsx
+77
View File
@@ -0,0 +1,77 @@
"use client";
import { useEffect, useState } from "react";
import { lmsApi, User } from "@/lib/api";
import { Trophy, Medal, Award } from "lucide-react";
export default function Leaderboard() {
const [topUsers, setTopUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchLeaderboard = async () => {
try {
const data = await lmsApi.getLeaderboard();
setTopUsers(data);
} catch (err) {
console.error("Failed to fetch leaderboard", err);
} finally {
setLoading(false);
}
};
fetchLeaderboard();
}, []);
if (loading) {
return <div className="animate-pulse space-y-4">
{[1, 2, 3].map(i => (
<div key={i} className="h-16 bg-white/5 rounded-2xl w-full"></div>
))}
</div>;
}
return (
<div className="glass-card p-8 border-white/5 bg-white/[0.01] rounded-3xl overflow-hidden relative">
<h3 className="text-xs font-black uppercase tracking-widest text-gray-500 mb-6 flex items-center gap-2">
<Trophy size={14} className="text-amber-500" /> Leaderboard
</h3>
<div className="space-y-3">
{topUsers.map((user, index) => (
<div
key={user.id}
className={`flex items-center gap-4 p-4 rounded-2xl transition-all ${index === 0 ? 'bg-gradient-to-r from-amber-500/10 to-transparent border border-amber-500/20 shadow-lg shadow-amber-500/5' :
'bg-white/5 border border-white/5 hover:bg-white/10'
}`}
>
<div className="flex-shrink-0 w-8 text-center font-black text-xs text-gray-600">
{index === 0 ? <Medal className="text-amber-500 mx-auto" size={18} /> :
index === 1 ? <Medal className="text-gray-400 mx-auto" size={18} /> :
index === 2 ? <Medal className="text-amber-700 mx-auto" size={18} /> :
index + 1}
</div>
<div className="flex-1">
<div className="text-sm font-bold text-gray-200 line-clamp-1">{user.full_name}</div>
<div className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Level {user.level || 1}</div>
</div>
<div className="text-right">
<div className="text-sm font-black text-white">{user.xp || 0}</div>
<div className="text-[8px] font-black text-blue-500 uppercase tracking-widest">XP</div>
</div>
</div>
))}
{topUsers.length === 0 && (
<div className="text-center py-8 text-gray-600 italic text-sm">
No ranking data available yet.
</div>
)}
</div>
{/* Visual background flair */}
<div className="absolute -top-24 -right-24 w-48 h-48 bg-amber-500/10 blur-[100px] rounded-full pointer-events-none"></div>
</div>
);
}
web/experience/src/lib/api.ts
+12 -1
View File
@@ -96,6 +96,8 @@ export interface User {
email: string;
full_name: string;
role: string;
xp?: number;
level?: number;
}
export interface AuthResponse {
@@ -187,12 +189,21 @@ export const lmsApi = {
return response.json();
},
async getGamification(userId: string): Promise<{ points: number, badges: { id: string, name: string, description: string }[] }> {
async getGamification(userId: string): Promise<{ points: number, level: number, badges: { id: string, name: string, description: string, earned_at: string }[] }> {
const response = await fetch(`${API_BASE_URL}/users/${userId}/gamification`);
if (!response.ok) throw new Error('Failed to fetch gamification data');
return response.json();
},
async getLeaderboard(): Promise<User[]> {
const token = localStorage.getItem('token');
const response = await fetch(`${API_BASE_URL}/analytics/leaderboard`, {
headers: { 'Authorization': `Bearer ${token}` }
});
if (!response.ok) throw new Error('Failed to fetch leaderboard');
return response.json();
},
async getBranding(orgId: string): Promise<Organization> {
const response = await fetch(`${CMS_API_URL}/organizations/${orgId}/branding`);
if (!response.ok) throw new Error('Failed to fetch branding');