**COMPANY: CODTECH IT SOLUTIONS
*NAME: K.HARSHITA
*INTERN ID: :CT04DF254
*DOMAIN: FULL STACK WEB DEVELOPMENT
*DURATION:4 WEEEKS
*MENTOR: NEELA SANTOSH
*Task 1: API Integration – Live Data Webpage The goal of Task-1 was to create a simple yet functional web page that fetches real-time data from a public API such as weather, news, or cryptocurrency. This task tested our understanding of asynchronous programming using JavaScript, API handling via fetch() or axios, and responsive design. The final product was a mobile-friendly, dynamic webpage that fetches and displays data like city-based weather using OpenWeather API. It includes a user input field, search functionality, and auto-refresh. The frontend was styled using HTML and CSS to ensure clarity and readability, and the app updates dynamically without needing to reload the page.
Task 2: Real-Time Chat Application Using Socket.IO Task-2 focused on building a real-time chat application that allows multiple users to communicate instantly. This was achieved using Socket.IO for handling WebSocket communication and Node.js for the backend. A minimal HTML/CSS frontend was created, and the entire application runs on localhost. The backend listens for socket connections, handles user messages, and broadcasts them to other connected users in real-time. This task demonstrated practical knowledge of event-driven architecture, server-client communication, and real-time data handling. It helped reinforce the fundamentals of Express, WebSockets, and live data updates in multi-user applications.
Task 3: Real-Time Collaborative Document Editor Task-3 required us to create a real-time collaborative document editor — similar to Google Docs — using modern frontend frameworks like React.js and backend tools like Node.js + Socket.IO. The application allows multiple users to edit the same text area in real-time. Whenever one user types, the text updates live for all others. React handles the frontend UI dynamically, while the backend server handles socket connections and shares text updates between clients. This task helped in mastering React hooks, state management, and backend synchronization. Optional MongoDB integration can also be added to persist the document data for longer sessions. It demonstrated the ability to integrate frontend and backend for high-performance collaboration apps.
Task 4: Chrome Extension for Time Tracking and Productivity Analytics Task-4 was about developing a Chrome Extension that tracks how much time a user spends on different websites and classifies them as productive or unproductive. The backend script (background.js) runs as a service worker and tracks site activity using chrome.tabs APIs. The frontend (popup.html, popup.js, style.css) displays a breakdown of usage time in a clean popup UI. The time is stored using chrome.storage.local, and users can view real-time productivity stats by clicking the extension icon. Optionally, a dashboard or weekly report could be implemented using Chart.js and Firebase. This task was a deep dive into Chrome APIs, extension architecture, and local data handling — ideal for real-world productivity tools.
*OUTPUT:
