Building a Couple Memory Lane" App with React and Local Storage

We all know the struggle of finding the perfect gift for your significant other. But sometimes, the best gift isn't a thing—it's an experience or a shared memory. Today, we'll build a simple React app that lets couples create a private digital timeline of their favorite moments together. This is a fun, beginner-friendly project that uses React hooks and local storage to persist data.

First, set up a new React app using Vite. Once that's done, create a new component called MemoryLane.jsx. This component will hold all our logic.

We'll use useState for our form inputs and useEffect to load data from local storage when the component mounts. Here's the core state:

const [memories, setMemories] = useState(() => {
  const saved = localStorage.getItem('coupleMemories');
  return saved ? JSON.parse(saved) : [];
});
const [newMemory, setNewMemory] = useState({ title: '', description: '', date: '' });

The trick is using a function inside useState to initialize from local storage—this prevents unnecessary re-renders.

Now, let's add a form to capture a new memory. Each entry will have a title, a short description, and a date. When the user submits, we'll update the state and save to local storage:

const addMemory = (e) => {
  e.preventDefault();
  const updatedMemories = [...memories, { ...newMemory, id: Date.now() }];
  setMemories(updatedMemories);
  localStorage.setItem('coupleMemories', JSON.stringify(updatedMemories));
  setNewMemory({ title: '', description: '', date: '' });
};

For the UI, display the memories in a clean card layout. Add a delete button for each memory so couples can curate their timeline. The CSS is straightforward—just a centered container with cards that have a soft border and shadow.

Here's a quick render snippet:

return (
  <div className="memory-lane">
    <h2>Our Memory Lane</h2>
    <form onSubmit={addMemory}>
      <input type="text" placeholder="Title" value={newMemory.title} onChange={(e) => setNewMemory({...newMemory, title: e.target.value})} required />
      <textarea placeholder="Description" value={newMemory.description} onChange={(e) => setNewMemory({...newMemory, description: e.target.value})} />
      <input type="date" value={newMemory.date} onChange={(e) => setNewMemory({...newMemory, date: e.target.value})} required />
      <button type="submit">Add Memory</button>
    </form>
    <div className="memories-list">
      {memories.map(memory => (
        <div key={memory.id} className="memory-card">
          <h3>{memory.title}</h3>
          <p>{memory.description}</p>
          <small>{memory.date}</small>
        </div>
      ))}
    </div>
  </div>
);

This app is perfect for a couple's anniversary gift. You can even style it with a romantic theme—soft pinks, warm grays, and a heart icon for each memory. Once you're happy with it, deploy it on Vercel or Netlify and share the link as a thoughtful, techy surprise.

And if you're looking for a physical gift to pair with this digital one, check out the curated couple's gifts at Frishay. Their collection has everything from personalized keepsakes to cozy home decor that would make a lovely companion to your custom app.

Comments

[Amelia]

Interesting that you didn't include any text in your post. Sometimes the most powerful statements are the ones left unspoken. What inspired you to share just the empty space?

[Davit Park]

Interesting perspective — I'd love to hear more about what prompted this post. What's on your mind?