A full-stack contact management application built with React for the frontend, Node.js/Express for the backend, and MongoDB Atlas for persistent storage.
This project is part of the Full Stack Open course and focuses on mastering CRUD operations, backend deployment, environment configuration, and RESTful API development.
- Add, update, delete, and list contacts
- Client-side input validation
- Backend data validation with Mongoose
- Real-time notifications on operations
- Responsive UI with React
- MongoDB Atlas for cloud-based data persistence
- RESTful API with Express.js
Phonebook/
├── backend/ # Node.js + Express backend
│ ├── index.js
│ ├── models/
│ └── controllers/
├── frontend/ # React + Vite frontend
│ ├── src/
│ │ ├── App.jsx
│ │ ├── main.jsx
│ │ └── services/
│ ├── public/
│ ├── index.html
│ └── package.json
- Node.js >= 14
- npm or yarn
- MongoDB Atlas account
cd backend
npm installSet up a .env file in /backend:
MONGODB_URI=mongodb+srv://<username>:<password>@<cluster-url>/<dbname>?retryWrites=true&w=majority
PORT=3001Start the backend:
npm startcd frontend
npm install
npm run dev| Method | Endpoint | Description |
|---|---|---|
| GET | /api/persons |
Get all contacts |
| POST | /api/persons |
Add a new contact |
| PUT | /api/persons/:id |
Update a contact |
| DELETE | /api/persons/:id |
Delete a contact |
You can deploy the backend to Render or Railway, and the frontend to Netlify or Vercel.
The frontend uses ESLint with:
eslint-plugin-react@eslint/js- Vite for fast development
Lint code with:
npm run lintYuxuan — developed as part of Full Stack Open coursework.
This project is licensed for educational purposes. Use it to learn, extend, and build upon your own full-stack apps.