https://github.com/centmarde/serenity-web-template-reusable
A beautiful, personalized web application template designed for couples to create their own romantic digital spaces. Built with React, TypeScript, and Zustand for maximum reusability and customization.
https://github.com/centmarde/serenity-web-template-reusable
love reactjs template valentines web webpack website webtemplates zustand
Last synced: 4 months ago
JSON representation
A beautiful, personalized web application template designed for couples to create their own romantic digital spaces. Built with React, TypeScript, and Zustand for maximum reusability and customization.
- Host: GitHub
- URL: https://github.com/centmarde/serenity-web-template-reusable
- Owner: centmarde
- Created: 2026-02-18T05:50:48.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-02-21T17:24:54.000Z (4 months ago)
- Last Synced: 2026-02-22T13:29:47.637Z (4 months ago)
- Topics: love, reactjs, template, valentines, web, webpack, website, webtemplates, zustand
- Language: TypeScript
- Homepage:
- Size: 1.62 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 💕 Serenity Web Template Reusable - Reusable Love Space Template
A beautiful, personalized web application template designed for couples to create their own romantic digital spaces. Built with React, TypeScript, and Zustand for maximum reusability and customization.
## 🚀 Tech Stack
## ✨ Key Features
- **🔧 Fully Configurable**: Everything customizable through a single `settings.json` file
- **📱 Mobile Responsive**: Optimized for all device sizes
- **💝 Romantic Loading Experience**: Animated loading screen with personalized traits
- **🎨 Dynamic Theming**: Color schemes adapt to your preferences
- **💌 Personalized Content**: Custom greetings, couple names, and relationship milestones
- **🚀 Zero Code Changes**: Customize entirely through configuration
---
## 🏗️ System Architecture
### Core Philosophy: Configuration-Driven Reusability
The system is built around a **single source of truth** - the `settings.json` file - making it completely reusable without touching any code.
```
┌─────────────────────────────────────────────────────┐
│ settings.json │
│ (Configuration Hub) │
└─────────────────┬───────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────┐
│ Settings Store (Zustand) │
│ • Centralized State Management │
│ • Automatic Validation │
│ • Type-Safe Access Methods │
└─────────────────┬───────────────────────────────────┘
│
┌─────────┴─────────┐
▼ ▼
┌─────────────┐ ┌─────────────────┐
│ LoadingView │ │ LandingView │
│ │ │ │
│ • Traits │ │ • Theme Colors │
│ • Greetings │ │ • Relationship │
│ • Progress │ │ Statistics │
│ • Animation │ │ • Personalized │
└─────────────┘ │ Messages │
└─────────────────┘
```
### 🎯 Reusability Strategy
#### 1. **Settings-Driven Architecture**
Every aspect of the application reads from `public/settings.json`:
```json
{
"themeColor": "#F2A6A6",
"callsign": "love",
"couplename": "Jane",
"appName": "Love Personal Love Space",
"coupleOfficialDate": "2025-02-16",
"startingGreetings": "baby girl",
"traits": [
"you like pink color",
"you don't like crowded environment and I find it cute",
"you have the most beautiful smile that lights up my day"
]
}
```
#### 2. **Centralized State Management**
```typescript
// Settings Store - Single source of truth for all components
interface Settings {
themeColor: string;
callsign: string;
couplename: string;
appName: string;
coupleOfficialDate: string;
startingGreetings: string;
traits: string[];
}
```
#### 3. **Component Architecture**
- **LoadingView**: Displays random traits with animated progress
- **LandingView**: Shows personalized dashboard with relationship stats
- **Settings Store**: Provides typed access methods for all settings
---
## 🚀 Quick Setup for New Users
### Step 1: Clone & Install
```bash
git clone https://github.com/centmarde/serenity-web-template-reusable.git
cd serenity-web-template-reusable
npm install
```
### Step 2: Customize Settings
Edit `public/settings.json` with your information:
```json
{
"themeColor": "#YOUR_COLOR",
"callsign": "your_nickname",
"couplename": "Your Partner's Name",
"appName": "Your Love Space Name",
"coupleOfficialDate": "YYYY-MM-DD",
"startingGreetings": "your_pet_name",
"traits": [
"trait 1 about your partner",
"trait 2 about your partner",
"add as many as you want..."
]
}
```
### Step 3: Add Your Loading Animation
Replace `public/assets/loading-gif.gif` with your preferred animation.
### Step 4: Run
```bash
npm run dev
```
**That's it!** Your personalized love space is ready without changing a single line of code.
---
## 🔧 Technical Stack
- **Frontend**: React 18 + TypeScript
- **State Management**: Zustand
- **Styling**: Inline styles with responsive design
- **Build Tool**: Vite
- **Configuration**: JSON-based settings system
---
## 🎨 Customization Examples
### Theme Colors
```json
{
"themeColor": "#FF6B9D" // Pink theme
"themeColor": "#4ECDC4" // Teal theme
"themeColor": "#A8E6CF" // Mint theme
}
```
### Traits Categories
```json
{
"traits": [
// Appearance traits
"you have the most beautiful eyes",
"your smile lights up the room",
// Personality traits
"you're incredibly thoughtful",
"you always make me laugh",
// Habit traits
"you love cozy movie nights",
"you get excited about small things"
]
}
```
---
## 📱 Responsive Design Features
- **Mobile-First Approach**: Optimized for phones, tablets, and desktops
- **Dynamic Scaling**: Uses `clamp()` and `vw` units for fluid typography
- **Touch-Friendly**: Appropriate sizing for mobile interactions
- **Progressive Enhancement**: Works great on all screen sizes
---
## 🔄 System Reusability Benefits
### ✅ **For Developers**
- No code changes needed for customization
- Type-safe configuration system
- Modular component architecture
- Easy to extend with new features
### ✅ **For End Users**
- Simple JSON configuration
- Instant personalization
- No technical knowledge required
- Complete ownership of content
### ✅ **For Deployment**
- Single configuration file to manage
- Easy backup and restore of settings
- Version control friendly
- Environment-specific configurations possible
---
## 📂 Project Structure
```
future-love-letter/
├── public/
│ ├── settings.json # 🎯 Main configuration file
│ └── assets/
│ └── loading-gif.gif # Custom loading animation
├── src/
│ ├── stores/
│ │ └── settings.ts # Zustand store for settings
│ ├── pages/
│ │ ├── LoadingView.tsx # Animated loading screen
│ │ └── LandingView.tsx # Main personalized dashboard
│ ├── components/ # Reusable UI components
│ └── App.tsx # Main application entry
└── README.md # This file
```
---
## 🚢 Deployment
The application can be deployed to any static hosting service:
- **Vercel**: `vercel --prod`
- **Netlify**: Drag and drop the `dist` folder
- **GitHub Pages**: Push to gh-pages branch
- **Any CDN**: Upload built files
---
## 🤝 Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Update settings.json with example data
4. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
5. Push to the branch (`git push origin feature/AmazingFeature`)
6. Open a Pull Request
---
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
## 💝 Perfect For
- **Couples**: Create your personalized digital love space
- **Anniversaries**: Celebrate relationship milestones
- **Long Distance**: Share memories and traits you love
- **Gifts**: Surprise your partner with a custom love app
- **Templates**: Use as base for other personal projects
---
**Made with 💕 by developers who believe in love and reusable code.**