Skip to content
BranchesTags

Repository files navigation

Student Management System

A full-stack TypeScript application for managing students with a React frontend and Node.js backend.

Features

  • Add Students: Create new student records with name, CPF, and email
  • Edit Students: Update existing student information (name and email)
  • Delete Students: Remove students from the system
  • View Students: List all registered students in a clean table format
  • CPF Validation: Ensures unique CPF numbers and proper formatting
  • Email Validation: Validates email format
  • Modern UI: Clean, responsive design with gradients and animations
  • Real-time Updates: Interface updates immediately after operations

Project Structure

teaching-assistant-react/
├── client/ # React TypeScript frontend
│ ├── src/
│ │ ├── components/ # React components
│ │ │ ├── StudentForm.tsx
│ │ │ └── StudentList.tsx
│ │ ├── services/ # API service classes
│ │ │ └── StudentService.ts
│ │ ├── types/ # TypeScript type definitions
│ │ │ └── Student.ts
│ │ ├── App.tsx # Main app component
│ │ ├── App.css # Styles
│ │ └── index.tsx # Entry point
│ ├── package.json
│ └── tsconfig.json
├── server/ # Node.js TypeScript backend
│ ├── src/
│ │ ├── models/ # Business logic classes
│ │ │ ├── Student.ts # Student class with validation
│ │ │ └── StudentSet.ts # Student collection management
│ │ └── server.ts # Express server with API routes
│ ├── package.json
│ └── tsconfig.json
└── .vscode/
└── launch.json # VS Code debug configurations

Getting Started

Prerequisites

  • Node.js 16+ and npm
  • VS Code (recommended)

Installation

Option 1: Use the installation script (Recommended)

./install-deps.sh

Option 2: Manual installation

  1. Install server dependencies:

    cd server
npm install

  2. Install client dependencies:

    cd client
npm install

Option 3: VS Code Tasks

  1. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
  2. Type "Tasks: Run Task"
  3. Select "Install All Dependencies"

Running the Application

Option 1: VS Code (Recommended)

  1. Open the project in VS Code
  2. Go to Run and Debug (Ctrl+Shift+D)
  3. Select "Launch Full Stack" from the dropdown
  4. Press F5 or click the play button

This will start both the server and client simultaneously.

Option 2: Manual Start

  1. Start the server:

    cd server
npm run dev

    Server runs on http://localhost:3005

  2. Start the client (in a new terminal):

    cd client
npm start

    Client runs on http://localhost:3004

Usage

  1. Open http://localhost:3004 in your browser
  2. Use the form at the top to add new students
  3. Fill in Name, CPF (Brazilian format: 000.000.000-00), and Email
  4. Click "Add Student" to save
  5. View all students in the table below
  6. Use "Edit" to modify student information
  7. Use "Delete" to remove students (with confirmation)

API Endpoints

The server provides a REST API:

  • GET /api/students - Get all students
  • POST /api/students - Create a new student
  • GET /api/students/:cpf - Get student by CPF
  • PUT /api/students/:cpf - Update student by CPF
  • DELETE /api/students/:cpf - Delete student by CPF

Architecture Highlights

Backend (Node.js + TypeScript)

  • Student Class: Handles individual student data with validation
  • StudentSet Class: Manages the collection of students with CRUD operations
  • Clean Architecture: Separation of concerns between models and API routes
  • Type Safety: Full TypeScript implementation
  • Error Handling: Proper validation and error responses

Frontend (React + TypeScript)

  • StudentService Class: Centralizes all API communication
  • Component Architecture: Reusable React components
  • Modern UI: CSS Grid, Flexbox, gradients, and animations
  • Form Handling: Real-time CPF formatting and validation
  • State Management: React hooks for state management
  • Error Handling: User-friendly error messages

Technologies Used

Backend

  • Node.js
  • Express.js
  • TypeScript
  • ts-node-dev (development)

Frontend

  • React 18
  • TypeScript
  • CSS3 (Grid, Flexbox, Animations)
  • Fetch API

Development Tools

  • VS Code with debug configurations
  • ESLint
  • TypeScript compiler
  • Hot reloading for both client and server

Port Configuration

The application uses ports 3005 and 3004 to avoid conflicts with other applications that might be using ports 3000-3003.

License

ISC

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

