MyAnimeStore is the ultimate destination for anime enthusiasts. With a user-friendly interface and a wealth of features you can search for your favorite anime access detailed information receive AI-driven recommendations expand your anime collection shop for merchandise and connect with the anime community. Secure sign-in ensures a personalized experience and our open-source platform welcomes contributions to make it even better. Start your anime journey with MyAnimeStore today!
https://myanimestore.vercel.app/
Here're some of the project's best features:
- Authentication by Clerk: Securely sign in and manage your account with authentication provided by Clerk ensuring the safety and privacy of your information.
- Personal Profiles: Create and customize your personal anime profile to showcase your anime collection keep track of watched episodes and interact with the anime community.
- Stripe Integration: Seamlessly check out and purchase anime titles with Stripe integration making it easy to add anime to your cart and complete transactions.
- Sleek UI Components: Utilize Schadcn components with Tailwind CSS for a stylish and responsive user interface that enhances the user experience.
- Database Powered by MongoDB: Store and manage your anime data with MongoDB providing a robust and flexible database solution for your platform.
- Semantic Search with MongoDB Vector Search: Enhance anime search functionality with MongoDB Vector Search allowing for semantic search capabilities making it easier to find the anime you're looking for.
- OpenAI Integration: Leverage OpenAI integration to search for anime titles through embeddings enabling advanced and efficient anime searches based on content and user preferences.
- Mobile Responsiveness: Ensure a seamless viewing experience on all devices down to 320px width with a mobile-responsive design that adapts to different screen sizes and resolutions.
- Efficient database queries are powered by Prisma's Object-Relational Mapping (ORM) for optimized data retrieval and management.
- Next.js is utilized to enable optimal page rendering through Static Site Generation (SSG) and Server-Side Rendering (SSR) ensuring a smooth user experience.
1. Clone respository
https://github.com/destocot/myanimestore
2. Install dependencies
npm install
3. Create .env.local file in the root of your directory
touch .env.local
4. Setup MongoDB database
https://www.mongodb.com/cloud/atlas/register
5. Setup Prisma Schema
see prisma > schema.prisma
6. Put your DATABASE_URL in your .env file
DATABASE_URL="FILL_ME"
7. Setup Clerk account
https://clerk.com/
8. Add CLERK env variables to .env.local
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="FILL_ME"
CLERK_SECRET_KEY="FILL_ME"
NEXT_PUBLIC_CLERK_SIGN_IN_URL="FILL_ME"
NEXT_PUBLIC_CLERK_SIGN_UP_URL="FILL_ME"
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL="FILL_ME"
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL="FILL_ME"
9. Setup Stripe account
https://stripe.com/
10. Add Stripe env variables to .env.local
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="FILL_ME"
STRIPE_SECRET_KEY="FILL_ME"
11. Setup openai account
https://platform.openai.com/
12. Add OPENAI_API_KEY to .env.local
OPENAI_API_KEY="FILL_ME"