A fusion of gratitude and DeFi — appreciation powered by decentralized finance.

🌏 Live Site  |  🎥 Demo Video

GratiFi is a decentralized web application that empowers users, creators, and artisans to receive appreciation through crypto tips on the Solana blockchain. By combining modern Web3 technologies with seamless UX and media-sharing capabilities, GratiFi makes gratitude borderless and impactful.

A key part of GratiFi's user experience is its integration with Civic Auth, a decentralized identity protocol that provides secure and privacy-respecting authentication.

• Users log in via Civic’s Web3 modal, allowing for identity verification without traditional sign-up.
• Upon successful login, GratiFi retrieves a userId and session token via Civic's API.
• This authenticated identity is used to personalize the user’s session and associate it with their tipping activity.

• After login, Civic automatically provisions a non-custodial embedded wallet for each user.
• The wallet is tied to the Civic identity and allows users to send and receive SOL tips instantly.
• No browser extensions or manual private key handling required.
• All transactions (tipping, receiving) are signed transparently via this embedded wallet, ensuring security and ease of use.

• Onboarding Simplicity: Users can start tipping or receiving appreciation in seconds.
• Security & Privacy: Identity is verified without compromising user data.
• Wallet Abstraction: Users don’t need to understand wallets or key management.
• Improved UX: A seamless Web3 experience that feels like Web2.

GratiFi leverages the power of Civic to bridge identity, authentication, and wallet provisioning — making gratitude seamless and secure in the decentralized world.

• React 18 + TypeScript
• Vite — Blazing-fast build tool
• TailwindCSS — Utility-first styling
• Framer Motion & Lottie — Animations
• Civic Auth — Web3 authentication
• Solana / Web3.js — Blockchain interaction
• TanStack Query — Data fetching + caching
• Resend - Emailing service
• Cloudinary — Media storage (images/videos)

• Node.js + Express
• TypeScript
• PostgreSQL with Prisma ORM

GratiFi/
├── backend/                  # Node.js + Express backend
│   ├── src/
│   │   ├── controllers/      # Route handlers
│   │   ├── middlewares/      # Express middlewares (auth, error handling, etc.)
│   │   ├── models/           # Prisma schema/models
│   │   ├── routes/           # API route definitions
│   │   ├── services/         # Business logic
│   │   ├── utils/            # Helpers/utilities
│   │   └── app.ts            # Express app initialization
│   ├── prisma/
│   │   └── schema.prisma     # Prisma DB schema
│   ├── .env                  # Backend environment variables
│   ├── package.json
│   └── tsconfig.json
│
├── frontend/                 # React + Vite frontend
│   ├── src/
│   │   ├── assets/           # Images, videos, Lottie files
│   │   ├── components/       # Reusable UI components
│   │   ├── features/         # Feature-based folders (e.g., auth, posts, wallet)
│   │   ├── hooks/            # Custom hooks
│   │   ├── pages/            # Route-level pages
│   │   ├── services/         # API logic (e.g., React Query hooks)
│   │   ├── types/            # TypeScript types/interfaces
│   │   ├── utils/            # Utility functions
│   │   ├── App.tsx
│   │   └── main.tsx
│   ├── public/               # Public assets
│   ├── .env                  # Frontend environment variables
│   ├── index.html
│   ├── package.json
│   └── vite.config.ts
│
├── README.md
├── .gitignore
└── LICENSE

git clone https://github.com/DhanteyUD/GratiFi.git
cd GratiFi

Frontend:

cd frontend
npm install

Backend:

cd ../backend
npm install

Create .env files in both frontend/ and backend/.

Backend .env:

PORT=4000
NODE_ENV=development
RESEND_API_KEY=
JWT_SECRET=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
CLOUDINARY_URL=
DATABASE_URL=

Frontend .env:

VITE_API_URL=http://localhost:4000/api/v1
VITE_RAPIDAPI=
VITE_CLIENT_ID=
VITE_RAPID_SECTION_ID=

Backend:

cd backend
npm run dev

Frontend:

cd ../frontend
npm run dev

• Frontend: http://localhost:5173

• Backend: http://localhost:4000

Frontend:

cd frontend
npm run build

Backend:

cd backend
npm run build

• Frontend: Vercel

• Backend: Railway

• Connect wallet via Civic Auth

• Browse GratiStars on the feed

• View GratiStars profiles

• Send micro-tips (SOL) to appreciate the content

• View wallet balance and transaction history

• Share your creative work

3rd prize winner of the Civic Hackathon! 🎉

NOTE: This App is still under active development