3 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - Zed201/teaching-assistant-react · GitHub
Skip to content
BranchesTags
Repository files navigation
Student Management System
A full-stack TypeScript application for managing students with a React frontend and Node.js backend.
Features
  • Add Students: Create new student records with name, CPF, and email
  • Edit Students: Update existing student information (name and email)
  • Delete Students: Remove students from the system
  • View Students: List all registered students in a clean table format
  • CPF Validation: Ensures unique CPF numbers and proper formatting
  • Email Validation: Validates email format
  • Modern UI: Clean, responsive design with gradients and animations
  • Real-time Updates: Interface updates immediately after operations
Project Structure
teaching-assistant-react/
├── client/ # React TypeScript frontend
│ ├── src/
│ │ ├── components/ # React components
│ │ │ ├── StudentForm.tsx
│ │ │ └── StudentList.tsx
│ │ ├── services/ # API service classes
│ │ │ └── StudentService.ts
│ │ ├── types/ # TypeScript type definitions
│ │ │ └── Student.ts
│ │ ├── App.tsx # Main app component
│ │ ├── App.css # Styles
│ │ └── index.tsx # Entry point
│ ├── package.json
│ └── tsconfig.json
├── server/ # Node.js TypeScript backend
│ ├── src/
│ │ ├── models/ # Business logic classes
│ │ │ ├── Student.ts # Student class with validation
│ │ │ └── StudentSet.ts # Student collection management
│ │ └── server.ts # Express server with API routes
│ ├── package.json
│ └── tsconfig.json
└── .vscode/
└── launch.json # VS Code debug configurations

Getting Started
Prerequisites
  • Node.js 16+ and npm
  • VS Code (recommended)
Installation
Option 1: Use the installation script (Recommended)
./install-deps.sh
Option 2: Manual installation
  1. Install server dependencies:
    cd server
npm install
  2. Install client dependencies:
    cd client
npm install
Option 3: VS Code Tasks
  1. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
  2. Type "Tasks: Run Task"
  3. Select "Install All Dependencies"
Running the Application
Option 1: VS Code (Recommended)
  1. Open the project in VS Code
  2. Go to Run and Debug (Ctrl+Shift+D)
  3. Select "Launch Full Stack" from the dropdown
  4. Press F5 or click the play button
This will start both the server and client simultaneously.
Option 2: Manual Start
  1. Start the server:
    cd server
npm run dev
    Server runs on http://localhost:3005
  2. Start the client (in a new terminal):
    cd client
npm start
    Client runs on http://localhost:3004
Usage
  1. Open http://localhost:3004 in your browser
  2. Use the form at the top to add new students
  3. Fill in Name, CPF (Brazilian format: 000.000.000-00), and Email
  4. Click "Add Student" to save
  5. View all students in the table below
  6. Use "Edit" to modify student information
  7. Use "Delete" to remove students (with confirmation)
API Endpoints
The server provides a REST API:
  • GET /api/students - Get all students
  • POST /api/students - Create a new student
  • GET /api/students/:cpf - Get student by CPF
  • PUT /api/students/:cpf - Update student by CPF
  • DELETE /api/students/:cpf - Delete student by CPF
Architecture Highlights
Backend (Node.js + TypeScript)
  • Student Class: Handles individual student data with validation
  • StudentSet Class: Manages the collection of students with CRUD operations
  • Clean Architecture: Separation of concerns between models and API routes
  • Type Safety: Full TypeScript implementation
  • Error Handling: Proper validation and error responses
Frontend (React + TypeScript)
  • StudentService Class: Centralizes all API communication
  • Component Architecture: Reusable React components
  • Modern UI: CSS Grid, Flexbox, gradients, and animations
  • Form Handling: Real-time CPF formatting and validation
  • State Management: React hooks for state management
  • Error Handling: User-friendly error messages
Technologies Used
Backend
  • Node.js
  • Express.js
  • TypeScript
  • ts-node-dev (development)
Frontend
  • React 18
  • TypeScript
  • CSS3 (Grid, Flexbox, Animations)
  • Fetch API
Development Tools
  • VS Code with debug configurations
  • ESLint
  • TypeScript compiler
  • Hot reloading for both client and server
