Fullstack
Development
Workshop
4 Days Syllabus
LIVE PROJECT BUILDING
A progressive hands on journey to build and deploy a
modern full stack web application
REGISTRATION FEES
IEEE CS MEMBERS : 450/-
IEEE MEMBERS : 500/-
NON-IEEE MEMBERS: 750/-
07/08/2025 & 08/08/2025(online)
09/08/2025 &10/08/2025(offline)
FOSS LAB ,CEAL
MENTORS
AJITH KUMAR AMJAD N
Product engineers UST Global
Day 1 – Frontend Foundations
& JS Basics (online)
● Intro to full stack development, how things work
(HTML, CSS, JS → React → Hono (Node.js)
→ MongoDB (or SQLite) → Vercel + Render)
● Semantic HTML5 (forms, inputs, structure)
● CSS fundamentals: flexbox, grid, and responsive
layout
● Vanilla JavaScript basics:
○ Variables, functions, arrays, DOM
○ Event handling and form validation
○ Modules and ES6 syntax
● Typescript fundamentals
Hands-On Activities
● Create a static homepage for the Notes app
● Implement:
○ Note form with title + body
○ In-memory storage of notes
○ Simple public/private toggle
● Style using CSS, make it responsiveOutcome
Static Notes App that allows note creation and
toggling
public/private status, with real-time DOM
updates using JavaScript.
Outcome
Static Notes App that allows note creation and
toggling public/private status, with real-time DOM
updates using JavaScript
Day 2 – Modern Frontend
with React (online)
Topics Covered
● Why React, and Vite: limitations of vanilla JS
● Project setup with Vite + npm
● React fundamentals:
○ JSX
○ Components & props
○ useState, useEffect
● Folder structure, modular components
● Lifting state, prop drilling
Hands-On Activities
● Convert the app to React with:
○ NoteForm, NoteList, NoteItem components
○ Filter notes by public/private
○ Dynamic rendering of notes
● Maintain note state and form control with useState
Outcome
A React-based frontend that manages and
displays notes with public/private status and form
handling.
Day 3 – Backend with Hono
(Node.js) & Database (offline)
Topics Covered
● Why backend? Separation of concerns
● Intro to Hono: lightweight and fast alternative to
Express
● Setting up routes, handlers, middleware in Hono
● RESTful API:
○ GET /notes
○ POST /notes
○ DELETE /notes/:id
● Persistence using MongoDB (or SQLite)
● Async operations with async/await
Hands-On Activities
● Create a Hono backend with the above routes
● Store notes in a database with public/private flag
● Implement middleware for logging and JSON parsing
● Connect React frontend to Hono backend using fetch
Outcome
Backend API built with Hono and connected to
React, storing and retrieving notes with persistent
storage
Day 4 – Authentication,
Deployment & Public/Private
Sharing(offline)
Topics Covered
● Basic user auth (JWT or session-based)
● Auth middleware in Hono
● Implement note ownership and visibility
(public/private)
● CORS setup and .env usage
● Deployment:
○ Frontend → Vercel
○ Backend → Render or Railway
● Connect deployed services
● Optional: Share public notes via URL
Hands-On Activities
● Add user signup/login with JWT
● Secure private notes; show only public notes
if unauthenticated
● Deploy frontend and backend
● Connect deployed services and test
Outcome
A deployed fullstack Notes App with authentication,
public/private note sharing, and secure API
Stack Summary & Final
Deliverable
A deployed Notes App with:
● User authentication
● Public/private toggle on notes
● CRUD support
● Live links to shared notes
● Frontend + Backend hosted and connected
register now
for more details
aromal:80862 64659
