Build a birthday reminder app

Here’s a complete implementation of a Birthday Reminder App using React (frontend), Node.js with Express (backend), and MongoDB (database). The app allows users to add, edit, delete, and get reminders for upcoming birthdays.

🧱 Tech Stack

• Frontend: React + Tailwind CSS

• Backend: Node.js + Express.js

• Database: MongoDB

• Optional: Node Cron for daily birthday reminders

🌐 Backend: server.js

javascript
CopyEdit
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

mongoose.connect('mongodb://localhost:27017/birthdays', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

const BirthdaySchema = new mongoose.Schema({
  name: String,
  date: Date,
  notes: String
});

const Birthday = mongoose.model('Birthday', BirthdaySchema);

// Get all birthdays
app.get('/api/birthdays', async (req, res) => {
  const birthdays = await Birthday.find().sort({ date: 1 });
  res.json(birthdays);
});

// Add a new birthday
app.post('/api/birthdays', async (req, res) => {
  const birthday = new Birthday(req.body);
  await birthday.save();
  res.json(birthday);
});

// Update a birthday
app.put('/api/birthdays/:id', async (req, res) => {
  const updated = await Birthday.findByIdAndUpdate(req.params.id, req.body, { new: true });
  res.json(updated);
});

// Delete a birthday
app.delete('/api/birthdays/:id', async (req, res) => {
  await Birthday.findByIdAndDelete(req.params.id);
  res.json({ success: true });
});

app.listen(5000, () => console.log('Server running on http://localhost:5000'));

🧑‍🎨 Frontend: App.jsx (React + Tailwind CSS)

jsx
CopyEdit
import React, { useEffect, useState } from 'react';
import axios from 'axios';

export default function App() {
  const [birthdays, setBirthdays] = useState([]);
  const [form, setForm] = useState({ name: '', date: '', notes: '' });
  const [editingId, setEditingId] = useState(null);

  const fetchBirthdays = async () => {
    const res = await axios.get('http://localhost:5000/api/birthdays');
    setBirthdays(res.data);
  };

  useEffect(() => {
    fetchBirthdays();
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (editingId) {
      await axios.put(`http://localhost:5000/api/birthdays/${editingId}`, form);
    } else {
      await axios.post('http://localhost:5000/api/birthdays', form);
    }
    setForm({ name: '', date: '', notes: '' });
    setEditingId(null);
    fetchBirthdays();
  };

  const handleEdit = (birthday) => {
    setForm(birthday);
    setEditingId(birthday._id);
  };

  const handleDelete = async (id) => {
    await axios.delete(`http://localhost:5000/api/birthdays/${id}`);
    fetchBirthdays();
  };

  return (
    <div className="max-w-2xl mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">🎂 Birthday Reminder</h1>

      <form onSubmit={handleSubmit} className="space-y-4 mb-6">
        <input
          type="text"
          placeholder="Name"
          className="w-full p-2 border rounded"
          value={form.name}
          onChange={(e) => setForm({ ...form, name: e.target.value })}
          required
        />
        <input
          type="date"
          className="w-full p-2 border rounded"
          value={form.date}
          onChange={(e) => setForm({ ...form, date: e.target.value })}
          required
        />
        <textarea
          placeholder="Notes (optional)"
          className="w-full p-2 border rounded"
          value={form.notes}
          onChange={(e) => setForm({ ...form, notes: e.target.value })}
        />
        <button
          type="submit"
          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
        >
          {editingId ? 'Update Birthday' : 'Add Birthday'}
        </button>
      </form>

      <ul className="space-y-4">
        {birthdays.map((bday) => (
          <li key={bday._id} className="p-4 border rounded shadow flex justify-between items-center">
            <div>
              <h2 className="text-xl font-semibold">{bday.name}</h2>
              <p>{new Date(bday.date).toLocaleDateString()}</p>
              {bday.notes && <p className="text-sm text-gray-600">{bday.notes}</p>}
            </div>
            <div className="flex space-x-2">
              <button onClick={() => handleEdit(bday)} className="text-blue-500">Edit</button>
              <button onClick={() => handleDelete(bday._id)} className="text-red-500">Delete</button>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

🕒 Optional: Daily Reminder with Node Cron

Add this to the backend if you want to log or send email reminders:

bash
CopyEdit
npm install node-cron

js
CopyEdit
const cron = require('node-cron');

// Daily at 8 AM
cron.schedule('0 8 * * *', async () => {
  const today = new Date();
  const day = today.getDate();
  const month = today.getMonth();

  const birthdays = await Birthday.find();
  birthdays.forEach(b => {
    const bday = new Date(b.date);
    if (bday.getDate() === day && bday.getMonth() === month) {
      console.log(`🎉 Today is ${b.name}'s birthday!`);
      // You can send an email here using nodemailer or similar
    }
  });
});

This is a complete, functional, and expandable app. You can add user authentication, notifications, and integrations (e.g., Google Calendar or email) as next steps. Let me know if you want deployment instructions or features like push notifications.