Port Configuration
The application uses ports 3005 and 3004 to avoid conflicts with other applications that might be using ports 3000-3003.
License
ISC
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
3 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - Zed201/teaching-assistant-react · GitHub
Skip to content
BranchesTags
Repository files navigation
Student Management System
A full-stack TypeScript application for managing students with a React frontend and Node.js backend.
Features
  • Add Students: Create new student records with name, CPF, and email
  • Edit Students: Update existing student information (name and email)
  • Delete Students: Remove students from the system
  • View Students: List all registered students in a clean table format
  • CPF Validation: Ensures unique CPF numbers and proper formatting
  • Email Validation: Validates email format
  • Modern UI: Clean, responsive design with gradients and animations
  • Real-time Updates: Interface updates immediately after operations
Project Structure
teaching-assistant-react/
├── client/ # React TypeScript frontend
│ ├── src/
│ │ ├── components/ # React components
│ │ │ ├── StudentForm.tsx
│ │ │ └── StudentList.tsx
│ │ ├── services/ # API service classes
│ │ │ └── StudentService.ts
│ │ ├── types/ # TypeScript type definitions
│ │ │ └── Student.ts
│ │ ├── App.tsx # Main app component
│ │ ├── App.css # Styles
│ │ └── index.tsx # Entry point
│ ├── package.json
│ └── tsconfig.json
├── server/ # Node.js TypeScript backend
│ ├── src/
│ │ ├── models/ # Business logic classes
│ │ │ ├── Student.ts # Student class with validation
│ │ │ └── StudentSet.ts # Student collection management
│ │ └── server.ts # Express server with API routes
│ ├── package.json
│ └── tsconfig.json
└── .vscode/
└── launch.json # VS Code debug configurations

Getting Started
Prerequisites
  • Node.js 16+ and npm
  • VS Code (recommended)
Installation
Option 1: Use the installation script (Recommended)
./install-deps.sh
Option 2: Manual installation
  1. Install server dependencies:
    cd server
npm install
  2. Install client dependencies:
    cd client
npm install
Option 3: VS Code Tasks
  1. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
  2. Type "Tasks: Run Task"
  3. Select "Install All Dependencies"
Running the Application
Option 1: VS Code (Recommended)
  1. Open the project in VS Code
  2. Go to Run and Debug (Ctrl+Shift+D)
  3. Select "Launch Full Stack" from the dropdown
  4. Press F5 or click the play button
This will start both the server and client simultaneously.
Option 2: Manual Start
  1. Start the server:
    cd server
npm run dev
    Server runs on http://localhost:3005
  2. Start the client (in a new terminal):
    cd client
npm start
    Client runs on http://localhost:3004
Usage
  1. Open http://localhost:3004 in your browser
  2. Use the form at the top to add new students
  3. Fill in Name, CPF (Brazilian format: 000.000.000-00), and Email
  4. Click "Add Student" to save
  5. View all students in the table below
  6. Use "Edit" to modify student information
  7. Use "Delete" to remove students (with confirmation)
API Endpoints
The server provides a REST API:
  • GET /api/students - Get all students
  • POST /api/students - Create a new student
  • GET /api/students/:cpf - Get student by CPF
  • PUT /api/students/:cpf - Update student by CPF
  • DELETE /api/students/:cpf - Delete student by CPF
Architecture Highlights
Backend (Node.js + TypeScript)
  • Student Class: Handles individual student data with validation
  • StudentSet Class: Manages the collection of students with CRUD operations
  • Clean Architecture: Separation of concerns between models and API routes
  • Type Safety: Full TypeScript implementation
  • Error Handling: Proper validation and error responses
Frontend (React + TypeScript)
  • StudentService Class: Centralizes all API communication
  • Component Architecture: Reusable React components
  • Modern UI: CSS Grid, Flexbox, gradients, and animations
  • Form Handling: Real-time CPF formatting and validation
  • State Management: React hooks for state management
  • Error Handling: User-friendly error messages
Technologies Used
Backend
  • Node.js
  • Express.js
  • TypeScript
  • ts-node-dev (development)
Frontend
  • React 18
  • TypeScript
  • CSS3 (Grid, Flexbox, Animations)
  • Fetch API
Development Tools
  • VS Code with debug configurations
  • ESLint
  • TypeScript compiler
  • Hot reloading for both client and server
