https://github.com/interledger/uct-hackathon-2024
A simple Next.js tutorial project that for creators to publish fundraising campaigns
https://github.com/interledger/uct-hackathon-2024
Last synced: about 1 year ago
JSON representation
A simple Next.js tutorial project that for creators to publish fundraising campaigns
- Host: GitHub
- URL: https://github.com/interledger/uct-hackathon-2024
- Owner: interledger
- Created: 2024-05-30T05:00:47.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-08T09:08:47.000Z (over 1 year ago)
- Last Synced: 2025-03-25T14:01:36.573Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 513 KB
- Stars: 1
- Watchers: 2
- Forks: 25
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tippy
A simple [Next.js](https://nextjs.org/) tutorial project that for creators to publish fundraising campaigns. They can receive donations through [OP (Open Payments)](https://openpayments.dev/) by inserting their OP wallet address on a campaign.
This is a project in [Next.js](https://nextjs.org/) with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/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](https://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](https://openpayments.dev/snippets/before-you-begin/)
## Technologies 🛠️
- [
**React**](https://react.dev/), [**React-DOM**](https://www.npmjs.com/package/react-dom) and [**React icons**](https://react-icons.github.io/react-icons/)
- [
**Next.js 14**](https://nextjs.org/)
- [
**PostgreSQL**](https://www.postgresql.org/)
- [
**Tailwindcss**](https://tailwindcss.com/) and [**NextUI**](https://nextui.org/)
- [**Prisma**](https://www.prisma.io/)
- [
**ESLint**](https://eslint.org/)
- [**Clerk**](https://clerk.com/), 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**](https://docs.docker.com/desktop/) for setting up and running containerized applications. We're using docker for setting up and running our Postgresql database on the local machine
- [
**Prisma**](https://www.prisma.io/), 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**](https://typicode.github.io/husky/) + [**CommitLint**](https://commitlint.js.org/), 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](https://docs.docker.com/desktop/install/mac-install/), [windows](https://docs.docker.com/desktop/install/windows-install/), [linux](https://docs.docker.com/desktop/install/linux-install/)
- 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:
```BASH
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:
```BASH
npm install
#or
npm i
```
3. Setup `.env` file:
- Clerk env variables
- For the clerk variables create an account on [clerk](https://dashboard.clerk.com/sign-up?redirect_url=https%3A%2F%2Fdashboard.clerk.com%2F)
- Get the keys from API keys on the dashboard
- Open Payments env variables
- Follow this tutorial [Rafiki.money](https://openpayments.dev/snippets/before-you-begin/)
- 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
- For the Open Payments variables create an account on [rafiki money](https://rafiki.money/auth/signup)
- Go to settings > developer keys and generate the keys
- Copy the downloaded private.key file into the root folder of the repository
```
# 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
```bash
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
```BASH
npx prisma generate & npx prisma migrate dev
```
6. Start the app, running developer server:
```BASH
npm run dev
```
7. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
---
---
### 
Useful Commands
- To view local docker containers run
```bash
docker ps -a
```
- To delete a container local docker containers run
```bash
docker rm --force container_id
```
- Run this command to get into the postgres docker container:
```bash
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](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/)
---
#### Deploy on Vercel
The easiest way to deploy your **Next.js** app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
---