{"id":18645861,"url":"https://github.com/interledger/uct-hackathon-2024","last_synced_at":"2025-04-11T12:31:38.500Z","repository":{"id":242635278,"uuid":"807948527","full_name":"interledger/uct-hackathon-2024","owner":"interledger","description":"A simple Next.js tutorial project that for creators to publish fundraising campaigns","archived":false,"fork":false,"pushed_at":"2024-10-08T09:08:47.000Z","size":525,"stargazers_count":1,"open_issues_count":0,"forks_count":25,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-25T14:01:36.573Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/interledger.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-30T05:00:47.000Z","updated_at":"2024-10-08T09:08:51.000Z","dependencies_parsed_at":"2024-06-11T18:44:17.978Z","dependency_job_id":"e2e07f61-b68a-4126-ab61-6f2e6d68e47f","html_url":"https://github.com/interledger/uct-hackathon-2024","commit_stats":null,"previous_names":["interledger/uct-hackathon-2024"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interledger%2Fuct-hackathon-2024","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interledger%2Fuct-hackathon-2024/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interledger%2Fuct-hackathon-2024/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interledger%2Fuct-hackathon-2024/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/interledger","download_url":"https://codeload.github.com/interledger/uct-hackathon-2024/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248401966,"owners_count":21097328,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T06:17:29.382Z","updated_at":"2025-04-11T12:31:37.970Z","avatar_url":"https://github.com/interledger.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tippy\n\nA 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.\n\nThis 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).\n\n---\n\n## Open Payments\n\nOpen 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.\n\n1. Client Keys\n\n- Create an account on Rafiki.Money by following this [setup](https://openpayments.dev/snippets/before-you-begin/)\n\n## Technologies 🛠️\n\n- [\u003cimg width=\"30\" height=\"30\" src=\"https://img.icons8.com/plasticine/30/react.png\" alt=\"react\"/\u003e **React**](https://react.dev/), [**React-DOM**](https://www.npmjs.com/package/react-dom) and [**React icons**](https://react-icons.github.io/react-icons/)\n\n- [\u003cimg width=\"30\" height=\"30\" src=\"https://img.icons8.com/fluency-systems-regular/30/nextjs.png\" alt=\"nextjs\"/\u003e **Next.js 14**](https://nextjs.org/)\n\n- [\u003cimg width=\"30\" height=\"30\" src=\"https://img.icons8.com/?size=100\u0026id=38561\u0026format=png\u0026color=000000\" alt=\"postgresql\"/\u003e **PostgreSQL**](https://www.postgresql.org/)\n\n- [\u003cimg width=\"30\" height=\"30\" src=\"https://img.icons8.com/color/30/tailwindcss.png\" alt=\"tailwindcss\"/\u003e **Tailwindcss**](https://tailwindcss.com/) and [**NextUI**](https://nextui.org/)\n\n- [**Prisma**](https://www.prisma.io/)\n\n- [\u003cimg width=\"30\" height=\"30\" src=\"https://img.icons8.com/color/30/eslint.png\" alt=\"eslint\"/\u003e **ESLint**](https://eslint.org/)\n\n- [**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.\n\n- [**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\n\n- [\u003cimg width=\"30\" height=\"30\" src=\"https://img.icons8.com/ios/30/prisma-orm.png\" alt=\"prisma orm\"/\u003e **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 \u0026 auto-completion.\n\n- **Zod**\n  TypeScript-first schema validation with static type inference\n\n- [**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.\n\n---\n\n---\n\n## \u003cimg width=\"30\" height=\"30\" src=\"https://img.icons8.com/nolan/30/todo-list.png\" alt=\"todo-list\"/\u003e Prerequisites\n\n- Node version 18.x. I used 21.\\*\n\n- PostgreSQL using a or b\n  - 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/)\n    - We can run PostgreSQL from docker which will require minimal setup\n  - b. Download and install PostgreSQL following this tutorial https://www.w3schools.com/postgresql/postgresql_install.php\n    - We'll use pgadmin to create and view our DB data\n\n---\n\n---\n\n### \u003cimg width=\"30\" height=\"30\" src=\"https://img.icons8.com/dusk/30/workstation.png\" alt=\"workstation\"/\u003e Getting Started\n\n1. Cloning the repository:\n\n```BASH\ngit clone https://github.com/interledger/uct-hackathon-2024.git\n```\n\nAnd put inside the root folder\n\n2. After clonining the GitHub repository and install all the dependencies with:\n\n```BASH\nnpm install\n#or\nnpm i\n```\n\n3. Setup `.env` file:\n\n- Clerk env variables\n  - For the clerk variables create an account on [clerk](https://dashboard.clerk.com/sign-up?redirect_url=https%3A%2F%2Fdashboard.clerk.com%2F)\n  - Get the keys from API keys on the dashboard\n- Open Payments env variables\n  - Follow this tutorial [Rafiki.money](https://openpayments.dev/snippets/before-you-begin/)\n  - Copy key ID and the wallet address into the .env file\n    - NB make sure to replace the preceding $ with https://\n  - Put the private key in the root folder i.e. uct-hackathon-2024/private.key\n\n- For the Open Payments variables create an account on [rafiki money](https://rafiki.money/auth/signup)\n- Go to settings \u003e developer keys and generate the keys\n- Copy the downloaded private.key file into the root folder of the repository\n\n```\n# Postgres\nDATABASE_URL=\"postgresql://tippy_admin:tippy@localhost:5432/tippy\"\n\n# Clerk\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=\nCLERK_SECRET_KEY=\nNEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=\"/profile\"\nNEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=\"/profile\"\n\n# Open Payments\nOPEN_PAYMENTS_CLIENT_ADDRESS=\nOPEN_PAYMENTS_SECRET_KEY_PATH=\"private.key\"\nOPEN_PAYMENTS_KEY_ID=\n```\n\n4. Setup Postgresql\n\nIf using docker\n\n```bash\ndocker-compose up -d\n```\n\nIf using local PostgreSQL\n\n- Open the app Pgadmin\n  - Enter a master password e.g. 123456\n  - Click on Servers and enter your master password if asked\n  - Right click on Login/Group Roles \u003e Create \u003e Login/Group Roles\n  - For the name put tippy_admin\n  - For password put tippy\n  - On privileges select everything\n  - Click save\n  - Right click Databases \u003e Create\n  - For database name put tippy, and owner put tippy_admin\n\n5. Setup Prisma\n\n```BASH\nnpx prisma generate \u0026 npx prisma migrate dev\n```\n\n6. Start the app, running developer server:\n\n```BASH\nnpm run dev\n```\n\n7. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n---\n\n---\n\n### \u003cimg width=\"30\" height=\"30\" src=\"https://img.icons8.com/color/30/command-line.png\" alt=\"command-line\"/\u003e Useful Commands\n\n- To view local docker containers run\n\n```bash\ndocker ps -a\n```\n\n- To delete a container local docker containers run\n\n```bash\ndocker rm --force container_id\n```\n\n- Run this command to get into the postgres docker container:\n\n```bash\ndocker exec -it postgres_container_id bash\npsql tippy tippy_admin\n```\n\n- Then run this command to show the tables:\n  `\\dt`\n\n#### \u003cimg width=\"30\" height=\"30\" src=\"https://img.icons8.com/color/30/book.png\" alt=\"book\"/\u003e Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/)\n\n---\n\n#### Deploy on Vercel\n\nThe easiest way to deploy your **Next.js** app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finterledger%2Fuct-hackathon-2024","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finterledger%2Fuct-hackathon-2024","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finterledger%2Fuct-hackathon-2024/lists"}