KindnessCafe.com is a platform similar to Buy Me a Coffee, where users can support their favorite creators by donating money. The website features user authentication, payment processing via Razorpay, and a personalized dashboard for each user.
- User Authentication: Users can log in using Google or GitHub via NextAuth.js.
- Personalized Dashboard: After logging in, users can:
- Add their website link and about themselves.
- Enter their Razorpay ID and Secret.
- View earnings and copy their donation page link.
- See supporters and donation amounts.
- Payment Integration: Integrated with Razorpay for handling payments.
- Responsive Design: Fully responsive for all devices.
- Help Center: A dedicated Help Center page.
- Homepage: Features include:
- Login button
- Resources button linking to the Help Center page
- Start My Page button
- Details about KindnessCafe, donations, and funds raised during natural disasters.
- Login: Users can log in using Google or GitHub.
- User Details: After logging in, users can add their website link and about themselves.
- Payment Setup: Users enter their Razorpay ID and Secret.
- Dashboard: Users can:
- View their earnings.
- Copy their donation page link.
- See details of supporters and donation amounts.
- Logout, which redirects them to the homepage.
- My Page:
- View supporters and followers.
- Payment box with options to donate $5, $15, or $25, with a message.
- Next.js: Framework used for building the application.
- NextAuth.js: Authentication library for handling login via Google and GitHub.
- Tailwind CSS: Utility-first CSS framework for styling.
- MongoDB & Mongoose: Database for storing user details, payment information, and more.
- Razorpay: Payment gateway for processing donations.
- JavaScript: Programming language used for development.
In this project, I gained experience with:
- Working with Next.js and NextAuth.js.
- Using Tailwind CSS for responsive design.
- Integrating MongoDB with Mongoose.
- Implementing authentication with NextAuth.js and storing email IDs in MongoDB.
- Handling payments with Razorpay.
- Add a search bar to allow users to search for other people.