Tippy

A simple Next.js tutorial project that for creators to publish fundraising campaigns. They can receive donations through OP (Open Payments) by inserting their OP wallet address on a campaign.

This is a project in Next.js with create-next-app.

---

Open Payments

Open Payments is an open API standard that can be implemented by account servicing entities (e.g. banks, digital wallet providers, and mobile money providers) to facilitate interoperability in the setup and completion of payments. In this tutorial we'll connect to Rafiki.Money, a test wallet provider that’s part of the Interledger testnet.

1. Client Keys

• Create an account on Rafiki.Money by following this setup

Technologies 🛠️

• React, React-DOM and React icons

• Next.js 14

• PostgreSQL

• Tailwindcss and NextUI

• Prisma

• ESLint

• Clerk, is more than a sign-in-box, integrate complete user management UIs nad APIs, purpose-build for React, Next.js and the Modern Web.

• Docker for setting up and running containerized applications. We're using docker for setting up and running our Postgresql database on the local machine

• Prisma, Next-generation Node.js and TypeScript ORM. Prisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.

• Zod TypeScript-first schema validation with static type inference

• Husky + CommitLint, husky is for adding git hooks and commitlint checks that the commit message is formatted a certain way.

---

---

Prerequisites

• Node version 18.x. I used 21.*

• PostgreSQL using a or b

  • a. Download and install docker from Mac, windows, linux
    • We can run PostgreSQL from docker which will require minimal setup
  • b. Download and install PostgreSQL following this tutorial https://www.w3schools.com/postgresql/postgresql_install.php
    • We'll use pgadmin to create and view our DB data

---

---

Getting Started

1. Cloning the repository:

git clone https://github.com/interledger/uct-hackathon-2024.git

And put inside the root folder

2. After clonining the GitHub repository and install all the dependencies with:

npm install
#or
npm i

3. Setup .env file:

• Clerk env variables
  • For the clerk variables create an account on clerk
  • Get the keys from API keys on the dashboard
• Open Payments env variables
  • Follow this tutorial Rafiki.money
  • Copy key ID and the wallet address into the .env file
    • NB make sure to replace the preceding $ with https://
  • Put the private key in the root folder i.e. uct-hackathon-2024/private.key

# Postgres
DATABASE_URL="postgresql://tippy_admin:tippy@localhost:5432/tippy"

# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL="/profile"
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL="/profile"

# Open Payments
OPEN_PAYMENTS_CLIENT_ADDRESS=
OPEN_PAYMENTS_SECRET_KEY_PATH="private.key"
OPEN_PAYMENTS_KEY_ID=

4. Setup Postgresql

If using docker

docker-compose up -d

If using local PostgreSQL

• Open the app Pgadmin
  • Enter a master password e.g. 123456
  • Click on Servers and enter your master password if asked
  • Right click on Login/Group Roles > Create > Login/Group Roles
  • For the name put tippy_admin
  • For password put tippy
  • On privileges select everything
  • Click save
  • Right click Databases > Create
  • For database name put tippy, and owner put tippy_admin

5. Setup Prisma

npx prisma generate & npx prisma migrate dev

6. Start the app, running developer server:

npm run dev

7. Open http://localhost:3000 with your browser to see the result.

---

---

Useful Commands

• To view local docker containers run

docker ps -a

• To delete a container local docker containers run

docker rm --force container_id

• Run this command to get into the postgres docker container:

docker exec -it postgres_container_id bash
psql tippy tippy_admin

• Then run this command to show the tables: \dt

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.

• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository

---

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.

---