PingMeLater is a lightweight reminder companion: jot down what you need to remember, choose when to be reminded, and keep everything in sync between a React UI and a simple Express/MongoDB backend.
Unlike the templated productivity clones, this project is intentionally small, opinionated, and meant to teach the mechanics of collecting reminder data, persisting it, and exposing it through a clean API.
- Fast reminder capture – title, date, time, and email are all collected from a single form so you can create a reminder in seconds. @src/pages/Home.jsx#4-90
- Manageable dashboard – review or delete saved reminders from a minimalist list view. @src/pages/Reminders.jsx#4-85
- Mongo-backed API – reminders are stored in MongoDB through a small Express/Mongoose service. @server/routes/reminderRoutes.js#1-40 @server/models/reminderModel.js#1-28
[React + Vite] --> fetch() --> [Express API] --> [MongoDB]
REST Mongoose Atlas/local
The frontend runs on Vite and interacts with the API via fetch calls (/api/reminders). The API handles validation, persistence, and exposes CRUD endpoints. MongoDB can run locally or on Atlas depending on your .env configuration. @src/pages/Home.jsx#23-38 @server/app.js#1-12
| Category | Description |
|---|---|
| Capture reminders | Form with controlled inputs for title, date, time, and email. Client-side validation ensures required fields are present. |
| View reminders | Paginated-friendly list view with loading/error states and delete actions. |
| REST API | GET /api/reminders, POST /api/reminders, DELETE /api/reminders/:id backed by a Reminder Mongoose model. |
| Database layer | Schema enforces required fields and timestamps via createdAt. |
| Layer | Tools |
|---|---|
| Frontend | React 19, React Router, Tailwind CSS, Vite, React Hot Toast |
| Backend | Node.js, Express 5, CORS middleware |
| Database | MongoDB using Mongoose ODM |
| Tooling | ESLint, PostCSS, Tailwind CLI |
Dependencies live in the root package.json, so a single npm install sets up both client and server code paths.
- Node.js 18+
- A running MongoDB instance (local or MongoDB Atlas)
Create server/config.env (or a .env file in the project root)
Any valid Mongo connection string will work.
npm install# API
node server/server.js
# Frontend (in a new terminal)
npm run devBy default, the frontend runs on http://localhost:5173 and proxies requests to the API at http://localhost:5000.
| Method | Endpoint | Description |
|---|---|---|
| GET | /api/reminders |
Returns reminders sorted by creation date. |
| POST | /api/reminders |
Persists a new reminder. Expects { title, date, time, email }. |
| DELETE | /api/reminders/:id |
Removes a reminder by Mongo ObjectId. |
Responses follow standard HTTP status codes with JSON payloads for errors. See server/routes/reminderRoutes.js for implementation details. @server/routes/reminderRoutes.js#1-40
PingMeLater/
├── src/
│ ├── components/
│ ├── pages/
│ │ ├── Home.jsx
│ │ └── Reminders.jsx
│ └── App.jsx
├── server/
│ ├── app.js
│ ├── server.js
│ ├── routes/
│ │ └── reminderRoutes.js
│ └── models/
│ └── reminderModel.js
└── package.json
- Send reminder emails (Nodemailer + cron job or a managed queue service)
- Add authentication (magic links or OAuth) so reminders can be scoped to a user
- Support recurring schedules (daily/weekly/monthly)
- Ship a PWA shell for push notifications
Pull requests and issue reports are welcome. If you spot UX gaps or API edge cases, open an issue with reproduction steps and expected behavior.
MIT — see the LICENSE file if/when it lands in the repo. Until then, treat the project as open for educational use.