Projects in MERN : Build Real World Apps Using MERN

build a MERN-based user management system with user and admin roles, including registration, login, profiles, and CRUD, using mongodb, express, react, node, jwt s, and docker.

Explore package.json and package-lock.json, metadata, dependencies, dev dependencies, and scripts; examine build tools like webpack, babel, ESLint, and related modules in a MERN project.

Master the mern toolset by configuring node with nvm, installing docker and eslint, and using npm scripts for lint, docker management, and dev/prod/mock configurations.

Learn how password hashing and salting protect web application credentials using one-way hashes, salts, and bcrypt or argon2id to defend against dictionary and brute-force attacks.

Explore jwt-based authentication and authorization, including scopes, claims, and token structure, then compare storage options like cookies and web storage, and guard against csrf and xss risks.

Walks through the boot up procedure of express.js and server.js, detailing development setups with nodemon and docker and middleware for json and urlencoded, plus API docs at /api/documentation.

Examine the express js server internals, from service and middleware design to user management routes. Focus on email, mongodb, jwt, bcrypt, and registration and verification workflows.

Explore Express.js routes and middleware in this MERN project, detailing admin and user routes, JWT authentication, and API docs syntax for create, fetch, update, and delete operations.

Explore react services, rxjs basics including observables and subjects and behavior subjects, for managing user authentication, local storage, and admin CRUD operations in a MERN app.

Explore React JS components, folder structure, and private routing in a MERN app. Learn how components, JSX, JWT validation, and Formik and Yup validation power email verification and user flows.

Explore the home page component and its two modal dialog subfolders, plus the modal service, using Bootstrap and MVP to manage the user list.

Explore a bare-bones MERN stack user management system featuring registration, email verification, login, role-based admin and user access, and JWT-based authentication with bcrypt password storage.

Explore building a simple social networking app with the MERN stack, featuring user management, feeds, followers, messages, keywords, engrams, and MongoDB arrays with aggregation.

Describe new server services in MERN, focusing on user and follower services, including base64 profile pictures, keywords for search, and the aggregation pipeline with look up, match, and project.

Explore advanced MongoDB aggregation techniques in a MERN project, including unwind, group, lookups, and accumulators to build feed and message services, plus keywords and user search.

Review updated react components for the social networking app, from app.js through the follower box, noting render logic, private routes for followers, profile, and people components, and bootstrap layouts.

Learn how React components use the this keyword, bind methods, handle message changes, render feeds, and update profiles with image resize and component did update.

Reinforce your mern-based social networking skills by reviewing features and building a simple UI. Embrace elegant solutions, master MongoDB aggregations, and solidify concepts like profile picture, followers, and keywords.

Discover how graph databases model social networks with nodes and relationships, using native graph storage and graph lookup to manage connections at scale.

Learn to build a primitive CMS with the MERN stack, leveraging draft-js and immutable data concepts, and implement blog features across create, home, manage, post, and update pages.

Explore express services for the blog application, detailing add, update, delete, and get operations using MongoDB with insert, update, aggregate, and paging via skip and limit.

Create a blog page with a form and rich text editor to add title, subtitle, background, and content, then manage blogs with a data table supporting selection and deletion.

Conclude the MERN blog application project by reviewing express js techniques and mongo db aggregation, exploring new react services and components, and emphasizing fundamentals and vigilant practice for future projects.

Build a live web scraper with a server-side control system using puppeteer and socket.js, enabling start/stop, progress monitoring, and live browser updates via web sockets.

Explore the server and client architecture of a MERN web scraper app, focusing on config dev/prod, key services (web scraping, socket, webhook), and Dockerized deployment.

Explore express.js web scraping services and routes built with puppeteer, including start and stop API routes, task management, and status updates via soc.js and status services.

Master puppeteer for web scraping in MERN projects: launch chrome, run headless or non-headless, capture screenshots, navigate pages, and extract data with page.evaluate and DOM selectors.

Build a mermaid-based search app with a google-like interface and autocomplete dropdown, integrating a blog data source, web scraper, and web hook to populate feeds.

Explores express js services, detailing keyword service and feed service interactions with mongo db, and demonstrates engrams-based keyword generation, levantine distance for search suggestions, and routes for feeds and suggestions.

Explore react services and components in a MERN app, implementing search feed and search suggestions via Express APIs, fetch calls, and a type ahead powered home page and search page.

Create a search page component modeled after the home page, using an options object. Fetch results with the keyword, render feed items and navigation, and show search suggestions with labels.

Reflect on five real-world mern stack projects, analyzing authentication, authorization, real-time updates with web sockets, and web scraping with puppeteer, plus deployment with docker.