Task 1: User Management System

Duration: 25th May – 7th July (Pre-office)

Overview:
Developed a fully functional User Management Web App using
React.js and Bootstrap 5. The app supports user state
management (active/inactive), soft delete with restore,
pagination, and real-time tab synchronization using
localStorage. Focused on reusable components, responsive UI,
and clean UX design.

Tech Stack: React.js, Bootstrap 5, React Icons, localStorage,

useState/useEffect.

Key Features:
● Active/Inactive user categorization with instant UI updates.

● Soft delete & restore with permanent delete option.

● Real-time tab sync using localStorage.

● Pagination for large datasets.

● Responsive design with Bootstrap grid.

UI/UX Highlights:
● Reusable components (UserCard, Modals, ActionButtons).

● Visual cues (line-through for inactive users).

● Clean card & table-based layout.

Future Enhancements: Backend integration

(Firebase/Node.js), authentication, role-based access, export to
CSV.

GitHub Repo: User Management Dashboard

Task 2: Image Gallery with Filter & View
Duration: 8th July – 11th July
Overview:
Developed a responsive Image Gallery Web App using React.js
and Bootstrap 5. The app enables users to filter images in real-
time, view individual image details via route-based navigation,
and browse through paginated results. Designed with a clean
card-based layout and smooth navigation.

Tech Stack: React.js, Bootstrap 5, React Router DOM,

useState/useEffect, items.json.

Key Features:
● Dynamic Filtering with live search and reset option.

● Responsive Grid Layout using Bootstrap’s grid system.

● Item Detail Page with /item/:id route and back navigation.

● Pagination for better performance with large datasets.

UI/UX Highlights:

● Card-based gallery design with responsive scaling.

● Dedicated detail page for focused viewing.

● Styled buttons for search, navigation, and actions.

Future Enhancements: Category filters, user-uploaded

images, lazy loading, infinite scroll, favorites/bookmarks.
GitHub Repo: Image Gallery

Task 3: Image Gallery with TypeScript Integration

Duration: 14th July – 18th July
Overview:
Rebuilt an Image Gallery Web App in TypeScript to improve
type safety, maintainability, and scalability. Transitioned from
JavaScript to TypeScript while retaining React architecture.
Implemented product browsing, detailed views, and a favorites
feature using type-safe props, interfaces, and modular
components.

Tech Stack: React + Vite, TypeScript, Bootstrap 5, React

Router DOM, React Icons, LocalStorage.

Key Features:

● Product Gallery with Favorites (heart toggle, persistent via

LocalStorage).
● Detailed Product View with /product/:id routing and back
navigation.
● Reusable Favorite Button Component with hover/active
states.
● Custom TypeScript Interfaces for props, state, and data
models.
UI/UX Highlights:

● Clean, responsive card layout for gallery and detail views.

● Interactive heart icons with smooth transitions.

● Optimized for mobile, tablet, and desktop.

Future Enhancements: Search/filter, global favorites list, API

integration, lazy-loading, centralized state (Context API/Redux).

GitHub Repo: Image Gallery TS

Task 4: Image Gallery with useContext & useReducer

Integration
Duration: 21st July – 24th July
Overview:
Extended the Image Gallery project by integrating useContext
and useReducer to implement global state management for
products and favorites. This improved scalability,
maintainability, and state flow across the app. Leveraged strict
TypeScript typing for reducers, actions, and props, ensuring
predictable state transitions and reusable component design.

Tech Stack: React + Vite, TypeScript, Bootstrap 5, React Router DOM,

React Icons, LocalStorage.

Key Features:
● Global State with Context + Reducer for products and favorites.

● Product Gallery Page with responsive grid and favorite toggle.

 ● Product Detail Page with enlarged view, description, and smooth
navigation.
● Reusable Favorite Button Component accessing state via context.

● Strict Type Safety for actions, reducers, and props.

UI/UX Highlights:
● Clean, responsive Bootstrap 5 card-based layout.

● Heart icon transitions between filled and outlined states.

● Detail view styled with back navigation for user-friendly flow.

Future Enhancements: Favorites-only page, search/filter feature,

API/Firebase integration, global toast notifications.

GitHub Repo: Image Gallery Context + Reducer

Task 5: Weather Forecast App

Duration: 25th July – 28th July
Overview:
Developed a responsive Weather Forecast App using React with
live data integration from the OpenWeatherMap API. The app
allows users to search any city and view real-time weather
details like temperature, humidity, wind speed, and conditions.
Emphasis was on API handling, loading states, conditional
rendering, and error management for a smooth user
experience.
Tech Stack: React + Vite, CSS (Flexbox + gradients), Axios,
OpenWeatherMap API.

Key Features:

● Search by City Name → Fetches live weather data.

● Real-Time API Integration with Axios.

● Loading Spinner for seamless UX during fetch.

● Error Handling for invalid or empty inputs.

● Weather Result Card → Displays city, temperature,

humidity, wind, description, and icons dynamically.

UI/UX Highlights:

● Gradient background with centered white card design.

● Styled inputs and buttons with rounded borders.

● Fully responsive across desktop and mobile.

Future Improvements:

● 5-day forecast with charts.

● Auto-detect location using geolocation API.

● Show last updated time for reliability.