Port Configuration
The application uses ports 3005 and 3004 to avoid conflicts with other applications that might be using ports 3000-3003.
License
ISC
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
3 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - Zed201/teaching-assistant-react · GitHub
Skip to content
BranchesTags
Repository files navigation
Student Management System
A full-stack TypeScript application for managing students with a React frontend and Node.js backend.
Features
  • Add Students: Create new student records with name, CPF, and email
  • Edit Students: Update existing student information (name and email)
  • Delete Students: Remove students from the system
  • View Students: List all registered students in a clean table format
  • CPF Validation: Ensures unique CPF numbers and proper formatting
  • Email Validation: Validates email format
  • Modern UI: Clean, responsive design with gradients and animations
  • Real-time Updates: Interface updates immediately after operations
Project Structure
teaching-assistant-react/
├── client/ # React TypeScript frontend
│ ├── src/
│ │ ├── components/ # React components
│ │ │ ├── StudentForm.tsx
│ │ │ └── StudentList.tsx
│ │ ├── services/ # API service classes
│ │ │ └── StudentService.ts
│ │ ├── types/ # TypeScript type definitions
│ │ │ └── Student.ts
│ │ ├── App.tsx # Main app component
│ │ ├── App.css # Styles
│ │ └── index.tsx # Entry point
│ ├── package.json
│ └── tsconfig.json
├── server/ # Node.js TypeScript backend
│ ├── src/
│ │ ├── models/ # Business logic classes
│ │ │ ├── Student.ts # Student class with validation
│ │ │ └── StudentSet.ts # Student collection management
│ │ └── server.ts # Express server with API routes
│ ├── package.json
│ └── tsconfig.json
└── .vscode/
└── launch.json # VS Code debug configurations

Getting Started
Prerequisites
  • Node.js 16+ and npm
  • VS Code (recommended)
Installation
Option 1: Use the installation script (Recommended)
./install-deps.sh
Option 2: Manual installation
  1. Install server dependencies:
    cd server
npm install
  2. Install client dependencies:
    cd client
npm install
Option 3: VS Code Tasks
  1. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
  2. Type "Tasks: Run Task"
  3. Select "Install All Dependencies"
Running the Application
Option 1: VS Code (Recommended)
  1. Open the project in VS Code
  2. Go to Run and Debug (Ctrl+Shift+D)
  3. Select "Launch Full Stack" from the dropdown
  4. Press F5 or click the play button
This will start both the server and client simultaneously.
Option 2: Manual Start
  1. Start the server:
    cd server
npm run dev
    Server runs on http://localhost:3005
  2. Start the client (in a new terminal):
    cd client
npm start
    Client runs on http://localhost:3004
Usage
  1. Open http://localhost:3004 in your browser
  2. Use the form at the top to add new students
  3. Fill in Name, CPF (Brazilian format: 000.000.000-00), and Email
  4. Click "Add Student" to save
  5. View all students in the table below
  6. Use "Edit" to modify student information
  7. Use "Delete" to remove students (with confirmation)
API Endpoints
The server provides a REST API:
  • GET /api/students - Get all students
  • POST /api/students - Create a new student
  • GET /api/students/:cpf - Get student by CPF
  • PUT /api/students/:cpf - Update student by CPF
  • DELETE /api/students/:cpf - Delete student by CPF
Architecture Highlights
Backend (Node.js + TypeScript)
  • Student Class: Handles individual student data with validation
  • StudentSet Class: Manages the collection of students with CRUD operations
  • Clean Architecture: Separation of concerns between models and API routes
  • Type Safety: Full TypeScript implementation
  • Error Handling: Proper validation and error responses
Frontend (React + TypeScript)
  • StudentService Class: Centralizes all API communication
  • Component Architecture: Reusable React components
  • Modern UI: CSS Grid, Flexbox, gradients, and animations
  • Form Handling: Real-time CPF formatting and validation
  • State Management: React hooks for state management
  • Error Handling: User-friendly error messages
Technologies Used
Backend
  • Node.js
  • Express.js
  • TypeScript
  • ts-node-dev (development)
Frontend
  • React 18
  • TypeScript
  • CSS3 (Grid, Flexbox, Animations)
  • Fetch API
Development Tools
  • VS Code with debug configurations
  • ESLint
  • TypeScript compiler
  • Hot reloading for both client and server
