MERN

MERN Practice

Build MongoDB, Express, React and Node into one connected stack, with backend and frontend in every repo. You'll start from single models and components and work up to small working applications - portals, consoles, dashboards. Along the way you'll handle what only appears once the two halves meet: relationships, access rules, server-driven lists, and the performance problems that arrive with scale.

React 19React 19Express 5Express 5Node 24Node 24
Read the MERN overview
Module 1

Mongoose Schemas & Models

Design the shape of your data before anything else touches it. You'll define schemas with the right field types, defaults and validation, embed related records where they belong, and control exactly what the API sends back - so bad data is rejected at the model rather than caught three layers later.

4
About this challenge

Build the data rules behind an online marketplace where people post items for sale. You'll make sure every listing keeps a clean, correct price, only allows valid item conditions (like new or used), and gets its own unique ID automatically - the kind of behind-the-scenes rules that keep a shopping site trustworthy and tidy.

About this challenge

Build the rules that keep a school course catalogue honest —-each school runs its own courses (codes can repeat across schools, never within one), retired courses free their codes for reuse, seats and credits stay in sensible limits, and sign-up dates can't close before they open.

About this challenge

Build the data model for a workout-logging app: store each session's sets, validate them, surface the heaviest lift, and return clean data.

About this challenge

A back-office catalogue for a streaming service — add TV shows with their genre, season, and episodes, then look them up by show or by season.

Module 2

Express REST Endpoints

Put your data behind a URL that behaves the way clients expect. You'll lay out routers and route parameters, nest child resources under their parents, return the right status code for every outcome, and handle errors in one place instead of wrapping every handler - so a bad id gets a 400, not a 500.

4
About this challenge

Manage a library's book loans. Check a book out to a borrower with a due date, see everything currently on loan at a glance, mark a book returned, and remove old records. A clean desk for whoever runs the circulation counter — issue, track, and close out loans in a few clicks.

About this challenge

Browse an online course and the lessons inside it. Pick a course to see its lessons, add a new lesson to that course, and each course keeps its own lessons separate from every other.

About this challenge

Manage a team's job postings. Open a vacancy, change its details, and save - a small edit updates only the fields you touched, while a full rewrite replaces the whole posting. Reusing a posting code that's already taken is refused, and invalid values are flagged field by field.

About this challenge

Manage a footwear store's stock - add products with their brand, size, price and quantity, then browse the catalogue and narrow it by brand, size, or what's in stock, sorted the way you want.

Module 3

Querying & Data Shaping

Ask the database precise questions and send back only what the screen needs. You'll build search and filters that stack, project away heavy fields, sort and page with stable results, and count without loading rows - so the response stays small and the same request returns the same order twice.

4
About this challenge

Search a city's restaurants by name and only ever see the ones that are open. Type part of a name, narrow by cuisine and a price range, and closed spots stay hidden.

About this challenge

Browse a ranked feed of stories and tap any headline to read the full article. The list loads fast and stays light, while an article's full text is fetched only when you open it.

About this challenge

Search a hotel chain's room inventory - filter by city, room type, and price to see how many rooms match, which cities still have rooms available, and whether a specific room exists.

About this challenge

Browse an online bookstore's catalogue - search books by title or author, filter by format, sort the shelves, and page through the results.

Module 4

Fetching & Rendering in React

Wire the screen to the server and make it behave under real conditions. You'll drive the UI from a single status loading, error, empty, populated - instead of booleans that disagree, fetch inside effects and abort the in-flight request on cleanup, ignore stale responses so a slow reply can't overwrite a newer one, and render lists, filters and forms that stay in sync with what the API actually returned.

4
About this challenge

Browse a feed of rental homes. The page loads the latest listings and shows each home's photo, price, and size - handling the in-between moments too: a placeholder while results load, a friendly message with a "try again" when something goes wrong, and a clear notice when there's nothing to show.

About this challenge

Browse a warehouse's stock as a table - see each item's quantity, price and delivery date, spot which items are low or out and how many to reorder, sort by any column, filter by status or search, and read the total inventory value.

About this challenge

Browse a recruiter's candidate shortlist and open any candidate to see their full profile - role, experience, location, skills, and summary. Clicking quickly down the list always shows the candidate you last picked, never a stale one.

About this challenge

Browse an online course catalogue - filter courses by level and weekday, then enrol in one with your name and email. New enrolments appear instantly, and the form flags any invalid details inline.

About this path

This path covers the MERN stack from the database up: Mongoose schemas and models, Express REST endpoints, querying and shaping data, and fetching and rendering it in React. You should know modern JavaScript and the basics of React before you start. No earlier MongoDB or Express experience is needed. The React module connects the API to the screen, with challenges such as a property listing feed.

From the blog

1
Shipping a MERN app to productionWhat to verify before your first real MERN deploy — environment config, security, database, performance, error handling, and observability.

Frequently asked questions

4

What will I practice in this path?

4 modules: Mongoose Schemas & Models, Express REST Endpoints, Querying & Data Shaping and Fetching & Rendering in React.

How many challenges are there, and how hard are they?

16 challenges, all easy.

What does this path run on?

Challenges run on React 19, Express 5 and Node 24.

Do I need to install anything?

No. Every challenge runs in a browser-based IDE with everything already set up, and your code is graded automatically against a test suite.

We use cookies that are necessary to run Staffcoder, and optional analytics cookies to see which pages get used. Analytics stays off unless you accept. Read our Cookie Policy.