A full MERN stack starter with a working TODO app. MongoDB, Express, React and Node.js are already wired together, with the React client built by Vite and a database connection set up for you. Run one command and the whole thing comes up.
The workspace links a MongoDB database and sets MONGO_DB_URI in your .env, so Mongoose connects without any manual config.
The full cloud editor with an integrated terminal, extensions and the .vscode settings that ship with the project.
npm run dev runs the Express API and the Vite React client at once with concurrently, so the full app is live in one step.
The starter ships a real example: React components for input and a list, Express routes for /api/todos, and a Mongoose model.
MERN is a full-stack JavaScript setup built from MongoDB, Express, React and Node.js. MongoDB stores the data, Express and Node.js run the API, and React renders the front end, so you write JavaScript end to end. It's a popular way to build single-page apps with a JSON API behind them.
This workspace ships all four pieces wired together as a small TODO app. The backend exposes /api/todos routes backed by a Mongoose model, and the React client built with Vite talks to that API. The database connection is set up for you, so you can read the code and start changing it instead of plumbing services together.
The root index.js is an Express server that connects to MongoDB through Mongoose, mounts the /api routes and, in production, serves the built React app. The Todo model lives under models, the routes under routes, and the client is a Vite React app in the client folder with Input, ListTodo and Todo components.
A linked MongoDB workspace provides the database. Its connection string is set as MONGO_DB_URI in your .env automatically, and you can find the same value in .vscode/.studio/studio-env.json if you ever need it.
On the first run, install both sides with npm install; cd client && npm install && cd .. so the server and the client have their dependencies. After that, npm run dev uses concurrently to start the nodemon server and the Vite client together.
The Vite dev server serves the React UI and the Express API listens on port 5000. Open the built-in browser preview to use the TODO app, add an item, and watch it persist through the API into MongoDB. You can also run npm run server and npm run client separately if you want them in their own terminals.
Any data-driven single-page app: dashboards, CRUD tools, small SaaS prototypes or the front end and API for a larger product. Swap the TODO model and routes for your own collections, add screens in React, and you have a working full-stack foundation.
No. The workspace links a MongoDB database and writes MONGO_DB_URI into your .env, so Mongoose connects on startup. If you ever need the value directly, it's also in .vscode/.studio/studio-env.json.
After installing dependencies for both the root and the client, run npm run dev. It uses concurrently to start the Express server and the Vite React client at the same time, then open the built-in browser preview.
Yes. Use npm run server to start just the Express API and npm run client to start just the Vite React client, each in its own terminal.
It's a TODO app. The React client posts items to /api/todos, the Express routes store them through a Mongoose model in MongoDB, and the list reads them back. It's there as a working pattern to adapt.
Vite. It runs the dev server while you work and produces the production build that the Express server serves from client/dist.
The MERN template runs on a paid plan because it spins up both an app workspace and a linked MongoDB database. Templates that are free are marked as such, and you can upgrade any time from the pricing page.