● Enhanced validation with autocomplete suggestions.

GitHub Repo: Weather Forecast App

Task 6: Blogging Platform

Duration: 25th July – 28th July
Overview:
Built a full-featured Blogging Platform using React and
Firebase, allowing users to create, edit, like, and comment on
posts with real-time updates. The project highlights
authentication, protected routes, modals, responsive UI, and a
clean author dashboard, delivering a professional blogging
experience.

Tech Stack:

● Frontend: React (Vite), React Router DOM, TipTap

(WYSIWYG editor), React Icons
● Backend (BaaS): Firebase Authentication, Firestore (real-
time DB), Firebase Storage (optional for images)

Authentication:

● Secure login/signup via Email and Google.

● Persistent user sessions with Firebase Auth.

● Certain actions (like/comment) require login → triggers

modal if unauthenticated.

Key Features:
1. Post Creation & Editing

● TipTap editor with formatting options: bold, italic,

underline, lists, undo/redo
● Post title and content are mandatory, tags are optional

● Edit mode is automatically detected from route

parameters

2. Like & Comment System

 ● Real-time updates using Firestore

● Each user can like a post only once (no duplicate likes)

● Threaded comments include user details and timestamps

● Unauthenticated users see a login prompt modal when

trying to interact

3. Home Page

● Displays all blog posts in responsive cards

● Clicking a post card opens the detailed post page

4. Post Detail Page

● Renders full blog content along with likes and comments

● Comments are styled like a social media thread

5. Author Dashboard

● Displays all posts created by the logged-in user

● Edit and delete options available for each post

● Delete action is protected with a confirmation modal

● Posts are shown in reverse chronological order

UI & UX Highlights:

● Reusable components (PostCard, Modal, Toolbar, Stats).

● Responsive design with consistent theme & hover effects.

● Clean spacing, alerts, and polished modals.

Folder Structure:
src/

├── components/ # Reusable UI (Modal, PostCard, Toolbar)

├── pages/ # Home, PostPage, Editor, AuthorPage

├── provider/ # AuthProvider with Context API

├── firebase/ # Firebase config & init

├── styles/ # Modular & optimized CSS

GitHub Repo: Blogging Platform

Task 7: Product Gallery with Next.js

Duration: 29th July – 31st July
Overview:
Built a responsive Product Gallery using Next.js and
Tailwind CSS, focusing on reusable components, prop
handling, and clean UI design. Integrated Cart and Wishlist
features with interactive buttons for a smooth shopping
experience.

Tech Stack:
• Next.js
• React
• Tailwind CSS
• TypeScript (optional)

Key Features:
• Reusable ProductCard & ProductGallery components.
• Multiple image support with safe prop validation.
• Cart & Wishlist buttons placed side-by-side.
• Centered “View More” button for product details.
• Responsive grid layout optimized for desktop & mobile.
UI/UX Highlights:
• Clean, image-first card design.
• Grid layout with proper spacing & hover effects.
• Balanced button styling for consistent flow.

Future Enhancements:
• Search & filter options
• API or Firebase product data integration
• Motion animations for interactivity

GitHub Repo: Product Gallery Next.js

Task 8: Blogging Platform with Next.js

Duration: 1st Aug – 4th Aug
Overview:
Developed a full-featured blogging platform using Next.js and
Firebase, enabling users to create, edit, like, and comment on
blog posts. The app ensures a smooth experience with secure
authentication, a responsive layout, and modular components.

Tech Stack:
• Next.js
• Firebase (Auth, Firestore, Storage)
• TipTap Editor
• Tailwind CSS
• TypeScript

Key Features:
• Create & edit posts with TipTap editor (bold, italic, lists,
undo/redo).
• Like & comment system with real-time Firestore updates.
• Authentication via Firebase (Google & Email login).
• Author dashboard for managing user’s own posts.
• Protected routes with login modals for guest users.
UI/UX Highlights:
• Responsive post cards & detailed post pages.
• Clean author dashboard with edit/delete options.
• Styled threaded comments for social-like interactions.
Future Enhancements:
• Image uploads in posts
• Tag-based filtering & search
• Pagination or infinite scroll
• Richer user profile pages

GitHub Repo: Blogging Platform Next.js

Task 9: E-Commerce Platform with Next.js

Duration: 10th Aug – 15th Aug
Overview:
Built a functional e-commerce platform using Next.js, featuring
product listings, detailed product pages, a shopping cart,
wishlist, search functionality, and product reviews. Focused on
integrating frontend components with backend logic while
ensuring state management, reusability, and responsive UI.

Tech Stack:
• Next.js
• Tailwind CSS
• Firebase / JSON Data Source
• React Context API + LocalStorage

Key Features:
• Product Listings – Reusable product card components,
responsive grid layout.
• Product Details Page – Dynamic routes with detailed info,
description, and reviews.
• Shopping Cart – Cart state managed via Context +
persisted in LocalStorage.
• Search & Filter – Client-side search with instant filtering of
product catalog.
• Wishlist & Reviews – Wishlist stored locally, product
reviews via API routes & database.

UI/UX Highlights:
• Clean and responsive product gallery design.
• Dedicated product detail view with smooth navigation.
• Wishlist toggle and cart management with intuitive icons.

GitHub Repo: E-Commerce Platform Next.js