From b7bb7e3be211a07167ade388d1278c4ead843a3f Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Mon, 18 May 2026 17:42:01 +0300 Subject: [PATCH 1/8] Update README with more details about the project --- README.md | 81 +++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 73 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index e301846..6f2ba7f 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,94 @@ -# mern-stack-example -Mern Stack code for the [Mern Tutorial](https://www.mongodb.com/languages/mern-stack-tutorial) +# MERN Stack Employee Records App with MongoDB Atlas + +A full-stack CRUD application built with MongoDB, Express, React, and Node.js (MERN). Demonstrates how to manage employee records — create, read, update, and delete — using MongoDB Atlas as the database and a REST API backend. + +Companion code for the [MERN Stack Tutorial](https://www.mongodb.com/languages/mern-stack-tutorial?utm_campaign=devrel&utm_medium=github&utm_content=mern.stack.example&utm_term=learning.fuel). [![CI](https://github.com/mongodb-developer/mern-stack-example/actions/workflows/main.yaml/badge.svg)](https://github.com/mongodb-developer/mern-stack-example/actions/workflows/main.yaml) -## How To Run -Create the file `mern/server/config.env` with your Atlas URI and the server port: +## Features + +- List all employee records stored in MongoDB Atlas +- Create a new employee record (name, position, level) +- Edit an existing record in place +- Delete a record +- React frontend (Vite + Tailwind CSS) communicating with an Express REST API + +## Architecture Overview + +``` +┌─────────────────────┐ REST (JSON) ┌──────────────────────────┐ +│ React (Vite) │ ─────────────────────► │ Express API │ +│ mern/client │ ◄───────────────────── │ mern/server │ +│ :5173 │ │ :5050 │ +└─────────────────────┘ └───────────┬──────────────┘ + │ MongoDB Node.js driver + ▼ + ┌──────────────────────────┐ + │ MongoDB Atlas │ + │ database: employees │ + │ collection: records │ + └──────────────────────────┘ ``` -ATLAS_URI=mongodb+srv://:@sandbox.jadwj.mongodb.net/ + +- **Frontend**: React 18, Vite, Tailwind CSS, React Router +- **Backend**: Node.js, Express 4, MongoDB Node.js Driver 6 +- **Database**: MongoDB Atlas — `employees` database, `records` collection + +## Quick Start + +### Prerequisites + +- Node.js 18+ +- A free [MongoDB Atlas](https://www.mongodb.com/atlas?utm_campaign=devrel&utm_medium=github&utm_content=mern.stack.example&utm_term=learning.fuel) cluster + +### 1. Configure the server + +Create `mern/server/config.env`: + +``` +ATLAS_URI=mongodb+srv://:@.mongodb.net/ PORT=5050 ``` -Start server: +### 2. Seed the database (optional) + +```bash +cd mern/server +node seed.js ``` + +### 3. Start the API server + +```bash cd mern/server npm install npm start ``` -Start Web server -``` +### 4. Start the React app + +```bash cd mern/client npm install npm run dev ``` +Open [http://localhost:5173](http://localhost:5173). + +## MongoDB Features Demonstrated + +| Feature | Where | +|---|---| +| [MongoDB Node.js Driver](https://www.mongodb.com/docs/drivers/node/current/?utm_campaign=devrel&utm_medium=github&utm_content=mern.stack.example&utm_term=learning.fuel) | `mern/server/db/connection.js` | +| [CRUD operations](https://www.mongodb.com/docs/manual/crud/?utm_campaign=devrel&utm_medium=github&utm_content=mern.stack.example&utm_term=learning.fuel) | `mern/server/routes/record.js` | +| [MongoDB Atlas](https://www.mongodb.com/atlas?utm_campaign=devrel&utm_medium=github&utm_content=mern.stack.example&utm_term=learning.fuel) | Atlas URI in `config.env` | +| [Server API version](https://www.mongodb.com/docs/manual/reference/stable-api/?utm_campaign=devrel&utm_medium=github&utm_content=mern.stack.example&utm_term=learning.fuel) | `ServerApiVersion.v1` in connection | + +## Additional Resources + +- [MERN Stack Tutorial](https://www.mongodb.com/languages/mern-stack-tutorial?utm_campaign=devrel&utm_medium=github&utm_content=mern.stack.example&utm_term=learning.fuel) — step-by-step walkthrough of this codebase + ## Disclaimer Use at your own risk; not a supported MongoDB product From ef235aefbeed63f0c2b37f925982607593a67702 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Mon, 18 May 2026 17:42:21 +0300 Subject: [PATCH 2/8] Add seed script for data generation --- mern/server/seed.js | 56 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 mern/server/seed.js diff --git a/mern/server/seed.js b/mern/server/seed.js new file mode 100644 index 0000000..2dee73d --- /dev/null +++ b/mern/server/seed.js @@ -0,0 +1,56 @@ +/** + * seed.js — Populate the employees.records collection with sample data. + * + * Usage: + * node seed.js + * + * Requires config.env in the same directory with ATLAS_URI set. + */ + +import { MongoClient, ServerApiVersion } from "mongodb"; +import * as fs from "node:fs"; + +// Load config.env manually (same pattern as the app) +if (fs.existsSync(new URL("./config.env", import.meta.url))) { + const env = fs.readFileSync(new URL("./config.env", import.meta.url), "utf8"); + for (const line of env.split("\n")) { + const [key, ...rest] = line.split("="); + if (key && rest.length) process.env[key.trim()] = rest.join("=").trim(); + } +} + +const URI = process.env.ATLAS_URI; +if (!URI) { + console.error("ATLAS_URI is not set. Create mern/server/config.env first."); + process.exit(1); +} + +const client = new MongoClient(URI, { + serverApi: { version: ServerApiVersion.v1, strict: true, deprecationErrors: true }, + appName: "devrel-github-javascript-mern", +}); + +const records = [ + { name: "Alice Johnson", position: "Software Engineer", level: "senior" }, + { name: "Bob Martinez", position: "Product Manager", level: "mid" }, + { name: "Carol Lee", position: "UX Designer", level: "junior" }, + { name: "David Kim", position: "DevOps Engineer", level: "mid" }, + { name: "Eva Nguyen", position: "Data Scientist", level: "senior" }, + { name: "Frank Chen", position: "Frontend Developer", level: "junior" }, + { name: "Grace Patel", position: "Backend Developer", level: "mid" }, + { name: "Henry Okafor", position: "QA Engineer", level: "junior" }, + { name: "Iris Müller", position: "Engineering Manager", level: "senior" }, + { name: "James Tanaka", position: "Security Engineer", level: "mid" }, +]; + +try { + await client.connect(); + const collection = client.db("employees").collection("records"); + + // Remove existing records to avoid duplicates on re-runs + await collection.deleteMany({}); + const result = await collection.insertMany(records); + console.log(`Inserted ${result.insertedCount} records into employees.records`); +} finally { + await client.close(); +} From 732374b3528572633dc02f2b321b11c6f2556839 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Mon, 18 May 2026 17:42:30 +0300 Subject: [PATCH 3/8] Add Agent helper files --- .claude/settings.json | 5 +++ AGENTS.md | 80 +++++++++++++++++++++++++++++++++++++++++++ EDD.md | 49 ++++++++++++++++++++++++++ 3 files changed, 134 insertions(+) create mode 100644 .claude/settings.json create mode 100644 AGENTS.md create mode 100644 EDD.md diff --git a/.claude/settings.json b/.claude/settings.json new file mode 100644 index 0000000..76e0161 --- /dev/null +++ b/.claude/settings.json @@ -0,0 +1,5 @@ +{ + "enabledPlugins": { + "mongodb@claude-plugins-official": true + } +} diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..60e6dd1 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,80 @@ +# AGENTS.md — AI Agent Guide + +This file is the source of truth for AI agents working in this repository. + +## Project Overview + +Full-stack MERN CRUD app for managing employee records. React (Vite) frontend communicates with an Express REST API; MongoDB Atlas stores data in the `employees` database, `records` collection. + +## Project Structure + +``` +mern-stack-example/ +├── EDD.md # MongoDB data model — read before touching schema or routes +├── mern/ +│ ├── client/ # React 18 + Vite + Tailwind CSS frontend +│ │ ├── src/ +│ │ │ ├── App.jsx # Root component and routes +│ │ │ ├── components/ +│ │ │ │ ├── Navbar.jsx +│ │ │ │ ├── Record.jsx # Create / edit form +│ │ │ │ └── RecordList.jsx # Main list view +│ │ ├── vite.config.js +│ │ └── package.json +│ └── server/ # Node.js + Express REST API +│ ├── db/ +│ │ └── connection.js # MongoDB Atlas connection (appName set here) +│ ├── routes/ +│ │ └── record.js # GET / POST / PATCH / DELETE /record +│ ├── seed.js # Database seed script +│ ├── server.js # Express app entry point +│ └── package.json +└── .github/workflows/main.yaml # CI: install, start, Cypress e2e +``` + +## Build and Test Commands + +```bash +# Install and start the API server +cd mern/server +npm install +npm start # requires mern/server/config.env (see Environment Variables) + +# Install and start the React dev server +cd mern/client +npm install +npm run dev # serves on http://localhost:5173 + +# Seed the database +cd mern/server +node seed.js # requires ATLAS_URI in config.env + +# Run Cypress e2e tests (client must be running) +cd mern/client +npx cypress run +``` + +## Environment Variables + +Create `mern/server/config.env` (not committed): + +| Variable | Description | Example | +|-------------|------------------------------------------|---------| +| `ATLAS_URI` | MongoDB Atlas connection string | `mongodb+srv://user:pass@cluster.mongodb.net/` | +| `PORT` | Port for the Express server | `5050` | + +## MongoDB Skills + +Use the official MongoDB agent skills from https://github.com/mongodb/agent-skills +whenever the task is MongoDB-specific and a matching skill exists. + +## When To Use EDD.md + +Use [EDD.md](./EDD.md) as the source of truth for the MongoDB data model in this repository. + +Consult [EDD.md](./EDD.md) before making changes that touch: + +- MongoDB collections, document structure, or field names +- Express routes that read or write database records +- Validation, form fields, API payloads, or UI that depend on persisted data +- Schema documentation, Mermaid diagrams, or entity modeling discussions diff --git a/EDD.md b/EDD.md new file mode 100644 index 0000000..72cd962 --- /dev/null +++ b/EDD.md @@ -0,0 +1,49 @@ +# EDD — Entity Document Diagram + +Data model for the **MERN Stack Employee Records App**. + +- **Database**: `employees` +- **Driver**: MongoDB Node.js Driver 6 + +--- + +## Entities + +### Record [collection: records] [indexes: {_id:1}] + +``` +_id: ObjectId +name: string # employee full name +position: string # job title / role +level: string # seniority level, e.g. "junior", "mid", "senior" +``` + +--- + +## Relationships + +``` +records — standalone collection, no references to other collections +``` + +--- + +## Mermaid Diagram + +```mermaid +erDiagram + RECORDS { + ObjectId _id PK + string name + string position + string level + } +``` + +--- + +## Notes + +- No validation schema is enforced at the database level; validation is handled in the Express routes (`mern/server/routes/record.js`). +- `level` is a free-form string. Typical values used in the seed data: `junior`, `mid`, `senior`. +- All fields are required by convention in the application code. From 01b0c4027598347465740c0c201fc318a8b09a79 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Mon, 18 May 2026 17:53:48 +0300 Subject: [PATCH 4/8] Fix CI workflow --- .github/workflows/main.yaml | 59 +++++++++++++++++-------------------- 1 file changed, 27 insertions(+), 32 deletions(-) diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml index ad88952..471c108 100644 --- a/.github/workflows/main.yaml +++ b/.github/workflows/main.yaml @@ -1,58 +1,53 @@ -# This is a basic workflow to help you get started with Actions - name: CI -# Controls when the workflow will run on: - # Triggers the workflow on push or pull request events but only for the main branch push: - branches: [ $default-branch ] + branches: [ main ] pull_request: - branches: [ $default-branch ] - - # Allows you to run this workflow manually from the Actions tab + branches: [ main ] workflow_dispatch: -# A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: - # This workflow contains a single job called "build" - build: - # The type of runner that the job will run on runs-on: ubuntu-latest environment: Testing strategy: matrix: - node-version: [14.x , 16.x] - max-parallel: 1 - - # Steps represent a sequence of tasks that will be executed as part of the job + node-version: [20.x, 22.x] + max-parallel: 1 + steps: - # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - - uses: actions/checkout@v2 - with: - ref: 'main-test' + - uses: actions/checkout@v4 - - name: Install server npm packages - uses: bahmutov/npm-install@v1 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v4 with: - working-directory: mern/server + node-version: ${{ matrix.node-version }} + cache: 'npm' + cache-dependency-path: | + mern/server/package-lock.json + mern/client/package-lock.json + + - name: Install server npm packages + run: npm ci + working-directory: mern/server - name: Install client npm packages - uses: bahmutov/npm-install@v1 - with: - working-directory: mern/client + run: npm ci + working-directory: mern/client - name: Start server in the background - env: + env: ATLAS_URI: ${{ secrets.ATLAS_URI }} - run: (cd mern/server && echo "ATLAS_URI=$ATLAS_URI" > config.env && npm start &) - - - name: Start React app in the background - run: (cd mern/client && npm start &) + run: | + echo "ATLAS_URI=$ATLAS_URI" > config.env + npm start & + working-directory: mern/server - name: Install Cypress and run tests - uses: cypress-io/github-action@v2 + uses: cypress-io/github-action@v6 with: working-directory: mern/client + start: npm run dev + wait-on: 'http://localhost:5173' From 758e65e9cfa51a457c253749bec5fff360f10b4a Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Mon, 18 May 2026 18:20:08 +0300 Subject: [PATCH 5/8] Address PR review comments --- .github/workflows/main.yaml | 19 +++++++++++++++++-- README.md | 2 +- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml index 471c108..f5faa1c 100644 --- a/.github/workflows/main.yaml +++ b/.github/workflows/main.yaml @@ -15,6 +15,16 @@ jobs: matrix: node-version: [20.x, 22.x] max-parallel: 1 + services: + mongodb: + image: mongo:latest + options: >- + --health-cmd mongosh + --health-interval 10s + --health-timeout 5s + --health-retries 5 + ports: + - 27017:27017 steps: - uses: actions/checkout@v4 @@ -38,12 +48,17 @@ jobs: - name: Start server in the background env: - ATLAS_URI: ${{ secrets.ATLAS_URI }} + ATLAS_URI: ${{ secrets.ATLAS_URI || 'mongodb://localhost:27017/' }} run: | echo "ATLAS_URI=$ATLAS_URI" > config.env - npm start & + npm start > /tmp/server.log 2>&1 & + echo "Server PID: $!" working-directory: mern/server + - name: Wait for server to be ready + run: | + npx wait-on http://localhost:5050/record --timeout 30000 || (cat /tmp/server.log && exit 1) + - name: Install Cypress and run tests uses: cypress-io/github-action@v6 with: diff --git a/README.md b/README.md index 6f2ba7f..d0b7279 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ Companion code for the [MERN Stack Tutorial](https://www.mongodb.com/languages/m ### Prerequisites -- Node.js 18+ +- Node.js 20+ (required for `node --env-file` support) - A free [MongoDB Atlas](https://www.mongodb.com/atlas?utm_campaign=devrel&utm_medium=github&utm_content=mern.stack.example&utm_term=learning.fuel) cluster ### 1. Configure the server From 7e5b33e5d0826da95f25e9a12ccd27d60cbca0e8 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Mon, 18 May 2026 18:29:41 +0300 Subject: [PATCH 6/8] Set up devcontainer --- .devcontainer/README.md | 87 ++++++++++++++++++++++++++++++++ .devcontainer/devcontainer.json | 49 ++++++++++++++++++ .devcontainer/docker-compose.yml | 34 +++++++++++++ .github/workflows/main.yaml | 5 +- README.md | 19 +++++++ mern/server/config.env.example | 10 ++++ 6 files changed, 203 insertions(+), 1 deletion(-) create mode 100644 .devcontainer/README.md create mode 100644 .devcontainer/devcontainer.json create mode 100644 .devcontainer/docker-compose.yml create mode 100644 mern/server/config.env.example diff --git a/.devcontainer/README.md b/.devcontainer/README.md new file mode 100644 index 0000000..a730fcd --- /dev/null +++ b/.devcontainer/README.md @@ -0,0 +1,87 @@ +# Codespaces & Dev Container Setup + +This project is configured to work seamlessly in GitHub Codespaces or with VS Code Dev Containers. + +## Starting with Codespaces + +1. **Click "Code" → "Codespaces" → "Create codespace on main"** from the GitHub repo +2. The devcontainer will automatically: + - Spin up a MongoDB instance (Atlas Local) + - Install all dependencies + - Seed sample data + +## Using with VS Code Dev Containers + +1. **Install the Dev Containers extension** in VS Code +2. **Open the repo locally** and run: `Ctrl+Shift+P` → "Dev Containers: Reopen in Container" +3. VS Code will build the environment and start MongoDB + +## Accessing Services + +Once the devcontainer is running: + +| Service | URL | Purpose | +|---------|-----|---------| +| React App | http://localhost:5173 | Frontend (Vite dev server) | +| Express API | http://localhost:5050 | Backend REST API | +| MongoDB | mongodb://admin:mongodb@localhost:27017 | Database (no browser UI) | +| MongoDB VS Code Extension | N/A | Query database directly in VS Code | + +## Quick Start in Codespaces + +Once the devcontainer is fully loaded (wait for "Poststart" to complete): + +```bash +# Terminal 1: Start the Express server +cd mern/server +npm start + +# Terminal 2: Start the React dev server +cd mern/client +npm run dev +``` + +Then open http://localhost:5173 in your browser. + +## Database Credentials + +- **Host**: `mongodb` (inside container) or `localhost:27017` (from host) +- **Username**: `admin` +- **Password**: `mongodb` +- **Database**: `employees` + +## Seeding Sample Data + +The devcontainer automatically seeds sample data on startup. To manually reseed: + +```bash +cd mern/server +node seed.js +``` + +## VS Code Extensions + +The devcontainer includes these extensions: + +- **MongoDB for VS Code** — Query your MongoDB directly from VS Code +- **TypeScript** — TypeScript language support +- **Prettier** — Code formatter + +## Troubleshooting + +### MongoDB connection issues +```bash +# Check if MongoDB is running +mongosh -u admin -p mongodb --eval "db.adminCommand('ping')" +``` + +### Port conflicts +If ports 5050, 5173, or 27017 are already in use: +- **Codespaces**: Automatic port forwarding handles this +- **Local Dev Container**: Modify `docker-compose.yml` to use different ports + +### Rebuild the devcontainer +```bash +# VS Code: Ctrl+Shift+P → "Dev Containers: Rebuild Container" +# CLI: devcontainer build --workspace-folder . +``` diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 0000000..88a9d61 --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,49 @@ +{ + "name": "MERN Stack with MongoDB", + "dockerComposeFile": "docker-compose.yml", + "service": "app", + "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}", + + "features": { + "ghcr.io/devcontainers/features/node:1": { + "version": "22" + } + }, + + "customizations": { + "vscode": { + "extensions": [ + "mongodb.mongodb-vscode", + "ms-vscode.vscode-typescript-next", + "esbenp.prettier-vscode" + ], + "settings": { + "mongodb.connectionSslEnabled": false, + "mongodb.defaultAuthenticationDatabase": "admin" + } + } + }, + + "forwardPorts": [5050, 5173, 27017], + "portsAttributes": { + "5050": { + "label": "Express API", + "onAutoForward": "notify" + }, + "5173": { + "label": "React Dev Server", + "onAutoForward": "notify" + }, + "27017": { + "label": "MongoDB", + "onAutoForward": "silent" + } + }, + + "postCreateCommand": "cd mern/server && npm ci && cd ../client && npm ci", + "postStartCommand": "cd mern/server && node seed.js", + + "remoteEnv": { + "ATLAS_URI": "mongodb://admin:mongodb@mongodb:27017/employees" + } +} diff --git a/.devcontainer/docker-compose.yml b/.devcontainer/docker-compose.yml new file mode 100644 index 0000000..78462a6 --- /dev/null +++ b/.devcontainer/docker-compose.yml @@ -0,0 +1,34 @@ +version: '3.8' + +services: + app: + image: mcr.microsoft.com/devcontainers/javascript-node:22-bookworm + volumes: + - ../..:/workspaces:cached + command: sleep infinity + network_mode: service:mongodb + environment: + - ATLAS_URI=mongodb://admin:mongodb@mongodb:27017/employees + - PORT=5050 + + mongodb: + image: mongodb/mongodb-atlas-local:latest + restart: unless-stopped + ports: + - 27017:27017 + environment: + MONGODB_INITDB_ROOT_USERNAME: admin + MONGODB_INITDB_ROOT_PASSWORD: mongodb + MONGO_INITDB_DATABASE: employees + volumes: + - mongodb-data:/data/db + - mongodb-config:/data/configdb + healthcheck: + test: mongosh --eval "db.adminCommand('ping')" + interval: 10s + timeout: 5s + retries: 5 + +volumes: + mongodb-data: + mongodb-config: diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml index f5faa1c..0b6f409 100644 --- a/.github/workflows/main.yaml +++ b/.github/workflows/main.yaml @@ -25,6 +25,9 @@ jobs: --health-retries 5 ports: - 27017:27017 + env: + MONGO_INITDB_ROOT_USERNAME: admin + MONGO_INITDB_ROOT_PASSWORD: mongodb steps: - uses: actions/checkout@v4 @@ -48,7 +51,7 @@ jobs: - name: Start server in the background env: - ATLAS_URI: ${{ secrets.ATLAS_URI || 'mongodb://localhost:27017/' }} + ATLAS_URI: mongodb://admin:mongodb@localhost:27017/ run: | echo "ATLAS_URI=$ATLAS_URI" > config.env npm start > /tmp/server.log 2>&1 & diff --git a/README.md b/README.md index d0b7279..0adfb7c 100644 --- a/README.md +++ b/README.md @@ -76,6 +76,25 @@ npm run dev Open [http://localhost:5173](http://localhost:5173). +## Quick Start with GitHub Codespaces or Dev Containers + +New to the repo? **Use Codespaces for the fastest setup**: + +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/mongodb-developer/mern-stack-example?quickstart=1) + +Or use VS Code Dev Containers locally (requires [Dev Containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)): + +1. Clone the repo +2. Run: `Ctrl+Shift+P` → "Dev Containers: Reopen in Container" +3. Wait for setup to complete (MongoDB + dependencies install automatically) +4. Run both services: + ```bash + # Terminal 1: npm start (from mern/server) + # Terminal 2: npm run dev (from mern/client) + ``` + +MongoDB (Atlas Local) and all dependencies are automatically configured. See [`.devcontainer/README.md`](.devcontainer/README.md) for details. + ## MongoDB Features Demonstrated | Feature | Where | diff --git a/mern/server/config.env.example b/mern/server/config.env.example new file mode 100644 index 0000000..c5150fa --- /dev/null +++ b/mern/server/config.env.example @@ -0,0 +1,10 @@ +# MongoDB Atlas Connection String +# Replace with your MongoDB Atlas connection string +# Format: mongodb+srv://:@.mongodb.net/?retryWrites=true&w=majority +ATLAS_URI=mongodb+srv://:@.mongodb.net/ + +# Express Server Port +PORT=5050 + +# For development with local MongoDB (e.g., in Codespaces or Docker): +# ATLAS_URI=mongodb://admin:mongodb@localhost:27017/ From bb44a58518b224f86dead6e3323a009fc4175b0c Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Mon, 18 May 2026 20:28:15 +0300 Subject: [PATCH 7/8] Update Cypress config for 10+ compatibility --- mern/client/.gitignore | 3 +++ mern/client/cypress.config.js | 10 ++++++++ mern/client/cypress.json | 1 - mern/client/cypress/e2e/endToEnd.cy.js | 35 ++++++++++++++++++++++++++ mern/client/cypress/support/e2e.js | 2 ++ 5 files changed, 50 insertions(+), 1 deletion(-) create mode 100644 mern/client/cypress.config.js delete mode 100644 mern/client/cypress.json create mode 100644 mern/client/cypress/e2e/endToEnd.cy.js create mode 100644 mern/client/cypress/support/e2e.js diff --git a/mern/client/.gitignore b/mern/client/.gitignore index a547bf3..a070f16 100644 --- a/mern/client/.gitignore +++ b/mern/client/.gitignore @@ -11,6 +11,9 @@ node_modules dist dist-ssr *.local +# Cypress +cypress.json + # Editor directories and files .vscode/* diff --git a/mern/client/cypress.config.js b/mern/client/cypress.config.js new file mode 100644 index 0000000..4ee509d --- /dev/null +++ b/mern/client/cypress.config.js @@ -0,0 +1,10 @@ +import { defineConfig } from 'cypress' + +export default defineConfig({ + e2e: { + baseUrl: 'http://localhost:5173', + setupNodeEvents(on, config) { + // implement node event listeners here + }, + }, +}) diff --git a/mern/client/cypress.json b/mern/client/cypress.json deleted file mode 100644 index 0967ef4..0000000 --- a/mern/client/cypress.json +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/mern/client/cypress/e2e/endToEnd.cy.js b/mern/client/cypress/e2e/endToEnd.cy.js new file mode 100644 index 0000000..e6b64d3 --- /dev/null +++ b/mern/client/cypress/e2e/endToEnd.cy.js @@ -0,0 +1,35 @@ + +describe('Web site availability', () => { + + after(() => { + cy.contains("Delete").click({ force: true }); + }); + it('Sanity listings web site', () => { + cy.visit('http://localhost:5173'); + cy.contains('Create Employee').should('exist'); + }); + it('Test Adding Employee listings', () => { + cy.visit('http://localhost:5173/create'); + cy.get('#name').type("Employee1"); + cy.get('#position').type("Position1"); + cy.get("#positionIntern").click({ force: true }); + cy.get('[type="submit"]').click({ force: true }); + cy.visit('http://localhost:5173'); + cy.contains('Employee1').should('exist'); + }); + /* it('Test Editing Employee listings', () => { + //cy.visit('http://localhost:3000'); + cy.contains('Edit').click({ force: true }) + cy.on('url:changed', url => { + cy.visit(url); + cy.get('#position').clear(); + cy.get('#position').type("Position2"); + cy.contains("Update Record").click({ force: true }); + cy.visit('http://localhost:3000'); + cy.contains('Position2').should('exist'); + }); + + + + });*/ + }); diff --git a/mern/client/cypress/support/e2e.js b/mern/client/cypress/support/e2e.js new file mode 100644 index 0000000..3302705 --- /dev/null +++ b/mern/client/cypress/support/e2e.js @@ -0,0 +1,2 @@ +// This file is processed and loaded automatically before your test files. +import './commands' From fc3f108cff384dc9731344d14a0d5565eef30539 Mon Sep 17 00:00:00 2001 From: Stanimira Vlaeva Date: Tue, 19 May 2026 19:30:58 +0300 Subject: [PATCH 8/8] Apply suggestions from code review Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- .devcontainer/devcontainer.json | 3 +-- EDD.md | 4 ++-- mern/client/cypress/e2e/endToEnd.cy.js | 20 ++++---------------- mern/server/seed.js | 8 ++++---- 4 files changed, 11 insertions(+), 24 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 88a9d61..db03551 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -40,8 +40,7 @@ } }, - "postCreateCommand": "cd mern/server && npm ci && cd ../client && npm ci", - "postStartCommand": "cd mern/server && node seed.js", + "postCreateCommand": "cd mern/server && npm ci && node seed.js && cd ../client && npm ci", "remoteEnv": { "ATLAS_URI": "mongodb://admin:mongodb@mongodb:27017/employees" diff --git a/EDD.md b/EDD.md index 72cd962..5155e04 100644 --- a/EDD.md +++ b/EDD.md @@ -44,6 +44,6 @@ erDiagram ## Notes -- No validation schema is enforced at the database level; validation is handled in the Express routes (`mern/server/routes/record.js`). +- No validation schema is enforced at the database level, and the current Express routes (`mern/server/routes/record.js`) do not enforce request-body validation. - `level` is a free-form string. Typical values used in the seed data: `junior`, `mid`, `senior`. -- All fields are required by convention in the application code. +- The application convention expects `name`, `position`, and `level`, but these fields are not currently enforced by backend validation. diff --git a/mern/client/cypress/e2e/endToEnd.cy.js b/mern/client/cypress/e2e/endToEnd.cy.js index e6b64d3..acaa2b0 100644 --- a/mern/client/cypress/e2e/endToEnd.cy.js +++ b/mern/client/cypress/e2e/endToEnd.cy.js @@ -2,7 +2,10 @@ describe('Web site availability', () => { after(() => { - cy.contains("Delete").click({ force: true }); + cy.visit('http://localhost:5173'); + cy.contains('tr', 'Employee1').within(() => { + cy.contains("Delete").click({ force: true }); + }); }); it('Sanity listings web site', () => { cy.visit('http://localhost:5173'); @@ -17,19 +20,4 @@ describe('Web site availability', () => { cy.visit('http://localhost:5173'); cy.contains('Employee1').should('exist'); }); - /* it('Test Editing Employee listings', () => { - //cy.visit('http://localhost:3000'); - cy.contains('Edit').click({ force: true }) - cy.on('url:changed', url => { - cy.visit(url); - cy.get('#position').clear(); - cy.get('#position').type("Position2"); - cy.contains("Update Record").click({ force: true }); - cy.visit('http://localhost:3000'); - cy.contains('Position2').should('exist'); - }); - - - - });*/ }); diff --git a/mern/server/seed.js b/mern/server/seed.js index 2dee73d..81c756a 100644 --- a/mern/server/seed.js +++ b/mern/server/seed.js @@ -32,15 +32,15 @@ const client = new MongoClient(URI, { const records = [ { name: "Alice Johnson", position: "Software Engineer", level: "senior" }, - { name: "Bob Martinez", position: "Product Manager", level: "mid" }, + { name: "Bob Martinez", position: "Product Manager", level: "intern" }, { name: "Carol Lee", position: "UX Designer", level: "junior" }, - { name: "David Kim", position: "DevOps Engineer", level: "mid" }, + { name: "David Kim", position: "DevOps Engineer", level: "intern" }, { name: "Eva Nguyen", position: "Data Scientist", level: "senior" }, { name: "Frank Chen", position: "Frontend Developer", level: "junior" }, - { name: "Grace Patel", position: "Backend Developer", level: "mid" }, + { name: "Grace Patel", position: "Backend Developer", level: "intern" }, { name: "Henry Okafor", position: "QA Engineer", level: "junior" }, { name: "Iris Müller", position: "Engineering Manager", level: "senior" }, - { name: "James Tanaka", position: "Security Engineer", level: "mid" }, + { name: "James Tanaka", position: "Security Engineer", level: "intern" }, ]; try {