![Logo](https://raw.githubusercontent.com/jmholzer/greeting-card/main/README_images/logo.png)
A free, customizable, and self-hostable greeting card template built using Next.js and Framer Motion. It allows multiple people to sign and contribute to a digital card that you can customise for whatever occasion.
View Demo
ยท
Report Bug
ยท
Request Feature
Table of Contents
View the card at the main route (/
).
Sign the card at /sign
(up to 16 messages).
-
Clone the repo
git clone https://github.com/jmholzer/greeting-card.git
-
Customise your card: add a
front.jpg
to be the fro- Add a
front.jpg
with aspect ratio 1:1.414 (landscape). Canva is a good place to find design templates. - Modify
app/favicon.ico
. - Modify the title / description of the page in
app/layout.tsx
.
- Add a
-
Install NPM packages
npm install
-
Install the Vercel CLI and login
npm i -g vercel vercel login
-
Deploy a new Vercel project for your card
vercel deploy
-
Create a Postgres database on Vercel and connect it with your new project
-
Add the
HOST
environment variable to the Vercel project (this can be any URL that points to your deployment)HOST=https://greeting-card-demo.vercel.app
-
Pull the DB environment variables to your local
vercel env pull
-
Create a Prisma client
npx prisma generate
-
Create the DB tables
npx prisma db push
-
Redeploy your project to load the new env vars
vercel --prod
- Navigate to your project's URL and check that you can view (
/
) and sign (/sign
) the card.
From here you can put your own domain infront of your deployment and share the link.
See the open issues for a full list of proposed features (and known issues).
Feel free to open an issue or contribute a PR:
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE
for more information.
Project Link: https://github.com/jmholzer/greeting-card