OnlyAnime is a modern, full-stack web platform for anime fans to access exclusive content, buy anime-themed merchandise, and join a vibrant weeb community. Built with Next.js, Prisma, TailwindCSS, Stripe, and Kinde Auth, it offers a seamless, feature-rich experience for both users and admins.
- Dynamic Landing Page: Hero section, highlights, and testimonials for new users.
- Authentication: Secure login/signup via Kinde Auth.
- Personalized Home: Authenticated users see their profile, posts, and exclusive content.
- Posts Feed: Browse, like, and comment on posts (images/videos) from the community.
- Exclusive Content: Access special posts and behind-the-scenes content as a subscriber.
- Rewards & Badges: Earn weeb badges, gift hampers, and exclusive rewards.
- Product Catalog: Browse anime-themed T-shirts and goods with images and details.
- Product Details: View, select size, and purchase products securely.
- Checkout & Orders: Stripe-powered checkout, order history, and purchase success summary.
- Flexible Plans: Monthly and annual subscription tiers with discounts.
- Stripe Integration: Secure payments, subscription management, and webhooks.
- Premium Perks: Priority support, exclusive goodies, and more for premium users.
- Secret Dashboard: Admin-only area to manage content, products, and analytics.
- Content Management: Create/edit posts, moderate comments, and manage visibility.
- Store Management: Add/edit/archive products, view orders, and manage inventory.
- Analytics: Track revenue, sales, and subscriptions in real time.
- Meet the Team: Dedicated section introducing the developers and designers.
- Testimonials: Community feedback and user stories.
- Modern Design: Responsive, dark/light mode, glassmorphism, and animated backgrounds.
- Reusable Components: Built with shadcn/ui, Radix UI, and custom TailwindCSS utilities.
src/app/— Main Next.js app, routing, and API endpointssrc/components/— UI components, layouts, and feature modulessrc/db/— Prisma database clientsrc/emails/— Transactional email templatessrc/lib/— Utility functions and Stripe integrationprisma/schema.prisma— Database schema (users, posts, products, orders, etc.)public/— Static assets (images, logos, gifs)
- Install dependencies:
npm install # or yarn - Set up environment variables:
- Copy
.env.exampleto.envand fill in required values (database, Stripe, Kinde, etc.)
- Copy
- Run database migrations:
npx prisma migrate dev
- Start the development server:
npm run dev # or yarn dev - Visit http://localhost:3000 in your browser.
- Frontend: Next.js 14, React 18, TailwindCSS, shadcn/ui, Radix UI
- Backend: Next.js API routes, Prisma ORM, PostgreSQL
- Auth: Kinde Auth
- Payments: Stripe
- Email: Resend, React Email
- Cloud Media: Cloudinary
- Secure login/signup with Kinde Auth
- User profiles with avatars, subscription status, and order history
- Users can create, like, and comment on posts (images/videos)
- Admins can moderate and create public/exclusive posts
- Product listing, details, and secure checkout
- Admins can add/archive products and manage orders
- Multiple pricing tiers (monthly/yearly)
- Stripe integration for payments and webhooks
- Premium users get exclusive content and perks
- Tabs for Content, Store, and Analytics
- Create/manage posts and products
- View sales, revenue, and subscription analytics
- Team section with bios and avatars
- Testimonials and user feedback
- User: Profile, subscription, orders, comments, likes
- Post: Media, text, likes, comments, visibility
- Comment: Linked to user and post
- Like: Linked to user and post
- Subscription: Plan, price, start/end dates
- Product: Name, image, price, archive status
- Order: User, product, price, size, shipping
- ShippingAddress: Linked to orders
- Welcome and receipt emails sent via Resend/React Email
- Add new products or posts via the admin dashboard
- Update pricing, features, and team info in code
- Extend database schema with Prisma
Pull requests and issues are welcome! Please open an issue to discuss your ideas or report bugs.