Skip to content

liambrooks-lab/SkillNODE

BranchesTags

Repository files navigation

SkillNODE logo

SkillNode

A modern local-first skill platform built for serious practice, polished identity, premium UI, AI-assisted coaching, and multiplayer-ready product workflows.

Live Product | Backend API | Repository

✨ Overview

SkillNODE is a full-stack web product designed to make skill development feel structured, social, and premium rather than scattered across unrelated mini tools. It combines a responsive multi-page interface, player identity, challenge-based practice, AI hint support, fair-play monitoring, local-first result storage, and multiplayer room presence into one cohesive product experience.

The project is structured as a monorepo and split into:

  • a React + Vite frontend for the full product interface
  • an Express backend for AI hints, realtime presence, and future-ready service flows
  • shared deployment and workspace configuration at the repository root

🧭 What Is SkillNODE?

SkillNODE is a browser-based skill development platform for learners, students, builders, and competitive users who want one polished place to train, measure progress, build a public profile, and stay inside a product that feels intentional.

At the product level, SkillNODE acts as:

  • a skill lab for practice across multiple domains
  • a professional profile and identity layer
  • a challenge and performance tracking system
  • a local-first progress product that feels fast on every session
  • a lightweight multiplayer and AI-assisted learning surface

🩺 Problem It Solves

Most skill-training websites break down where the real user experience starts:

  • they feel like disconnected practice pages instead of one serious product
  • profile and identity are weak or missing
  • progress tracking feels shallow
  • challenge difficulty often stays too easy
  • collaboration and social presence are treated as afterthoughts
  • the UI works, but it does not feel premium

SkillNODE is built to solve that with a clearer workflow:

  • enter fast through a local-first flow
  • build a visible player identity
  • practice across focused skill modules
  • keep results and alerts close to the user for speed
  • share public presence with a polished profile page
  • extend into multiplayer and AI coaching without leaving the product

🔗 Links

🚀 Latest Product State

SkillNODE currently ships with:

  • a premium multi-page product shell with dashboard, activities, multiplayer, and profile flows
  • local-first login and player identity instead of mandatory database-backed access lookup
  • profile studio with display picture, bio, region, and four social links
  • public profile sharing through embedded share payloads
  • typing, math, guessing, coding, grammar, and comprehension modules
  • tougher Grade 11-12 level math questions instead of only basic arithmetic drills
  • a broader coding arena with JavaScript, Python, C++, Java, TypeScript, and SQL challenge tracks
  • fair-play alerts logged into the local user experience
  • realtime multiplayer room presence through Socket.IO
  • AI hints for supported challenge surfaces

🌌 Core Highlights

  • polished dashboard and app-shell design
  • local-first access flow for faster entry
  • professional player identity and public sharing
  • broader coding challenge coverage
  • advanced school-level math practice
  • contextual AI hint experience
  • realtime room presence layer
  • responsive layout for desktop and mobile
  • deployment-ready frontend and backend separation

🧩 Product Surface

Dashboard experience

  • premium command center layout
  • stats, attempts, alerts, and category summaries
  • featured track cards
  • local-first leaderboard surface

Skill lab experience

  • typing velocity
  • math clash
  • guess works
  • code arena
  • grammar lab
  • comprehension practice

Identity and social experience

  • player profile studio
  • public profile sharing
  • social links and bio
  • room presence and multiplayer entry

Coaching and integrity experience

  • contextual AI hints
  • fair-play alerts
  • product messaging around performance and accountability

🖼️ Demo Gallery

SkillNODE dashboard hero
1. Dashboard hero
The main dashboard opens with a premium command-center surface, local-first profile context, and product-level positioning around growth, competition, and connection. 		SkillNODE featured tracks
2. Featured tracks
SkillNODE organizes training into clear track cards so users move through the product like a real platform rather than a collection of random tools.
SkillNODE product signals
3. Product signals
The lower dashboard shows recent sessions, leaderboard intent, AI positioning, social design, and fair-play messaging in one continuous interface. 		SkillNODE multiplayer rooms
4. Multiplayer rooms
The multiplayer page gives users preset rooms, custom room entry, display names, and live presence, creating a clear base for future room-based competitions.
SkillNODE profile studio
5. Profile studio
The profile page combines editable identity, bio, social links, and a public-facing profile card so the platform feels personal and presentation-ready.

💡 Why SkillNODE

SkillNODE is built around a simple product promise:

  • practice should feel structured
  • progress should feel measurable
  • identity should feel present
  • the product should look premium while staying usable

The goal is not just to give users activities. It is to make them feel like they are inside one serious digital product where learning, competition, profile-building, and collaboration all belong together.

🌍 Language Support

SkillNODE supports a broad range of challenge surfaces, and the coding arena now includes multiple language tracks for broader preparation.

Coding language tracks

  • JavaScript
  • Python
  • C++
  • Java
  • TypeScript
  • SQL

Non-coding skill tracks

  • typing
  • advanced math
  • word and number guessing
  • grammar
  • comprehension

🛠️ Tech Stack

Frontend

  • React 19.2.4
  • Vite 7.3.1
  • React Router 7.13.2
  • Framer Motion 12.38.0
  • Axios 1.14.0
  • Tailwind CSS 3.4.19
  • Socket.IO Client 4.8.3
  • Lucide React 1.7.0

Backend

  • Node.js
  • Express 4.21.2
  • Socket.IO 4.8.3
  • Zod 3.25.76
  • OpenAI SDK 5.22.0
  • Resend 6.1.0
  • JSON Web Token 9.0.2
  • Multer 1.4.5-lts.2

Platform and deployment

  • Vercel for frontend hosting
  • Render for backend hosting

