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.

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

The easiest way to launch the app is using Docker. If you don't want to use docker or cannot use it you can manually install all the dependencies as shown in this guide.

• Docker Setup Prerequisites

  • The app can be run fully from Docker containers using the docker-compose.yml file in the root folder.
  • Download and install docker from Mac, windows, linux

• Manual Setup Prerequisites

  • Node version 18.x.
  • Latest PostgreSQL installation
    • Download and install PostgreSQL following this tutorial
    • We'll use pgadmin to create and view our DB data

---

Docker Setup (Recommended)

1. Cloning the repository:

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

2. 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

3. Build the images and start the app

   • Build the image

     docker-compose build

   • Start the containers

     docker-compose up

4. The app is now running on localhost:3000

Manual Setup

1. Follow steps 1 and 2 from above

2. Install the libraries:

   npm install

3. Download and install postgresql

4. Download and install pgadmin

5. Setup postgresql using pgadmin

   • 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

6. Setup Prisma

   npx prisma generate & npx prisma migrate dev

7. Start the app, running developer server:

   npm run dev

8. 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.

---