A hands-on full-stack web development repository built while Learning the MERN Stack. It contains focused exercises, mini projects, backend experiments, database practice, React applications, and the WanderLust capstone project.
The repository follows the progression from web fundamentals to production-oriented full-stack application development.
- HTML structure, tables, forms, semantic elements, and accessibility basics
- CSS selectors, box model, units, positioning, Flexbox, Grid, transitions, transforms, and animations
- Responsive layouts and reusable interface patterns
- Bootstrap utilities and components
- Tailwind CSS setup and utility-first styling
- JavaScript fundamentals, functions, arrays, objects, timing events, callbacks, promises, closures, and DOM manipulation
- APIs and asynchronous browser interactions
- Node.js fundamentals and npm package usage
- Express.js servers, routing, middleware, and error handling
- REST-style routes and CRUD workflows
- EJS templating and server-rendered views
- API consumption and backend integrations
- Authentication, authorization, sessions, and deployment concepts
- Components, JSX, props, state, and event handling
- Forms and component-driven UI design
- React application structure with Vite
- Advanced frontend state patterns
- Material UI with React
- Redux fundamentals
- Relational database concepts and SQL queries
- Tables, relationships, keys, and constraints
- MongoDB documents and collections
- Mongoose schemas, models, validation, and relationships
- Connecting databases to Express applications
- Git fundamentals and repository workflows
- GitHub-based collaboration
- Commits, branches, and project documentation
Small projects used to practice individual frontend concepts and JavaScript interactions.
- Animation - CSS animation practice
- Card - Card layout and styling
- Flex - Flexbox layouts
- Grid - CSS Grid layouts
- Pet Adoption Card - Responsive card interface
- Position Property - CSS positioning concepts
- Quora - Quora-inspired interface practice
- Sidebar - Sidebar layout and navigation styling
- Spotify Clone - Spotify-inspired frontend practice
- Random Color Generator - Generate and display random colors
- Guess the Random Number - Browser-based number guessing game
- Simon Says Game - Memory and event-handling game
- Todo Application - Basic task management with DOM manipulation
- HTML, CSS, and JavaScript Practice - Core frontend exercises
- JavaScript Practice - Additional JavaScript concepts and browser interactions
- React Basics: Parts 1 and 2 - Components and JSX
- React Part 3 - Props and component composition
- React Part 3B - Additional React practice
- React Part 4 - State and event handling
- React Todo List - Todo workflow in React
- React Lottery - State-driven lottery application
- React Part 6 - Further React application patterns
- React Amazon Cards - Reusable card components
- Material UI React Project - React interface using Material UI
- Redux Practice - Redux state management exercises
- Tailwind CSS - Utility-first CSS workflow
- Node.js Experiments - Node modules, npm packages, Figlet, jokes, and random word exercises
- First Express Server - Express server fundamentals
- EJS Application - Express with EJS templates and public assets
- REST Practice - REST routes and CRUD concepts
- Quora REST Application - Express-based posts application
- Middleware and Errors - Middleware and custom error handling
- Backend Practice - Additional server-side exercises
- SQL Practice - SQL queries, databases, and key constraints
- SQL Class Application - Express application connected to SQL concepts
- MongoDB Practice - MongoDB and Mongoose exercises
- Mongo Express Application - CRUD application with MongoDB, Express, and EJS
- Relationships Practice - Modeling relationships in a database-backed application
WanderLust is the capstone full-stack project: a listings application inspired by travel and accommodation platforms.
Key technologies and concepts include:
- Node.js and Express.js
- MongoDB and Mongoose
- EJS and EJS Mate templating
- Passport local authentication
- Sessions, flash messages, and authorization
- Joi validation and custom error handling
- Cloudinary image uploads
- Mapbox integration
- MVC-style controllers, models, routes, and views
- CRUD operations for listings and reviews
Available implementations:
Web fundamentals, HTML, CSS, JavaScript, DOM manipulation, closures, callbacks, promises, Git, terminal usage, Node.js, Express.js, REST APIs, templating, Flexbox, Grid, animations, responsive design, Bootstrap, Tailwind CSS, SQL, MongoDB, Mongoose, middleware, authentication, authorization, React, Material UI, Redux, deployment, and full-stack project architecture.
BACKEND/ Node.js and Express.js practice
BACKEND + DB/ Backend and SQL exercises
GITDEMO/ Git and GitHub practice
JS 1/ Frontend fundamentals
JS 2/ JavaScript practice
MAJOR PROJECT/ WanderLust capstone applications
MINI PROJECT/ CSS and JavaScript mini projects
MONGO/ MongoDB exercises
MONGOexpress/ MongoDB and Express CRUD application
REACT/ React and Material UI projects
REDUX/ Redux practice
SQL/ SQL exercises
TAILWINDCSS/ Tailwind CSS project
Each application is intentionally kept in its own folder and may have its own dependencies and environment variables.
-
Open the folder for the project you want to run.
-
Install dependencies when a
package.jsonis present:npm install
-
Review the project files for required environment variables such as database, Cloudinary, or Mapbox credentials.
-
Start the project using its local script, commonly:
npm start
React projects created with Vite commonly use:
npm run dev
Static HTML, CSS, and JavaScript projects can be opened directly in a browser or served with a local development server.
This repository documents a practical progression through the MERN stack. The projects are organized as learning milestones, making it possible to revisit a specific concept, compare implementation approaches, and trace the development of a complete full-stack application.
This repository is maintained as a personal learning portfolio. Unless a project folder states otherwise, the code is intended for educational use.