A beautiful web app to create and share personalized love stories with your partner. It features romantic templates, a love counter, a music player, a photo gallery, and more! Perfect for anniversaries, Valentine's Day, or just a special moment with your loved one. 💕
- Romantic Templates – Choose from multiple beautifully designed love story templates.
- Love Counter – Displays how many days you've been together.
- Music Integration – Add a special song via YouTube.
- Photo Memories – Upload and display cherished photos.
- Love Letter – Write and display a heartfelt love letter.
- Floating Hearts Animation – A lovely animated effect for extra romance.
- Customizable Themes – Personalize colors and fonts.
- Easy Sharing – Generate a unique URL to share your love story.
- Responsive Design – Works beautifully on both mobile and desktop.
This project leverages modern web technologies to deliver a smooth and engaging user experience.
- React.js – Component-based UI for interactive experiences.
- Tailwind CSS – For clean and modern styling.
- Lucide Icons – Beautiful icons for UI elements.
- Nanoid – For generating unique shareable IDs.
- Val.town (for Serverless Execution) – Runs directly in the cloud without backend setup.
- Node.js – JavaScript runtime for running a backend.
- Express.js – For handling API requests.
- SQLite – Lightweight database for storing love stories.
Since this project is written for Val.town, you can run it directly:
- Go to Val.town
- Sign in or create an account
- Click 'New Val'
- Paste the full code into the editor
- Click 'Run' and get your live URL! ✅
If you only need the frontend, you can run it in a browser with just an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Love Story App</title>
</head>
<body>
<div id="root"></div>
<script type="module">
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
import React from "https://esm.sh/react@18.2.0";
import App from "./app.js"; // Create app.js with your React code
createRoot(document.getElementById("root")).render(React.createElement(App));
</script>
</body>
</html>- Copy your React component code into
app.js - Open
index.htmlin a browser.
If you want to develop and test with a full local setup, follow these steps:
Download and install Node.js if you haven't already.
mkdir love-story-app
cd love-story-app
npm init -ynpm install react react-dom lucide-react nanoid vite express sqlite3Same as the HTML code above but inside public/index.html.
Create a src folder and inside it, create main.jsx:
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
createRoot(document.getElementById("root")).render(<App />);- Copy your full React component code into
src/App.jsx.
npm run dev- Open the URL provided by Vite (e.g.,
http://localhost:5173).
- User selects a love template (e.g., "Romantic Classic").
- Fills in details – Partner's name, love letter, song, and images.
- Generates a unique love story page with animations and interactive elements.
- Shares the link with their partner.
- Partner visits the page and sees the love letter, memories, and more! ❤️
- Custom Templates – Let users create their own designs.
- AI Love Letter Generator – Automatically generate a romantic letter.
- Multimedia Support – Add voice notes and videos.
- User Accounts – Save and edit love stories over time.
- More Animation Effects – Enhance the love experience with more animations.
If you like this project, consider supporting me! ❤️
Enjoy creating your love story! 💖