TPDS-Assignments

A collection of web development lab assignments covering full-stack development with Node.js, Express, and modern frontend technologies. All applications use in-memory storage for simplicity and portability.

📚 Table of Contents

• Overview
• Technologies Used
• Lab Assignments
• Installation
• Running the Labs
• Features

🎯 Overview

This repository contains 9 complete full-stack web applications, each demonstrating different concepts in web development:

1. Todo App - Task management with CRUD operations
2. Counter App - Real-time counter synchronization
3. User Form - User registration and data validation
4. Quote Generator - Random quotes with favorites
5. Event Planner - Event scheduling with date filtering
6. Recipe App - Recipe management system
7. Book Review App - Book reviews with ratings
8. Freelance App - Project bidding platform with authentication
9. Job Board App - AI-powered job matching with recommendations

All labs feature modern, gradient-themed UIs with responsive designs.

🛠️ Technologies Used

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• bcrypt - Password hashing (Labs 8-9)
• jsonwebtoken (JWT) - Authentication (Labs 8-9)
• CORS - Cross-origin resource sharing

Frontend

• HTML5 - Structure
• CSS3 - Styling with gradients and animations
• JavaScript (ES6+) - Client-side logic
• Fetch API - HTTP requests

Storage

• In-Memory Arrays - All data stored in memory (no database required)

📁 Lab Assignments

Lab 1: Todo App

Port: 5000
Features:

• Add, view, and delete todos
• Simple task management
• Clean blue gradient UI

Endpoints:

• GET /todos - Get all todos
• POST /todos - Add new todo
• DELETE /todos/:id - Delete todo

---

Lab 2: Counter App

Port: 5000
Features:

• Increment, decrement, and reset counter
• Server-side state synchronization
• Real-time updates

Endpoints:

• GET /count - Get current count
• POST /count - Update count

---

Lab 3: User Form

Port: 5000
Features:

• User registration form
• Display all registered users
• Form validation

Endpoints:

• GET /users - Get all users
• POST /users - Register new user

---

Lab 4: Quote Generator

Port: 5000
Features:

• Random quote generation
• Favorite quotes system
• Inspirational content

Endpoints:

• GET /quote - Get random quote
• GET /favorites - Get favorite quotes
• POST /favorites - Add to favorites

---

Lab 5: Event Planner

Port: 5000
Features:

• Create and manage events
• Filter events by date
• Event scheduling

Endpoints:

• GET /events - Get all events
• POST /events - Create new event
• GET /events/filter - Filter events by date

---

Lab 6: Recipe App

Port: 5000
Features:

• Add and browse recipes
• Recipe details with ingredients
• Delete recipes
• Pre-loaded sample recipes

Endpoints:

• GET /recipes - Get all recipes
• POST /recipes - Add new recipe
• DELETE /recipes/:id - Delete recipe

---

Lab 7: Book Review App

Port: 5001
Features:

• Submit book reviews
• Star ratings (1-5)
• Filter reviews by rating
• Edit and delete reviews
• Pre-loaded sample reviews

Endpoints:

• GET /reviews - Get all reviews
• POST /reviews - Add new review
• GET /reviews/filter - Filter by rating
• PUT /reviews/:id - Update review
• DELETE /reviews/:id - Delete review

---

Lab 8: Freelance App

Port: 5002
Features:

• User authentication (JWT)
• Post and browse projects
• Bidding system
• User-specific project management
• Secure password hashing with bcrypt

Endpoints:

• POST /register - Register new user
• POST /login - Login user
• GET /projects - Get all projects
• POST /projects - Create project (authenticated)
• POST /bids - Submit bid (authenticated)
• GET /bids/:id - Get project bids
• DELETE /projects/:id - Delete project (authenticated)

Sample Users:

• Username: john_doe, Password: password123
• Username: jane_smith, Password: password456

---

Lab 9: AI-Powered Job Board

Port: 5003
Features:

• User authentication with JWT
• Post job listings
• AI-powered job recommendations (skill matching)
• Application system
• Search and pagination
• Applicant tracking
• Match score calculation

Endpoints:

