💌 Mobile Wedding Invitation 💌

This project is a mobile wedding invitation.

It is developed based on React and TypeScript, using Vite to provide a fast and convenient development environment.

eslint and prettier are applied, and styling is implemented using emotion/styled.

The gallery uses react-photoswipe-gallery, and the map uses react-naver-maps.

A cute confetti feature is added using js-confetti.

Project Installation and Execution Guide

1. Clone the repository.

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

2. Move to the project folder.

cd mobile-wedding-invitation

3. Install the required dependencies.

npm install

4. (Required) Rename the .env.sample file to .env and fill in the VITE_APP_NAVERMAPS_CLIENT_ID with the client_id obtained from Naver Cloud. The client_id can be issued after registering an application on NAVER CLOUD PLATFORM.
5. (Optional) If you want to use the likes and guestbook features, Firebase setup is required. Configure the Firebase SDK in the src/firebase.ts file. Refer to the Firebase documentation to set up the SDK.
6. Modify the files that require customization. (Refer to the checklist below)
7. Run the application.

npm run dev

Customization Checklist

• Modify the information for the wedding invitation in src/data.json.
• Update the meta tags in index.html for favicon, title, and og tags.
• Replace the thumbnail image in public/thumbnail.jpg.
• Add photos for the gallery in assets/images and import them in src/layout/Gallery/Images.ts. Adjust the sizes here as needed for the photos.
• Enter the required VITE_APP_NAVERMAPS_CLIENT_ID=client_id in .env.
• (Optional) Configure Firebase SDK in src/firebase.ts if using likes or guestbook features.
• (Optional) When adding bank account details for the hosts in src/data.json, you can include KakaoPay or Toss links using the kakaopayAccount and tossAccount fields.

Deploy Immediately After Cloning

References

• Developer: heejin-hwang
• react-photoswipe-gallery library: react-photoswipe-gallery
• react-naver-maps documentation: react-naver-maps
• NAVER CLOUD PLATFORM: NAVER CLOUD PLATFORM
• Kakao Developers: https://developers.kakao.com/
• Create a Toss ID: https://toss.me/

This project is distributed under the MIT License. For more details, refer to the LICENSE file.

Another Mobile Wedding Invitation

For a more polished design, you can explore charming wedding invitations filled with cute details at Small Big Wedding.

Star History