Port Configuration
The application uses ports 3005 and 3004 to avoid conflicts with other applications that might be using ports 3000-3003.
License
ISC
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
3 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - Zed201/teaching-assistant-react · GitHub
Skip to content
BranchesTags
Repository files navigation
Student Management System
A full-stack TypeScript application for managing students with a React frontend and Node.js backend.
Features
  • Add Students: Create new student records with name, CPF, and email
  • Edit Students: Update existing student information (name and email)
  • Delete Students: Remove students from the system
  • View Students: List all registered students in a clean table format
  • CPF Validation: Ensures unique CPF numbers and proper formatting
  • Email Validation: Validates email format
  • Modern UI: Clean, responsive design with gradients and animations
  • Real-time Updates: Interface updates immediately after operations
Project Structure
teaching-assistant-react/
├── client/ # React TypeScript frontend
│ ├── src/
│ │ ├── components/ # React components
│ │ │ ├── StudentForm.tsx
│ │ │ └── StudentList.tsx
│ │ ├── services/ # API service classes
│ │ │ └── StudentService.ts
│ │ ├── types/ # TypeScript type definitions
│ │ │ └── Student.ts
│ │ ├── App.tsx # Main app component
│ │ ├── App.css # Styles
│ │ └── index.tsx # Entry point
│ ├── package.json
│ └── tsconfig.json
├── server/ # Node.js TypeScript backend
│ ├── src/
│ │ ├── models/ # Business logic classes
│ │ │ ├── Student.ts # Student class with validation
│ │ │ └── StudentSet.ts # Student collection management
│ │ └── server.ts # Express server with API routes
│ ├── package.json
│ └── tsconfig.json
└── .vscode/
└── launch.json # VS Code debug configurations

Getting Started
Prerequisites
  • Node.js 16+ and npm
  • VS Code (recommended)
Installation
Option 1: Use the installation script (Recommended)
./install-deps.sh
Option 2: Manual installation
  1. Install server dependencies:
    cd server
npm install
  2. Install client dependencies:
    cd client
npm install
Option 3: VS Code Tasks
  1. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
  2. Type "Tasks: Run Task"
  3. Select "Install All Dependencies"
Running the Application
Option 1: VS Code (Recommended)
  1. Open the project in VS Code
  2. Go to Run and Debug (Ctrl+Shift+D)
  3. Select "Launch Full Stack" from the dropdown
  4. Press F5 or click the play button
This will start both the server and client simultaneously.
Option 2: Manual Start
  1. Start the server:
    cd server
npm run dev
    Server runs on http://localhost:3005
  2. Start the client (in a new terminal):
    cd client
npm start
    Client runs on http://localhost:3004
Usage
  1. Open http://localhost:3004 in your browser
  2. Use the form at the top to add new students
  3. Fill in Name, CPF (Brazilian format: 000.000.000-00), and Email
  4. Click "Add Student" to save
  5. View all students in the table below
  6. Use "Edit" to modify student information
  7. Use "Delete" to remove students (with confirmation)
API Endpoints
The server provides a REST API:
  • GET /api/students - Get all students
  • POST /api/students - Create a new student
  • GET /api/students/:cpf - Get student by CPF
  • PUT /api/students/:cpf - Update student by CPF
  • DELETE /api/students/:cpf - Delete student by CPF
Architecture Highlights
Backend (Node.js + TypeScript)
  • Student Class: Handles individual student data with validation
  • StudentSet Class: Manages the collection of students with CRUD operations
  • Clean Architecture: Separation of concerns between models and API routes
  • Type Safety: Full TypeScript implementation
  • Error Handling: Proper validation and error responses
Frontend (React + TypeScript)
  • StudentService Class: Centralizes all API communication
  • Component Architecture: Reusable React components
  • Modern UI: CSS Grid, Flexbox, gradients, and animations
  • Form Handling: Real-time CPF formatting and validation
  • State Management: React hooks for state management
  • Error Handling: User-friendly error messages
Technologies Used
Backend
  • Node.js
  • Express.js
  • TypeScript
  • ts-node-dev (development)
Frontend
  • React 18
  • TypeScript
  • CSS3 (Grid, Flexbox, Animations)
  • Fetch API
Development Tools
  • VS Code with debug configurations
  • ESLint
  • TypeScript compiler
  • Hot reloading for both client and server
