• react
  • javascript
  • productivity
  • webdev

- cleaning

A clean workspace is more than just a luxury — it’s a productivity booster. Whether you're running a small business or working from home, staying organized can be a challenge. In this post, we’ll learn how to build a Clean Office Reminder App using React, and we’ll also explore why cleanliness is vital in the modern office.

Why Cleanliness Matters in the Workplace

Before we jump into code, let's talk about why this app is useful.

An organized workspace can:

  • Reduce stress and distractions
  • Improve focus and mental clarity
  • Decrease the spread of germs and illness
  • Enhance professional appearance, especially for client-facing businesses

Companies that take cleanliness seriously often rely on services like office Cleaning Chicago to keep everything spotless.

What We’re Building

We're creating a simple web app that:

  • Allows users to set recurring office cleaning reminders
  • Sends email or browser notifications
  • Offers tips and checklists for better cleaning habits
  • Is responsive and mobile-friendly

Let’s dive into the tech!

Tools & Technologies

  • React (with Hooks)
  • TailwindCSS (for styling)
  • EmailJS (for sending email notifications)
  • LocalStorage (to save user preferences)
  • Optional: Node.js backend for advanced features (scheduling, multi-user support)

Initial Setup

npx create-react-app clean-office-reminder
cd clean-office-reminder
npm install tailwindcss emailjs-com

Configure Tailwind:

npx tailwindcss init -p

Add Tailwind directives to index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Create a Reminder Form

Let’s start by making a simple form component.

// ReminderForm.jsx
import { useState } from "react";

function ReminderForm({ addReminder }) {
  const [time, setTime] = useState("");
  const [message, setMessage] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    addReminder({ time, message });
    setTime("");
    setMessage("");
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 p-4 bg-white rounded shadow">
      <input
        type="time"
        value={time}
        onChange={(e) => setTime(e.target.value)}
        className="border p-2 w-full"
        required
      />
      <input
        type="text"
        placeholder="Reminder message"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        className="border p-2 w-full"
        required
      />
      <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded">
        Add Reminder
      button>
    form>
  );
}

export default ReminderForm;

Display Reminders

// ReminderList.jsx
function ReminderList({ reminders }) {
  return (
    <ul className="mt-4 space-y-2">
      {reminders.map((reminder, index) => (
        <li key={index} className="p-2 border rounded bg-gray-50">
          <strong>{reminder.time}strong>: {reminder.message}
        li>
      ))}
    ul>
  );
}

export default ReminderList;

Main App Component

// App.jsx
import { useState, useEffect } from "react";
import ReminderForm from "./ReminderForm";
import ReminderList from "./ReminderList";

function App() {
  const [reminders, setReminders] = useState(() => {
    const stored = localStorage.getItem("reminders");
    return stored ? JSON.parse(stored) : [];
  });

  const addReminder = (reminder) => {
    const updated = [...reminders, reminder];
    setReminders(updated);
    localStorage.setItem("reminders", JSON.stringify(updated));
  };

  return (
    <div className="max-w-md mx-auto p-6">
      <h1 className="text-2xl font-bold mb-4">Clean Office Reminder Apph1>
      <ReminderForm addReminder={addReminder} />
      <ReminderList reminders={reminders} />
    div>
  );
}

export default App;

Optional: Email Notifications

If you want to send email notifications, you can use EmailJS. Create an account, get your user ID and service/template IDs, and then:

npm install emailjs-com

Then integrate it into your form’s submit logic.

Hosting the App

You can deploy this app easily with platforms like Vercel, Netlify, or GitHub Pages.

npm run build

Keep It Clean

Make sure to also keep your physical office space clean. Digital reminders help, but regular maintenance and routine sanitation are key to long-term productivity.

Final Thoughts

By integrating technology and cleanliness, you're investing in both efficiency and wellness. This simple app can serve as a daily nudge to tidy up, clean surfaces, empty trash bins, and disinfect shared areas.

Whether you manage a startup or work from a home office, taking just 10 minutes a day to organize your space can have a huge impact.

Happy coding — and stay clean!