Full-Stack Development Training
Subject: Full-stack development using sp
Duration: 10 Days (2 weeks)
Total Hours: 60 Hours (6 hours/day)
Workshop Type: Hands-on Enterprise Full-Stack Development
Day 1: Frontend Fundamentals (HTML, CSS, Tailwind, JS Basics)
Session 1 - Introduction & HTML Basics
• Course overview & expectations
• Web architecture (Client-Server Model)
• HTML5 structure, tags, forms, semantic elements
• Hands-on: Building a basic HTML page
Session 2 - CSS & Tailwind CSS
• CSS fundamentals (Box Model, Flexbox, Grid)
• Introduction to Tailwind CSS (Utility-first approach)
• Hands-on: Styling a webpage with Tailwind
Session 3 - JavaScript (ES6+ Basics)
• Variables (let, const), Data Types, Operators
• Functions (Arrow functions, Default params)
• Template literals, Destructuring
• Hands-on: Simple JS exercises
Session 4 - DOM Manipulation
• Selecting & modifying DOM elements
• Event handling (click, submit, etc.)
• Dynamic HTML updates
Session 5 - Advanced JavaScript (ES6+)
• Array methods (map, filter, reduce, etc)
• Promises & Async/Await
• Fetch API (Basic HTTP requests)
• Hands-on: Fetching & displaying data from a mock API
Session 6 - Mini Project (Frontend Only)
• Hands-on: Interactive To-Do List
• Code review & best practices
Day 2: React.js Fundamentals
Session 1 - React Introduction
Why React? (Virtual DOM, Components)
Setting up a React app (Vite / CRA)
JSX syntax & component structure
Session 2 - React State & Props
useState hook
Passing data via props
Conditional rendering
Hands-on: Counter App
Session 3 - React Hooks & Effects
useEffect (API calls, side effects)
Custom hooks
Hands-on: Fetching & displaying data
Session 4 - React Router
Setting up routes (react-router-dom)
Dynamic routing
Hands-on: Multi-page SPA
Session 5 - Forms & State Management
Controlled components
Form validation
Hands-on: User Registration Form
Session 6 - React Mini Project
Build a Movie Search App (OMDb API)
Day 3: Databases & Java EE Essentials (Replaces Node.js)
Session 1 – Introduction to Databases (SQL)
Relational databases overview
SQL queries: SELECT, INSERT, UPDATE, DELETE
Joins, indexing, normalization
Session 2 – PostgreSQL with Java
JDBC setup (Java Database Connectivity)
Executing queries via JDBC
Hands-on: Student Database CRUD
Session 3 – Advanced JDBC & DAO Pattern
Prepared statements
Transactions
DAO (Data Access Object) design pattern
Session 4 – Java EE Basics (Servlets & JSP)
Servlets lifecycle
Handling HTTP requests & responses
JSP basics (views, forms)
Session 5 – Mini Project (Java EE + DB)
Build a Student Registration App (Servlets + JSP + PostgreSQL)
Session 6 – Transition to Spring Boot
Why Spring Boot over Java EE?
Introduction to Spring ecosystem
Day 4: Spring Boot (Java Backend)
Session 1 – Java Basics Refresh
• Java syntax & best practices
• Data types, operators, control structures
• Hands-on: Simple Java exercises
Session 2 – Collections Framework
• Lists, Sets, Maps, Iterators
• Generics in Java
• Hands-on: Student Management with Collections
Session 3 – Spring Boot Basics
Spring Initializr, REST Controllers, Dependency Injection
Session 4 – JPA & Hibernate
ORM concepts
CRUD Repository
Hands-on: Employee API
Session 5 – Spring Security
Basic Authentication & JWT
Securing endpoints
Session 6 – Frontend Integration
Connecting React with Spring Boot APIs
CORS handling
Session 7 – Full-Stack Mini Project
Blog App (React + Spring Boot + PostgreSQL)
Day 5: Advanced Topics (TypeScript, Angular, Deployment)
Session 1 – TypeScript Basics
Static typing, interfaces
Using TS with React
Session 2 – Angular Introduction
Components
Directives
Services
Session 3 – Deployment
Deploying frontend & backend (Vercel, Render, Netlify)
Session 4–6 – Full-Stack Project
Students choose their major project (E-commerce, Blog, Social Media, etc.)
Day 6: Advanced Spring Boot
Session 1 – JPA Advanced
• Relationships (OneToOne, OneToMany, ManyToMany)
• Pagination & Sorting
• Hands-on: Employee Directory
Session 2 – Spring Security Deep Dive
• Role-based authentication
• Password hashing with BCrypt
Session 3 – API Documentation
• Swagger / OpenAPI integration
Session 4 – Testing APIs
• JUnit & Mockito
• Postman testing
Session 5–6 – Mini Project
• Employee Management System (React + Spring Boot + PostgreSQL)
Day 7: Advanced Topics (TypeScript, Angular Intro, Microservices)
Session 1 – TypeScript Basics
• Static typing, interfaces, generics
Session 2 – Angular Introduction
• Components, Directives, Services
Session 3 – Microservices Overview
• Monolith vs Microservices
• Intro to Spring Cloud (Eureka, API Gateway)
Session 4 – Docker Basics
• Containerizing a Spring Boot app
Session 5–6 – Hands-on
• Deploy Spring Boot app with Docker
Day 8: Deployment & CI/CD
Session 1 – Deployment Basics
• Deploying frontend (Vercel/Netlify)
• Deploying backend (Render/Heroku)
Session 2 – Environment Management
• Config files, secrets, environment variables
Session 3 – CI/CD Introduction
• Why CI/CD matters in enterprises
• Overview of GitHub Actions
Session 4 – GitHub Actions (30-min demo)
• Build & deploy Spring Boot app with GitHub Actions
Session 5 – Resume Building (Technical)
• Structuring resume for developer roles
• Highlighting projects, GitHub, and skills
Session 6 – LinkedIn Optimization
• Creating a recruiter-friendly profile
• Project showcase & networking strategies
Day 9: Major Full-Stack Project (Development)
Sessions 1–6
• Students work in groups on chosen projects (E-commerce, Blog, Social Media, Task
Manager)
• Mentorship & debugging
Day 10: Final Project, GitHub & Presentations
Sessions 1–4 – Project Work
• Students finalize their projects
• Mentorship & debugging support
Session 5 – Git & GitHub Essentials
• Git basics, branching, pull requests, handling merge conflicts
• Students push final projects to GitHub
Session 6 – Demo Day + GitHub Showcase
• Student presentations + GitHub repos showcase
• Best project & GitHub practices recognized
Final Outcome
By the end, students will have:
• Refreshed Core Java & OOP skills
• Built multiple mini-projects + one major project
• Worked with React, Spring Boot, PostgreSQL, Docker, GitHub Actions
• Learned CI/CD pipelines, resume writing, and LinkedIn optimization
• Deployed & showcased apps with a GitHub portfolio
• Gained confidence to work as enterprise-ready full-stack developers
Final Outcome:
By the end, students will have:
Built multiple mini-projects
Worked with React, Node, Spring Boot, PostgreSQL
Deployed a full-stack app
Gained confidence to build any website independently
