Welcome to IMAGINAI, where innovation meets imagination! We are excited to present a comprehensive guide on building a state-of-the-art IMAGINAI Platform equipped with five cutting-edge AI tools: Chatbot, Image Generation, Music Generation, Video Generation, and Code Generation.
IMAGINAI is built using Next.js 14, integrating Stripe for seamless billing, harnessing the power of OpenAI and ReplicateAI for AI functionalities, and utilizing Crisp for customer engagement, Aiven for robust data infrastructure, and Prisma for efficient database management.
In addition to its powerful core functionalities, IMAGINAI leverages a rich palette of web development technologies:
- React - Tailwind CSS - Prisma - MySQL - Clerk
- Tailwind Design: Sleek, modern UI design using Tailwind CSS
- Tailwind Animations and Effects: Smooth animations and effects enhanced with Tailwind CSS
- Full Responsiveness: Optimized for seamless user experience across all devices
- Clerk Authentication: Supports authentication via email, Google, and 9+ social logins
- Client-Side Form Validation and Handling: Implemented using react-hook-form for efficient form management
- Server-Side Error Handling: Utilizes react-toast for effective error management
- Image Generation Tool: Empowered by OpenAI for generating images
- Video Generation Tool: Utilizes Replicate AI for creating videos
- Conversation Generation Tool: Powered by OpenAI for generating natural language conversations
- Music Generation Tool: Empowered by Replicate AI for generating music compositions
- Page Loading State: Provides visual indicators for loading states
- Stripe Monthly Subscription: Integrated for seamless payment processing
- Free Tier with API Limiting: Offers a limited-access free tier for users
- Route Handlers for API Requests: Implements POST, DELETE, and GET routes in app/api for robust API functionality
- Direct Database Access in Server Components: Fetches data directly from the database without APIs
- Handling Parent-Child Component Relations: Efficient management of component relationships
- Next.js 13 App Router Structure: Organized folder structure for clarity and scalability
- Reusable Layouts: Consistent and reusable layouts enhance user interface consistency
To get started with IMAGINAI, follow these steps:
-
Ensure Requirements: Verify that Git and NodeJS (version 18.x.x) are installed on your system.
-
Clone the Repository: Clone this repository to your local machine.
git clone https://github.com/verma45jatin/ImaginAI
-
Set Up Environment Variables: Create a
.envfile in the root directory and add the necessary environment variables as shown in the example above. -
Install Dependencies: Open a terminal in the root directory of the project and run:
npm install --legacy-peer-deps # or yarn install --legacy-peer-deps -
Setup Prisma Database: Configure your MySQL database using Prisma. Run the following command in the terminal:
npx prisma db push # or yarn prisma db push -
Start the Application: After completing the above steps, start the application by running:
npm run dev # or yarn dev
Now you're all set to explore and utilize the powerful capabilities of IMAGINAI! 🌟