{"id":45168287,"url":"https://github.com/centmarde/serenity-web-template-reusable","last_synced_at":"2026-02-24T11:00:37.838Z","repository":{"id":339139026,"uuid":"1160586113","full_name":"centmarde/serenity-web-template-reusable","owner":"centmarde","description":"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.","archived":false,"fork":false,"pushed_at":"2026-02-21T17:24:54.000Z","size":1697,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-22T13:29:47.637Z","etag":null,"topics":["love","reactjs","template","valentines","web","webpack","website","webtemplates","zustand"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/centmarde.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-18T05:50:48.000Z","updated_at":"2026-02-21T17:24:58.000Z","dependencies_parsed_at":"2026-02-22T09:00:37.355Z","dependency_job_id":null,"html_url":"https://github.com/centmarde/serenity-web-template-reusable","commit_stats":null,"previous_names":["centmarde/serenity-web-template-reusable"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/centmarde/serenity-web-template-reusable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/centmarde%2Fserenity-web-template-reusable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/centmarde%2Fserenity-web-template-reusable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/centmarde%2Fserenity-web-template-reusable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/centmarde%2Fserenity-web-template-reusable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/centmarde","download_url":"https://codeload.github.com/centmarde/serenity-web-template-reusable/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/centmarde%2Fserenity-web-template-reusable/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29741144,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["love","reactjs","template","valentines","web","webpack","website","webtemplates","zustand"],"created_at":"2026-02-20T07:31:34.288Z","updated_at":"2026-02-24T11:00:37.806Z","avatar_url":"https://github.com/centmarde.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 💕 Serenity Web Template Reusable - Reusable Love Space Template\n\nA 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.\n\n## 🚀 Tech Stack\n\n![React](https://img.shields.io/badge/React-19.2.0-61DAFB?style=for-the-badge\u0026logo=react\u0026logoColor=white)\n![TypeScript](https://img.shields.io/badge/TypeScript-5.9.3-3178C6?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n![Zustand](https://img.shields.io/badge/Zustand-5.0.11-FF6B6B?style=for-the-badge\u0026logo=zustand\u0026logoColor=white)\n![Vite](https://img.shields.io/badge/Vite-7.3.1-646CFF?style=for-the-badge\u0026logo=vite\u0026logoColor=white)\n![TailwindCSS](https://img.shields.io/badge/Tailwind-4.1.18-06B6D4?style=for-the-badge\u0026logo=tailwindcss\u0026logoColor=white)\n![Axios](https://img.shields.io/badge/Axios-1.13.5-5A29E4?style=for-the-badge\u0026logo=axios\u0026logoColor=white)\n\n## ✨ Key Features\n\n- **🔧 Fully Configurable**: Everything customizable through a single `settings.json` file\n- **📱 Mobile Responsive**: Optimized for all device sizes\n- **💝 Romantic Loading Experience**: Animated loading screen with personalized traits\n- **🎨 Dynamic Theming**: Color schemes adapt to your preferences\n- **💌 Personalized Content**: Custom greetings, couple names, and relationship milestones\n- **🚀 Zero Code Changes**: Customize entirely through configuration\n\n---\n\n## 🏗️ System Architecture\n\n### Core Philosophy: Configuration-Driven Reusability\n\nThe system is built around a **single source of truth** - the `settings.json` file - making it completely reusable without touching any code.\n\n```\n┌─────────────────────────────────────────────────────┐\n│                   settings.json                     │\n│                (Configuration Hub)                   │\n└─────────────────┬───────────────────────────────────┘\n                  │\n                  ▼\n┌─────────────────────────────────────────────────────┐\n│              Settings Store (Zustand)               │\n│           • Centralized State Management            │\n│           • Automatic Validation                    │\n│           • Type-Safe Access Methods               │\n└─────────────────┬───────────────────────────────────┘\n                  │\n        ┌─────────┴─────────┐\n        ▼                   ▼\n┌─────────────┐    ┌─────────────────┐\n│ LoadingView │    │   LandingView   │\n│             │    │                 │\n│ • Traits    │    │ • Theme Colors  │\n│ • Greetings │    │ • Relationship  │\n│ • Progress  │    │   Statistics    │\n│ • Animation │    │ • Personalized  │\n└─────────────┘    │   Messages      │\n                   └─────────────────┘\n```\n\n### 🎯 Reusability Strategy\n\n#### 1. **Settings-Driven Architecture**\nEvery aspect of the application reads from `public/settings.json`:\n\n```json\n{\n  \"themeColor\": \"#F2A6A6\",\n  \"callsign\": \"love\",\n  \"couplename\": \"Jane\", \n  \"appName\": \"Love Personal Love Space\",\n  \"coupleOfficialDate\": \"2025-02-16\",\n  \"startingGreetings\": \"baby girl\",\n  \"traits\": [\n    \"you like pink color\",\n    \"you don't like crowded environment and I find it cute\",\n    \"you have the most beautiful smile that lights up my day\"\n  ]\n}\n```\n\n#### 2. **Centralized State Management**\n```typescript\n// Settings Store - Single source of truth for all components\ninterface Settings {\n  themeColor: string;\n  callsign: string;\n  couplename: string;\n  appName: string;\n  coupleOfficialDate: string;\n  startingGreetings: string;\n  traits: string[];\n}\n```\n\n#### 3. **Component Architecture**\n- **LoadingView**: Displays random traits with animated progress\n- **LandingView**: Shows personalized dashboard with relationship stats\n- **Settings Store**: Provides typed access methods for all settings\n\n---\n\n## 🚀 Quick Setup for New Users\n\n### Step 1: Clone \u0026 Install\n```bash\ngit clone https://github.com/centmarde/serenity-web-template-reusable.git\ncd serenity-web-template-reusable\nnpm install\n```\n\n### Step 2: Customize Settings\nEdit `public/settings.json` with your information:\n\n```json\n{\n  \"themeColor\": \"#YOUR_COLOR\",\n  \"callsign\": \"your_nickname\",\n  \"couplename\": \"Your Partner's Name\",\n  \"appName\": \"Your Love Space Name\",\n  \"coupleOfficialDate\": \"YYYY-MM-DD\",\n  \"startingGreetings\": \"your_pet_name\",\n  \"traits\": [\n    \"trait 1 about your partner\",\n    \"trait 2 about your partner\",\n    \"add as many as you want...\"\n  ]\n}\n```\n\n### Step 3: Add Your Loading Animation\nReplace `public/assets/loading-gif.gif` with your preferred animation.\n\n### Step 4: Run\n```bash\nnpm run dev\n```\n\n**That's it!** Your personalized love space is ready without changing a single line of code.\n\n---\n\n## 🔧 Technical Stack\n\n- **Frontend**: React 18 + TypeScript\n- **State Management**: Zustand\n- **Styling**: Inline styles with responsive design\n- **Build Tool**: Vite\n- **Configuration**: JSON-based settings system\n\n---\n\n## 🎨 Customization Examples\n\n### Theme Colors\n```json\n{\n  \"themeColor\": \"#FF6B9D\"  // Pink theme\n  \"themeColor\": \"#4ECDC4\"  // Teal theme  \n  \"themeColor\": \"#A8E6CF\"  // Mint theme\n}\n```\n\n### Traits Categories\n```json\n{\n  \"traits\": [\n    // Appearance traits\n    \"you have the most beautiful eyes\",\n    \"your smile lights up the room\",\n    \n    // Personality traits  \n    \"you're incredibly thoughtful\",\n    \"you always make me laugh\",\n    \n    // Habit traits\n    \"you love cozy movie nights\", \n    \"you get excited about small things\"\n  ]\n}\n```\n\n---\n\n## 📱 Responsive Design Features\n\n- **Mobile-First Approach**: Optimized for phones, tablets, and desktops\n- **Dynamic Scaling**: Uses `clamp()` and `vw` units for fluid typography\n- **Touch-Friendly**: Appropriate sizing for mobile interactions\n- **Progressive Enhancement**: Works great on all screen sizes\n\n---\n\n## 🔄 System Reusability Benefits\n\n### ✅ **For Developers**\n- No code changes needed for customization\n- Type-safe configuration system\n- Modular component architecture  \n- Easy to extend with new features\n\n### ✅ **For End Users**\n- Simple JSON configuration\n- Instant personalization\n- No technical knowledge required\n- Complete ownership of content\n\n### ✅ **For Deployment**\n- Single configuration file to manage\n- Easy backup and restore of settings\n- Version control friendly\n- Environment-specific configurations possible\n\n---\n\n## 📂 Project Structure\n\n```\nfuture-love-letter/\n├── public/\n│   ├── settings.json          # 🎯 Main configuration file\n│   └── assets/\n│       └── loading-gif.gif    # Custom loading animation\n├── src/\n│   ├── stores/\n│   │   └── settings.ts        # Zustand store for settings\n│   ├── pages/\n│   │   ├── LoadingView.tsx    # Animated loading screen\n│   │   └── LandingView.tsx    # Main personalized dashboard\n│   ├── components/            # Reusable UI components\n│   └── App.tsx               # Main application entry\n└── README.md                 # This file\n```\n\n---\n\n## 🚢 Deployment\n\nThe application can be deployed to any static hosting service:\n\n- **Vercel**: `vercel --prod`\n- **Netlify**: Drag and drop the `dist` folder\n- **GitHub Pages**: Push to gh-pages branch\n- **Any CDN**: Upload built files\n\n---\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Update settings.json with example data\n4. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n5. Push to the branch (`git push origin feature/AmazingFeature`)\n6. Open a Pull Request\n\n---\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\n## 💝 Perfect For\n\n- **Couples**: Create your personalized digital love space\n- **Anniversaries**: Celebrate relationship milestones\n- **Long Distance**: Share memories and traits you love\n- **Gifts**: Surprise your partner with a custom love app\n- **Templates**: Use as base for other personal projects\n\n---\n\n**Made with 💕 by developers who believe in love and reusable code.**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcentmarde%2Fserenity-web-template-reusable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcentmarde%2Fserenity-web-template-reusable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcentmarde%2Fserenity-web-template-reusable/lists"}