Monorepo tooling

  • npm workspaces
  • root-level shared scripts
  • deployment config via render.yaml and Vercel config

🧱 Monorepo Structure

SkillNODE/
|- client/
|  |- public/
|  |- src/
|  |  |- components/
|  |  |- data/
|  |  |- hooks/
|  |  |- lib/
|  |  |- pages/
|  |  `- styles/
|  |- package.json
|  `- vercel.json
|- server/
|  |- prisma/
|  |- src/
|  |  |- ai/
|  |  |- auth/
|  |  |- email/
|  |  |- middleware/
|  |  |- realtime/
|  |  `- routes/
|  `- package.json
|- docs/
|  `- readme/
|- tests/
|- docker-compose.yml
|- LICENSE
|- package.json
|- render.yaml
`- README.md

🏗️ Architecture

Frontend responsibilities

  • onboarding and local-first session creation
  • app-shell navigation and responsive layouts
  • profile editing and public-sharing flows
  • challenge experiences across all skill tracks
  • local result storage and summary rendering
  • multiplayer room UI
  • communication with backend AI and realtime services

Backend responsibilities

  • AI hint endpoint
  • realtime multiplayer presence
  • email and legacy auth scaffolding for future release paths
  • service foundation for further product expansion

Execution flow

  1. User opens SkillNODE.
  2. User enters profile information through the local-first login flow.
  3. User enters the dashboard and picks a skill track.
  4. Session results and fair-play events are stored locally for speed and privacy.
  5. Optional backend-powered features such as AI hints and room presence continue to work through the deployed service.

✅ Validation Snapshot

The latest verified repo state includes:

  • npm run build -w client passing
  • server/src/routes/ai.js syntax check passing
  • server/src/realtime/socket.js syntax check passing

🔐 Authentication and Identity

  • local-first player entry without mandatory database-backed access search
  • profile identity stored in browser storage for fast repeat usage
  • public profile sharing with embedded share data
  • backend auth and email scaffolding kept in the codebase for future extension

📦 Key Capabilities

  • polished premium UI
  • local-first access and stats flow
  • profile studio with social links and bio
  • public profile sharing
  • advanced math challenge set
  • multi-language coding arena
  • grammar and comprehension modules
  • multiplayer room presence
  • AI-assisted hints
  • mobile-friendly layout

🎯 Current Scope

SkillNODE is built as a strong production-style MVP with:

  • a real product shell instead of a landing page
  • multiple dynamic pages and activity routes
  • a modern identity layer
  • local-first stats and session model
  • optional backend-assisted features
  • responsive design for desktop and mobile
  • deployment-ready structure for Vercel and Render

🧪 Local Setup

Prerequisites

  • Node.js 22.x
  • npm 10+
  • PostgreSQL 15+ or Docker if you want legacy backend database routes available locally

Install dependencies

npm install

Start local PostgreSQL

docker-compose up -d postgres

Backend environment

Create server/.env:

APP_ENV=development
PORT=5000
PUBLIC_APP_URL=http://localhost:5173
PUBLIC_APP_URLS=
PUBLIC_APP_URL_REGEX=
DATABASE_URL=postgresql://postgres:postgres@localhost:5432/skillnode?schema=public
JWT_SECRET=change_me_to_a_long_random_secret
RESEND_API_KEY=
RESEND_FROM=SkillNODE <onboarding@resend.dev>
OPENAI_API_KEY=
ALLOW_DEV_LOGIN_CODE=true

Frontend environment

Create client/.env:

VITE_API_BASE_URL=http://localhost:5000

Run backend

npm run dev:server

Run frontend

npm run dev:client

Local URLs

  • Frontend: http://localhost:5173
  • Backend: http://localhost:5000

🏁 Build Commands

Build API helpers and frontend package set

npm run build

Build web

npm run build -w client

🌐 Deployment

Frontend deployment

  • hosted on Vercel
  • root directory: client

Backend deployment

  • hosted on Render
  • uses the Express backend from server

Required frontend production variable

VITE_API_BASE_URL=https://skillnode-api.onrender.com

Required backend production variables

APP_ENV=production
PORT=5000
PUBLIC_APP_URL=https://skill-node-client-bvoh.vercel.app
PUBLIC_APP_URLS=
PUBLIC_APP_URL_REGEX=^https://.*\.vercel\.app$
DATABASE_URL=your_postgres_connection_string
JWT_SECRET=replace_me
RESEND_API_KEY=replace_me
RESEND_FROM=SkillNODE <your-verified-sender>
OPENAI_API_KEY=replace_me
ALLOW_DEV_LOGIN_CODE=false

📄 License

SkillNODE is protected under a custom restricted license.

The full license text is available in LICENSE.

License summary:

  • copyright © 2026 Rudranarayan Jena
  • all rights reserved
  • no copying, modification, distribution, hosting, reuse, or derivative work without prior written permission
  • no commercial or non-commercial use is allowed unless explicitly approved by the author

SkillNODE is not released as an open-source project under MIT, Apache, GPL, or any other permissive/public license.

👨‍💻 Author

Rudranarayan Jena

Crafted by MR. Rudranarayan Jena

Product Builder | Full-stack Developer | AI Enthusiast | Creator of SkillNODE

Focused on building polished digital products, modern web applications, and user experiences that feel premium instead of generic.

GitHub: @liambrooks-lab

About

SkillNODE is a modern multi-page skill development platform that combines competitive practice, social identity, and AI-assisted learning into a single cohesive experience. It allows users to train across multiple domains, track performance through leaderboards.

skill-node-client-bvoh.vercel.app/

Topics

react nodejs socket-io ai-learning skill-development

Resources

Readme

License

View license
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages