@titas_mallick/wedding-site-gen 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +72 -38
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -49,47 +49,81 @@ npx @titas_mallick/wedding-site-gen
|
|
|
49
49
|
- **Image Hosting**: Cloudinary (Unsigned Uploads)
|
|
50
50
|
- **Analytics**: Vercel Analytics
|
|
51
51
|
|
|
52
|
-
##
|
|
52
|
+
## 📁 Project Architecture & Codebase Map
|
|
53
|
+
|
|
54
|
+
### 1. Route Structure (`/app`)
|
|
55
|
+
- **`/invitation/[slug]`**: The core engine for personalized digital invites. It reads the `slug` (guest name) and displays a customized experience.
|
|
56
|
+
- **`/[groom]` & `/[bride]`**: (Dynamically renamed by CLI) Individual bio pages for the couple.
|
|
57
|
+
- *Modification Point*: Edit these files to change personal stories or education/work history.
|
|
58
|
+
- **`/guestbook`**: Handles real-time photo uploads and gallery display.
|
|
59
|
+
- *Tech Detail*: Uses Cloudinary for storage and Firestore to track image metadata.
|
|
60
|
+
- **`/song-requests`**: A dual-purpose route. Guests see a request form; Admins see a management queue.
|
|
61
|
+
- **`/updates/overlay`**: A specialized green-screen route for OBS.
|
|
62
|
+
- *Usage*: Add this as a Browser Source in OBS with a Chroma Key filter.
|
|
63
|
+
|
|
64
|
+
### 2. Configuration (`/config`)
|
|
65
|
+
- **`site.ts`**: The central source of truth for navigation links, site name, and SEO metadata.
|
|
66
|
+
- **Modify here** if you want to add/remove menu items or change the site description.
|
|
67
|
+
- **`firebase.ts`**: Client-side Firebase initialization.
|
|
68
|
+
- **`firebase-admin.js`**: Server-side Admin SDK configuration for secure operations (RSVP management, etc.).
|
|
69
|
+
|
|
70
|
+
### 3. Key Components (`/components`)
|
|
71
|
+
- **`ConciergeBot.tsx`**: The Gemini-powered AI assistant.
|
|
72
|
+
- *Customization*: Edit the `systemInstruction` in this file to change the bot's personality or the facts it knows about your wedding.
|
|
73
|
+
- **`CountdownTimer.tsx`**: The main landing page countdown.
|
|
74
|
+
- *Logic*: Uses a `setInterval` to calculate time until the `weddingStart` date.
|
|
75
|
+
- **`OurStory.tsx`**: The timeline component showing the couple's history.
|
|
53
76
|
|
|
54
|
-
|
|
55
|
-
Create a `.env.local` file with the following keys:
|
|
77
|
+
---
|
|
56
78
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
# Cloudinary Config
|
|
72
|
-
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
|
|
73
|
-
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET= # Should be an 'Unsigned' preset
|
|
74
|
-
```
|
|
79
|
+
## 🎨 Customization & Development
|
|
80
|
+
|
|
81
|
+
### How to change the Theme/Colors
|
|
82
|
+
This project uses **Tailwind CSS** and **HeroUI**.
|
|
83
|
+
- To change the primary "Wedding Gold" or "Wedding Pink" colors, edit `tailwind.config.js`.
|
|
84
|
+
- Search for the `extend.colors` section to update the hex codes.
|
|
85
|
+
|
|
86
|
+
### What to Keep vs. What to Replace
|
|
87
|
+
- **KEEP**: The `/app/invitation` logic and `/components/providers.tsx` as they handle the core framework setup.
|
|
88
|
+
- **REPLACE**:
|
|
89
|
+
- All images in `/public` (groom.jpg, bride.jpg, and gallery photos).
|
|
90
|
+
- The text content in `app/[groom]/page.tsx` and `app/[bride]/page.tsx`.
|
|
91
|
+
- The venue details in `app/mark-the-dates/page.tsx`.
|
|
75
92
|
|
|
76
|
-
###
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
-
|
|
93
|
+
### Running Locally for Development
|
|
94
|
+
1. Clone the generated repository.
|
|
95
|
+
2. Install dependencies: `npm install`.
|
|
96
|
+
3. Start the dev server: `npm run dev`.
|
|
97
|
+
4. Open [http://localhost:3000](http://localhost:3000).
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
101
|
+
## 🛠️ Setup & Configuration (Services)
|
|
102
|
+
|
|
103
|
+
### 1. Firebase (Database, Auth, and RSVP)
|
|
104
|
+
1. Go to the [Firebase Console](https://console.firebase.google.com/).
|
|
105
|
+
2. Create a new project.
|
|
106
|
+
3. Enable **Firestore Database** and **Authentication** (enable Email/Password provider).
|
|
107
|
+
4. Go to **Project Settings > General** and scroll down to "Your apps" to create a Web App.
|
|
108
|
+
5. Copy the `firebaseConfig` values into your `.env.local`:
|
|
109
|
+
- `NEXT_PUBLIC_APIKEY`, `NEXT_PUBLIC_AUTHDOMAIN`, `NEXT_PUBLIC_PROJECTID`, etc.
|
|
110
|
+
6. **Admin SDK**: Go to **Project Settings > Service accounts**, click "Generate new private key", and use those values for the `FIREBASE_ADMIN_*` variables in `.env.local`.
|
|
111
|
+
|
|
112
|
+
### 2. Google Gemini (AI Concierge)
|
|
113
|
+
1. Go to the [Google AI Studio](https://aistudio.google.com/).
|
|
114
|
+
2. Click **"Get API key"**.
|
|
115
|
+
3. Copy the key and paste it as `NEXT_PUBLIC_GEMINI_API_KEY` in your `.env.local`.
|
|
116
|
+
|
|
117
|
+
### 3. Cloudinary (Guestbook Photo Uploads)
|
|
118
|
+
1. Create a free account at [Cloudinary](https://cloudinary.com/).
|
|
119
|
+
2. Go to **Dashboard** and copy your **Cloud Name** into `NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME`.
|
|
120
|
+
3. Go to **Settings > Upload** and scroll down to **Upload presets**.
|
|
121
|
+
4. Click "Add upload preset".
|
|
122
|
+
5. Set **Signing Mode** to **Unsigned**.
|
|
123
|
+
6. Set the name to `wedding` (or match whatever you put in `NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET`).
|
|
124
|
+
7. Save and you're ready!
|
|
125
|
+
|
|
126
|
+
---
|
|
93
127
|
|
|
94
128
|
## 📁 Project Structure Highlights
|
|
95
129
|
- `/app/invitation/[slug]`: The core personalized guest experience.
|