Port Configuration
The application uses ports 3005 and 3004 to avoid conflicts with other applications that might be using ports 3000-3003.
License
ISC
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
3 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - Zed201/teaching-assistant-react · GitHub
Skip to content
BranchesTags
Repository files navigation
Student Management System
A full-stack TypeScript application for managing students with a React frontend and Node.js backend.
Features
  • Add Students: Create new student records with name, CPF, and email
  • Edit Students: Update existing student information (name and email)
  • Delete Students: Remove students from the system
  • View Students: List all registered students in a clean table format
  • CPF Validation: Ensures unique CPF numbers and proper formatting
  • Email Validation: Validates email format
  • Modern UI: Clean, responsive design with gradients and animations
  • Real-time Updates: Interface updates immediately after operations
Project Structure
teaching-assistant-react/
├── client/ # React TypeScript frontend
│ ├── src/
│ │ ├── components/ # React components
│ │ │ ├── StudentForm.tsx
│ │ │ └── StudentList.tsx
│ │ ├── services/ # API service classes
│ │ │ └── StudentService.ts
│ │ ├── types/ # TypeScript type definitions
│ │ │ └── Student.ts
│ │ ├── App.tsx # Main app component
│ │ ├── App.css # Styles
│ │ └── index.tsx # Entry point
│ ├── package.json
│ └── tsconfig.json
├── server/ # Node.js TypeScript backend
│ ├── src/
│ │ ├── models/ # Business logic classes
│ │ │ ├── Student.ts # Student class with validation
│ │ │ └── StudentSet.ts # Student collection management
│ │ └── server.ts # Express server with API routes
│ ├── package.json
│ └── tsconfig.json
└── .vscode/
└── launch.json # VS Code debug configurations

Getting Started
Prerequisites
  • Node.js 16+ and npm
  • VS Code (recommended)
Installation
Option 1: Use the installation script (Recommended)
./install-deps.sh
Option 2: Manual installation
  1. Install server dependencies:
    cd server
npm install
  2. Install client dependencies:
    cd client
npm install
Option 3: VS Code Tasks
  1. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
  2. Type "Tasks: Run Task"
  3. Select "Install All Dependencies"
Running the Application
Option 1: VS Code (Recommended)
  1. Open the project in VS Code
  2. Go to Run and Debug (Ctrl+Shift+D)
  3. Select "Launch Full Stack" from the dropdown
  4. Press F5 or click the play button
This will start both the server and client simultaneously.
Option 2: Manual Start
  1. Start the server:
    cd server
npm run dev
    Server runs on http://localhost:3005
  2. Start the client (in a new terminal):
    cd client
npm start
    Client runs on http://localhost:3004
Usage
  1. Open http://localhost:3004 in your browser
  2. Use the form at the top to add new students
  3. Fill in Name, CPF (Brazilian format: 000.000.000-00), and Email
  4. Click "Add Student" to save
  5. View all students in the table below
  6. Use "Edit" to modify student information
  7. Use "Delete" to remove students (with confirmation)
API Endpoints
The server provides a REST API:
  • GET /api/students - Get all students
  • POST /api/students - Create a new student
  • GET /api/students/:cpf - Get student by CPF
  • PUT /api/students/:cpf - Update student by CPF
  • DELETE /api/students/:cpf - Delete student by CPF
Architecture Highlights
Backend (Node.js + TypeScript)
  • Student Class: Handles individual student data with validation
  • StudentSet Class: Manages the collection of students with CRUD operations
  • Clean Architecture: Separation of concerns between models and API routes
  • Type Safety: Full TypeScript implementation
  • Error Handling: Proper validation and error responses
Frontend (React + TypeScript)
  • StudentService Class: Centralizes all API communication
  • Component Architecture: Reusable React components
  • Modern UI: CSS Grid, Flexbox, gradients, and animations
  • Form Handling: Real-time CPF formatting and validation
  • State Management: React hooks for state management
  • Error Handling: User-friendly error messages
Technologies Used
Backend
  • Node.js
  • Express.js
  • TypeScript
  • ts-node-dev (development)
Frontend
  • React 18
  • TypeScript
  • CSS3 (Grid, Flexbox, Animations)
  • Fetch API
Development Tools
  • VS Code with debug configurations
  • ESLint
  • TypeScript compiler
  • Hot reloading for both client and server