• POST /register - Register with skills
• POST /login - Login user
• GET /jobs - Get all jobs (paginated, searchable)
• GET /jobs/recommended - Get AI-recommended jobs
• POST /jobs - Post new job (authenticated)
• POST /applications - Apply to job (authenticated)
• GET /applications/:job_id - View applicants
• DELETE /jobs/:id - Delete job (authenticated)

Sample Users:

• Username: alice, Password: password123, Skills: JavaScript, React, Node.js
• Username: bob, Password: password123, Skills: Python, Django, Machine Learning

AI Recommendation: The system uses keyword matching to compare user skills with job requirements and provides a match score. Top 3 matching jobs are recommended.

---

🚀 Installation

Prerequisites

• Node.js (v14 or higher)
• npm (comes with Node.js)

Install Dependencies

Navigate to each lab folder and install dependencies:

# Lab 1
cd Lab1/todo-app
npm install

# Lab 2
cd Lab2/counter-appInitialize
npm install

# Lab 3
cd Lab3/user-form
npm install

# Lab 4
cd Lab4/quote-generator
npm install

# Lab 5
cd Lab5/event-planner
npm install

# Lab 6
cd Lab6/recipe-app
npm install

# Lab 7
cd Lab7/book-review-app
npm install

# Lab 8
cd Lab8/freelance-app
npm install

# Lab 9
cd Lab9/job-board-app
npm install

Or use this one-liner to install all:

for lab in Lab{1..9}/*-app*/; do (cd "$lab" && npm install); done

🎮 Running the Labs

Each lab runs independently. Navigate to the lab folder and start the server:

# Example: Run Lab 1
cd Lab1/todo-app
npm start
# or
node server.js

Then open your browser to:

• Labs 1-6: http://localhost:5000
• Lab 7: http://localhost:5001
• Lab 8: http://localhost:5002
• Lab 9: http://localhost:5003

Note: Only run one lab at a time for Labs 1-6 since they share the same port.

✨ Features

UI/UX

• 🎨 Modern gradient themes (unique for each lab)
• 📱 Responsive design (mobile-friendly)
• ✨ Smooth animations and transitions
• 🎯 Card-based layouts
• 🌈 Beautiful color schemes

Backend

• 🔒 Secure authentication (Labs 8-9)
• 🚀 RESTful API design
• 💾 In-memory storage (no database setup needed)
• ✅ Input validation
• 🔄 CORS enabled

Frontend

• ⚡ Vanilla JavaScript (no frameworks)
• 🎯 Clean and maintainable code
• 📊 Real-time updates
• 🔍 Search and filtering (Labs 5, 7, 9)
• 📄 Pagination (Lab 9)

🧪 Testing

Manual Testing

1. Registration/Login (Labs 8-9)

   • Register a new user
   • Login with credentials
   • Verify JWT token storage

2. CRUD Operations

   • Create new items
   • Read/view items
   • Update items (Lab 7)
   • Delete items

3. Special Features

   • Test AI recommendations (Lab 9)
   • Try bidding system (Lab 8)
   • Use search and filters
   • Test pagination

📝 Sample Data

Each lab with authentication comes pre-loaded with sample users and data:

• Lab 8: 2 users, 2 projects, 2 bids
• Lab 9: 2 users, 3 jobs, 0 applications

Default password for all sample users: password123

🎓 Learning Outcomes

By completing these labs, you'll learn:

1. Full-stack Development

   • Building REST APIs with Express.js
   • Creating responsive frontends
   • Client-server communication

2. Authentication & Security

   • Password hashing with bcrypt
   • JWT token-based authentication
   • Secure route protection

3. Data Management

   • CRUD operations
   • In-memory data structures
   • State management

4. Advanced Features

   • Search and filtering
   • Pagination
   • AI-powered recommendations
   • Real-time updates

5. UI/UX Design

   • Modern CSS techniques
   • Responsive layouts
   • User experience optimization

🤝 Contributing

This is a learning repository. Feel free to:

• Add new features
• Improve UI/UX
• Fix bugs
• Add more labs

📄 License

MIT License - Feel free to use for learning purposes

👤 Author

Created as part of TPDS (Technologies for Parallel and Distributed Systems) coursework.

---

Happy Coding! 🚀