💌 Mobile Hochzeitseinladung 💌

Dieses Projekt ist eine mobile Hochzeitseinladung.

Es wurde auf Basis von React und Typescript entwickelt und verwendet Vite für eine schnelle und einfache Entwicklungsumgebung.

Es wurden eslint und prettier implementiert, sowie emotion/styled für das Styling verwendet.

Für die Galerie wurde react-photoswipe-gallery und für die Karte react-naver-maps genutzt.

Mit js-confetti wurde eine niedliche Konfetti-Funktion hinzugefügt.

Installations- und Ausführungsanleitung

1. Klonen Sie das Repository.

git clone https://github.com/your-username/mobile-wedding-invitation.git

2. Navigieren Sie zum Projektordner.

cd mobile-wedding-invitation

3. Installieren Sie die erforderlichen Abhängigkeiten.

npm install

4. (Erforderlich) Benennen Sie die Datei .env.sample in .env um und füllen Sie VITE_APP_NAVERMAPS_CLIENT_ID mit der von Naver Cloud erhaltenen client_id. Die client_id kann nach der Registrierung einer Anwendung auf NAVER CLOUD PLATFORM bezogen werden.
5. (Optional) Für die Nutzung der Likes- und Gästebuchfunktion ist eine Firebase-Konfiguration erforderlich. Konfigurieren Sie das Firebase SDK in der Datei src/firebase.ts. Die SDK-Konfiguration kann gemäß der Firebase-Dokumentation vorgenommen werden.
6. Passen Sie die benötigten Dateien an (siehe Checkliste unten).
7. Starten Sie die Anwendung.

npm run dev

Anpassungs-Checkliste

• src/data.json Bearbeiten Sie die Informationen für die Hochzeitseinladung.
• index.html Passen Sie die Meta-Tags für Favicon, Titel und OG-Tags an.
• public/thumbnail.jpg Ersetzen Sie das Thumbnail-Bild.
• Fügen Sie Fotos für die Galerie in assets/images hinzu und importieren Sie sie in src/layout/Gallery/Images.ts. Passen Sie hier die Größen entsprechend den Bildern an.
• .env VITE_APP_NAVERMAPS_CLIENT_ID=client_id muss eingegeben werden.
• (Optional) src/firebase.ts Wenn Sie Likes oder Gästebuch verwenden möchten, ist eine Firebase SDK-Konfiguration erforderlich.
• (Optional) src/data.json Bei der Angabe der Bankkontonummer der Brauteltern können Sie KakaoPay- oder Toss-Links über die Felder kakaopayAccount und tossAccount hinzufügen.

Sofortiges Deployment nach dem Klonen

Referenzmaterial

• Entwickler: heejin-hwang
• react-photoswipe-gallery Bibliothek: react-photoswipe-gallery
• react-naver-maps Dokumentation: react-naver-maps
• NAVER CLOUD PLATFORM: NAVER CLOUD PLATFORM
• Kakao Developers: https://developers.kakao.com/
• Toss ID erstellen: https://toss.me/

Dieses Projekt wird unter der MIT-Lizenz veröffentlicht. Weitere Informationen finden Sie in der LICENSE-Datei.

Eine weitere mobile Hochzeitseinladung

Für ein strukturierteres Design können Sie bei SmallBigWedding eine süße Einladung mit vielen Highlights ausprobieren.

Star-Historie