Port Configuration
The application uses ports 3005 and 3004 to avoid conflicts with other applications that might be using ports 3000-3003.
License
ISC
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
3 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - Zed201/teaching-assistant-react · GitHub
Skip to content
BranchesTags
Repository files navigation
Student Management System
A full-stack TypeScript application for managing students with a React frontend and Node.js backend.
Features
  • Add Students: Create new student records with name, CPF, and email
  • Edit Students: Update existing student information (name and email)
  • Delete Students: Remove students from the system
  • View Students: List all registered students in a clean table format
  • CPF Validation: Ensures unique CPF numbers and proper formatting
  • Email Validation: Validates email format
  • Modern UI: Clean, responsive design with gradients and animations
  • Real-time Updates: Interface updates immediately after operations
Project Structure
teaching-assistant-react/
├── client/ # React TypeScript frontend
│ ├── src/
│ │ ├── components/ # React components
│ │ │ ├── StudentForm.tsx
│ │ │ └── StudentList.tsx
│ │ ├── services/ # API service classes
│ │ │ └── StudentService.ts
│ │ ├── types/ # TypeScript type definitions
│ │ │ └── Student.ts
│ │ ├── App.tsx # Main app component
│ │ ├── App.css # Styles
│ │ └── index.tsx # Entry point
│ ├── package.json
│ └── tsconfig.json
├── server/ # Node.js TypeScript backend
│ ├── src/
│ │ ├── models/ # Business logic classes
│ │ │ ├── Student.ts # Student class with validation
│ │ │ └── StudentSet.ts # Student collection management
│ │ └── server.ts # Express server with API routes
│ ├── package.json
│ └── tsconfig.json
└── .vscode/
└── launch.json # VS Code debug configurations

Getting Started
Prerequisites
  • Node.js 16+ and npm
  • VS Code (recommended)
Installation
Option 1: Use the installation script (Recommended)
./install-deps.sh
Option 2: Manual installation
  1. Install server dependencies:
    cd server
npm install
  2. Install client dependencies:
    cd client
npm install
Option 3: VS Code Tasks
  1. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
  2. Type "Tasks: Run Task"
  3. Select "Install All Dependencies"
Running the Application
Option 1: VS Code (Recommended)
  1. Open the project in VS Code
  2. Go to Run and Debug (Ctrl+Shift+D)
  3. Select "Launch Full Stack" from the dropdown
  4. Press F5 or click the play button
This will start both the server and client simultaneously.
Option 2: Manual Start
  1. Start the server:
    cd server
npm run dev
    Server runs on http://localhost:3005
  2. Start the client (in a new terminal):
    cd client
npm start
    Client runs on http://localhost:3004
Usage
  1. Open http://localhost:3004 in your browser
  2. Use the form at the top to add new students
  3. Fill in Name, CPF (Brazilian format: 000.000.000-00), and Email
  4. Click "Add Student" to save
  5. View all students in the table below
  6. Use "Edit" to modify student information
  7. Use "Delete" to remove students (with confirmation)
API Endpoints
The server provides a REST API:
  • GET /api/students - Get all students
  • POST /api/students - Create a new student
  • GET /api/students/:cpf - Get student by CPF
  • PUT /api/students/:cpf - Update student by CPF
  • DELETE /api/students/:cpf - Delete student by CPF
Architecture Highlights
Backend (Node.js + TypeScript)
  • Student Class: Handles individual student data with validation
  • StudentSet Class: Manages the collection of students with CRUD operations
  • Clean Architecture: Separation of concerns between models and API routes
  • Type Safety: Full TypeScript implementation
  • Error Handling: Proper validation and error responses
Frontend (React + TypeScript)
  • StudentService Class: Centralizes all API communication
  • Component Architecture: Reusable React components
  • Modern UI: CSS Grid, Flexbox, gradients, and animations
  • Form Handling: Real-time CPF formatting and validation
  • State Management: React hooks for state management
  • Error Handling: User-friendly error messages
Technologies Used
Backend
  • Node.js
  • Express.js
  • TypeScript
  • ts-node-dev (development)
Frontend
  • React 18
  • TypeScript
  • CSS3 (Grid, Flexbox, Animations)
  • Fetch API
Development Tools
  • VS Code with debug configurations
  • ESLint
  • TypeScript compiler
  • Hot reloading for both client and server
