Full stack web development- Industry
internship
A comprehensive report detailing the transition from static web structures to
secure, full-stack dynamic applications.
By Kanishk Mishra | Sir M. Visvesvaraya Institute of Technology
Internship Overview
Completed a rigorous 15-week industry internship at
SuprMentr Technologies Pvt Ltd, focusing on the complete
MERN stack.
■ Objective: Bridge the gap between academic theory and
production-grade software engineering through hands-on
learning.
■ Progression: Evolved from understanding fundamental
client-server networks to architecting distributed
databases.
■ Outcome: Gained the capacity to independently build,
secure, and deploy modern applications.
Phase 1: The Fundamentals
Web Architecture Semantic Structures Responsive Layouts
Mapped the lifecycle of a URL Constructed foundational web Transitioned beyond fixed pixels,
request, thoroughly understanding pages utilizing semantic HTML5 mastering CSS3 Flexbox to build
DNS lookups and the complete tags to ensure accessibility and fluid "Hero Pages" that
client-server request-response proper document outlining. automatically adapt to mobile
cycle. devices.
Phase 2: Introducing Interactivity
Core JavaScript DOM Manipulation Client Validation
Moved beyond static content to Engineered browser-based tools, Captured user input safely by
programmatic logic, utilizing ES6+ directly manipulating the implementing rigorous client-side
syntax to manage complex data Document Object Model to create form validation, displaying
through Arrays and Objects interactive elements without page real-time errors for missing or
dynamically. reloads. invalid data.
Phase 3: The React Ecosystem
State Management & Hooks API Data Fetching
Underwent a fundamental mental shift to Graduated to handling live data via the Fetch API. Built
component-based architecture. Learned that "State dashboard applications by managing the three critical
drives the View." Mastered React Hooks, specifically pillars of asynchronous data operations: Loading
useState and useEffect, to build applications that feel states, Data rendering, and Error handling fallbacks.
instantaneously responsive.
Phase 4: Backend Mastery
[Link] & Express Routing MongoDB & MVC Architecture
Stepped into server-side development. Transitioned Designed NoSQL database schemas to act as the
from consuming APIs to engineering them using application's memory. Re-architected codebases into
[Link]. Designed structured endpoints to securely the MVC (Model-View-Controller) structure, ensuring
handle incoming client requests and dispatch JSON database logic remained strictly separated from
responses. routing instructions.
Security & Integration
The final learning modules emphasized enterprise-grade data
protection and system integration.
■ Password Hashing: Utilized Bcrypt to ensure plain-text
passwords are never stored, protecting user privacy at the
database level.
■ Stateless Sessions: Implemented JSON Web Tokens (JWT)
to securely manage user authentication without forcing
constant logins.
■ Role Guards: Engineered middleware that actively blocks
unauthorized access to sensitive API endpoints.
Key Learning Outcomes
Full-Stack Troubleshooting Developed the capacity to debug across the entire pipeline—from checking browser consoles for
JS errors, to Postman for API failures, to terminal logs for server crashes.
Professional Workflows Integrated industry-standard tools like Git and GitHub into daily workflows to track versions, manage
codebases, and simulate professional handovers.
Architectural Thinking Shifted from writing isolated scripts to designing scalable systems, prioritizing separation of concerns
(MVC) and responsive design methodologies.
Full stack web blog
A capstone media discovery platform built utilizing the MERN stack,
aggregating real-time data for shows, movies, and anime.
Project Tech Stack
Frontend Backend Engine Database
[Link] handles the client UI, [Link] and Express act as a MongoDB stores flexible user
dynamically rendering complex secure proxy, handling auth, user metadata (watchlists, favorites,
JSON structures into clean, sessions, and database mutations. reviews) via the Mongoose ODM
modular components. framework.
Platform Overview
The core objective was to build an encyclopedia that bypasses
the bottleneck of manual data entry.
■ Real-time Aggregation: Automatically populates with the
latest releases, episode schedules, and high-resolution
artwork.
■ Infinite Scalability: The platform scales to thousands of
titles instantly because heavy content is outsourced.
■ User Experience: Provides seamless search functionality,
deep synopses, and personalized curation features.
External API Architecture
Jikan API (RESTful) AniList API (GraphQL)
Serves as the primary provider for top-airing shows Utilized for specific, optimized queries. The GraphQL
and seasonal lineups. The client requests data from interface allows the React frontend to request precise
Jikan, heavily reducing the bandwidth and storage data subsets (e.g., just images and titles), improving
requirements of the custom Node server. load times and payload efficiency.
Lightweight Database Design
Because media content is fetched externally, the MongoDB
schema is optimized specifically for user relations.
■ No Redundancy: Show descriptions and image URLs are
never stored locally.
■ User Collection: Stores secure credentials and numerical
arrays for watchLater and favorites.
■ Review Collection: Maps custom user reviews to the
external API's unique ID, maintaining strict relational
integrity.
Feature: Watchlist
Smart Storage Mechanics
The platform features a highly optimized Watchlist system.
When a user clicks "Add to Watchlist", the backend only records
the unique ID of the show.
When rendering the user's dashboard, the frontend loops over
these saved IDs, pinging the external API to instantly generate
visually rich, up-to-date media cards without bloating the
custom database.
Watchlist Data Flow
1. Client Action 2. API Request 3. Server Sync
React verifies the user's login React executes an asynchronous Express authenticates the token,
status globally. The user clicks POST to the custom Node locates the user in MongoDB, and
"Add" on a specific Anime Detail backend, passing the external pushes the ID into the user's array
view. animeId and the JWT. safely.
Community Reviews
A custom review system built to merge internal data with
external media seamlessly.
■ Protected Mutations: Form submissions for ratings and
reviews are strictly gated behind JWT authentication.
■ Data Merging: The React Detail Page simultaneously
fetches media info from Jikan and custom reviews from the
Node backend, rendering them together.
■ Engagement: Allows users to leave 1-10 scale ratings and
text feedback attached to specific media IDs.
Backend API Routing
Authentication Engine (/api/auth) Routes responsible for generating secure JWTs upon login and hashing new user passwords
during registration.
Protected User Routes (/api/user) Secured by custom middleware. Handles requests to view profile details, and POST/DELETE
operations to manage watchlist arrays.
Review Controllers (/api/reviews) Features public GET endpoints to load reviews on show pages, and protected POST
endpoints to create new entries tied to the author's ID.
Questions?
Thank you for your time. The Full Stack Web Blog is live at:
[Link]
Image Sources
[Link]
Source: [Link]
[Link]
Source: [Link]
[Link]
Source: [Link]
[Link]
Source: [Link]
[Link]
Source: [Link]
[Link]
Source: [Link]