PARTY CARD

Party Card is the app for creating a website card with wishes. Firstly you can see the example card. Next, you can create your own, generate a code QR or link and send this card to your close person

August 2025 Update – Background Music 🎵 & AI Generation

This update brings two exciting features to Party Card:

🎵 Background Music

You can now add background music by providing a direct URL.
The music will automatically play in the background while viewing the card.

🤖 AI-Powered Card Generation

Use your own API key from OpenAI or DeepSeek to generate personalized cards.

A dedicated feature lets you create full Party Cards based on a prompt and recipient's name.

Backend implementation is available here:
👉 GitHub – Vercel Serverless LangChain API For Party Card and Suno AI API

For better AI output I use Langchain framework for NodeJS

---

These features open the door for even more creative, automated, and interactive card-making!

Table of contents

• Instalation

• About project

• What I used

• Examples

• Test e2e

• Inspiration

Instalation

• Download files by git clone repository-name
• Use npm i
• Use npm start

You need also to create a .env file with variables:

• VITE_TENOR_KEY=key to tenor

To the next variables you need to check the FIREBASE configuration:

• VITE_apikey=apikey
• VITE_authDomain=authDomain
• VITE_databaseURL=databaseUrl
• VITE_projectId=projectId
• VITE_storageBucket=storageBucket
• VITE_messagingSenderId=messagingSenderID
• VITE_appId=appId

About

If you are a creative person this website app can be for you! PARY CARD has a generator that allows creating of a variety of cards with wishes. Here are some examples:

ATTENTION: Some examples are in the Polish language version because Party Card have English and Polish translation.

The perfect creation of such a card may not be easy at first. You need to be careful with the color aspects. In order to better illustrate the possibilities of Party Card we have prepared some example uses. However, remember that the appearance of the card can be observed on the fly as you complete the form. I recommend doing this as often as possible. There are three sections to customize: Background, Main section, and Wishes section. At the end of the form, you will see a button with the generation of a QR code and a link that you can send to the person you want to gift

When you create your card you can share other people by using QR Code or link. I used Firebase to create a simple database to store any cards. If you have any problem with sharing you can also use local mode to generate the card form.

Technologies

I used:

• React with Typescript and Reat Router
• React Query
• Zustand (with persist middleware to store some data in local storage)
• react-qr-code
• Firebase (Database)
• Scss modules
• React JoyRide (to create a quick tutorial in the form section)
• i18n with language detector (this app have polish and English language version)

I also used Storybook to testing (mainly) form components

You can use npm run storybook or yarn storybook to run this!

Examples

Test e2e

I also use playwright to writing e2e test. Helpful commands:

• record tests for given site
  npx playwright codegen https://party-card.vercel.app/
• run tests without browser GUI:
  npx playwright test or yarn test
• run test with browser GUI:
  npx playwright test --headed or yarn test:headed
• viewing report
  npx playwright show-report

Inspiration

Last time when my girlfriend has a birthday I create for her this website:

This wish card was a great idea so I thought about writing a website to generate wish cards for everyone!