Port Configuration
The application uses ports 3005 and 3004 to avoid conflicts with other applications that might be using ports 3000-3003.
License
ISC
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
3 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - Zed201/teaching-assistant-react · GitHub
Skip to content
BranchesTags
Repository files navigation
Student Management System
A full-stack TypeScript application for managing students with a React frontend and Node.js backend.
Features
  • Add Students: Create new student records with name, CPF, and email
  • Edit Students: Update existing student information (name and email)
  • Delete Students: Remove students from the system
  • View Students: List all registered students in a clean table format
  • CPF Validation: Ensures unique CPF numbers and proper formatting
  • Email Validation: Validates email format
  • Modern UI: Clean, responsive design with gradients and animations
  • Real-time Updates: Interface updates immediately after operations
Project Structure
teaching-assistant-react/
├── client/ # React TypeScript frontend
│ ├── src/
│ │ ├── components/ # React components
│ │ │ ├── StudentForm.tsx
│ │ │ └── StudentList.tsx
│ │ ├── services/ # API service classes
│ │ │ └── StudentService.ts
│ │ ├── types/ # TypeScript type definitions
│ │ │ └── Student.ts
│ │ ├── App.tsx # Main app component
│ │ ├── App.css # Styles
│ │ └── index.tsx # Entry point
│ ├── package.json
│ └── tsconfig.json
├── server/ # Node.js TypeScript backend
│ ├── src/
│ │ ├── models/ # Business logic classes
│ │ │ ├── Student.ts # Student class with validation
│ │ │ └── StudentSet.ts # Student collection management
│ │ └── server.ts # Express server with API routes
│ ├── package.json
│ └── tsconfig.json
└── .vscode/
└── launch.json # VS Code debug configurations

Getting Started
Prerequisites
  • Node.js 16+ and npm
  • VS Code (recommended)
Installation
Option 1: Use the installation script (Recommended)
./install-deps.sh
Option 2: Manual installation
  1. Install server dependencies:
    cd server
npm install
  2. Install client dependencies:
    cd client
npm install
Option 3: VS Code Tasks
  1. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
  2. Type "Tasks: Run Task"
  3. Select "Install All Dependencies"
Running the Application
Option 1: VS Code (Recommended)
  1. Open the project in VS Code
  2. Go to Run and Debug (Ctrl+Shift+D)
  3. Select "Launch Full Stack" from the dropdown
  4. Press F5 or click the play button
This will start both the server and client simultaneously.
Option 2: Manual Start
  1. Start the server:
    cd server
npm run dev
    Server runs on http://localhost:3005
  2. Start the client (in a new terminal):
    cd client
npm start
    Client runs on http://localhost:3004
Usage
  1. Open http://localhost:3004 in your browser
  2. Use the form at the top to add new students
  3. Fill in Name, CPF (Brazilian format: 000.000.000-00), and Email
  4. Click "Add Student" to save
  5. View all students in the table below
  6. Use "Edit" to modify student information
  7. Use "Delete" to remove students (with confirmation)
API Endpoints
The server provides a REST API:
  • GET /api/students - Get all students
  • POST /api/students - Create a new student
  • GET /api/students/:cpf - Get student by CPF
  • PUT /api/students/:cpf - Update student by CPF
  • DELETE /api/students/:cpf - Delete student by CPF
Architecture Highlights
Backend (Node.js + TypeScript)
  • Student Class: Handles individual student data with validation
  • StudentSet Class: Manages the collection of students with CRUD operations
  • Clean Architecture: Separation of concerns between models and API routes
  • Type Safety: Full TypeScript implementation
  • Error Handling: Proper validation and error responses
Frontend (React + TypeScript)
  • StudentService Class: Centralizes all API communication
  • Component Architecture: Reusable React components
  • Modern UI: CSS Grid, Flexbox, gradients, and animations
  • Form Handling: Real-time CPF formatting and validation
  • State Management: React hooks for state management
  • Error Handling: User-friendly error messages
Technologies Used
Backend
  • Node.js
  • Express.js
  • TypeScript
  • ts-node-dev (development)
Frontend
  • React 18
  • TypeScript
  • CSS3 (Grid, Flexbox, Animations)
  • Fetch API
Development Tools
  • VS Code with debug configurations
  • ESLint
  • TypeScript compiler
  • Hot reloading for both client and server
Port Configuration
The application uses ports 3005 and 3004 to avoid conflicts with other applications that might be using ports 3000-3003.
License
ISC
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
3 forks
Report repository
Releases
Packages
Contributors
Languages