Code Spirit
Code Spirit
  • 30
  • 10 039
Build a Full Stack AI Content Writer with Next.js 15, Gemini AI and Flux AI - Final Part (2024)
Let's build a full-stack AI-powered content writing platform inspired by Medium. It will integrate Gemini AI and Flux AI for generating content. Authentication will be handled using Clerk, and content will be stored in a MongoDB Atlas database. Additionally, images generated for the platform will be uploaded using uploadthing.
🔑 Clerk: clerk.com/
✨ Gemini AI: aistudio.google.com/
✨ Flux AI: replicate.com/black-forest-labs/flux-schnell
Time Stamps 👇
- 00:00:00 - Building the Homepage
- 00:02:17 - Building the Content Item Component
- 00:09:57 - Building the Author Profile Page
- 00:23:08 - Building the Dashboard
- 00:33:16 - Adding the Like Model
- 00:35:29 - Adding the Like Button Component
- 00:53:19 - Fetching Likes
- 01:05:33 - Adding the Edit Button
- 01:12:39 - Finalizing the Product
💼 Business Inquiries: codespirit369@gmail.com
Don't forget to like, comment, and subscribe for more tutorials.
🎵 Background Music:
All background music in this video is created using Suno AI
#geminiai #clerk #fluxai #uploadthing #mongodb #replicate
มุมมอง: 234

วีดีโอ

Build a Full Stack AI Content Writer with Next.js 15, Gemini AI and Flux AI - Part 03 (2024)
มุมมอง 10512 ชั่วโมงที่ผ่านมา
Let's build a full-stack AI-powered content writing platform inspired by Medium. It will integrate Gemini AI and Flux AI for generating content. Authentication will be handled using Clerk, and content will be stored in a MongoDB Atlas database. Additionally, images generated for the platform will be uploaded using uploadthing. 🔑 Clerk: clerk.com/ ✨ Gemini AI: aistudio.google.com/ ✨ Flux AI: rep...
Build a Full Stack AI Content Writer with Next.js 15, Gemini AI and Flux AI - Part 02 (2024)
มุมมอง 5716 ชั่วโมงที่ผ่านมา
Let's build a full-stack AI-powered content writing platform inspired by Medium. It will integrate Gemini AI and Flux AI for generating content. Authentication will be handled using Clerk, and content will be stored in a MongoDB Atlas database. Additionally, images generated for the platform will be uploaded using uploadthing. 🔑 Clerk: clerk.com/ ✨ Gemini AI: aistudio.google.com/ ✨ Flux AI: rep...
Build a Full Stack AI Content Writer with Next.js 15, Gemini AI and Flux AI - Part 01 (2024)
มุมมอง 13019 ชั่วโมงที่ผ่านมา
Let's build a full-stack AI-powered content writing platform inspired by Medium. It will integrate Gemini AI and Flux AI for generating content. Authentication will be handled using Clerk, and content will be stored in a MongoDB Atlas database. Additionally, images generated for the platform will be uploaded using uploadthing. 🔑 Clerk: clerk.com/ ✨ Gemini AI: aistudio.google.com/ ✨ Flux AI: rep...
Build a Full Stack AI Content Writer with Next.js 15, Gemini AI and Flux AI - Introduction (2024)
มุมมอง 7719 ชั่วโมงที่ผ่านมา
Let's build a full-stack AI-powered content writing platform inspired by Medium. It will integrate Gemini AI and Flux AI for generating content. Authentication will be handled using Clerk, and content will be stored in a MongoDB Atlas database. Additionally, images generated for the platform will be uploaded using uploadthing. 🔑 Clerk: clerk.com/ ✨ Gemini AI: aistudio.google.com/ ✨ Flux AI: rep...
Build a Full Stack AI Chatbot with Next.js 15 and xAI API - Part 02 (2024)
มุมมอง 276หลายเดือนก่อน
In this tutorial, we’ll build an AI chatbot from scratch using Next.js 15, React 19 RC, and xAI’s grok-beta model. This project features a sleek UI with tailwindcss and shadcn/ui components, theme toggling with next-themes, and real-time chat history stored in Firebase Firestore. We’ll also set up secure authentication with next-auth. By the end of the tutorial, you’ll have a modern, fully func...
Build a Full Stack AI Chatbot with Next.js 15 and xAI API - Part 01 (2024)
มุมมอง 2.4Kหลายเดือนก่อน
In this tutorial, we’ll build an AI chatbot from scratch using Next.js 15, React 19 RC, and xAI’s grok-beta model. This project features a sleek UI with tailwindcss and shadcn/ui components, theme toggling with next-themes, and real-time chat history stored in Firebase Firestore. We’ll also set up secure authentication with next-auth. By the end of the tutorial, you’ll have a modern, fully func...
Build a Music Listener UI Using Next.js and shadcn Sidebar (2024)
มุมมอง 4162 หลายเดือนก่อน
This UI design project focuses on building a sleek, responsive music listener web app using shadcn/ui sidebar component. 📚 References: - GitHub Repository (give it a star ⭐): github.com/code-spirit-369/groovvy-music-listener-ui - README: github.com/code-spirit-369/groovvy-music-listener-ui/blob/main/README.md - UI Design Reference: dribbble.com/shots/11139802-Dark-Mode-Music-Player-Web-App 💼 Bu...
How to Add a Personal AI Chatbot to Your Website Using Chatbase (2024)
มุมมอง 822 หลายเดือนก่อน
You can add your own trained AI chatbot to your website by following this tutorial. ✨Chatbase: www.chatbase.co/?via=codespirit 📚 References: - GitHub Repository (give it a star ⭐): github.com/code-spirit-369/text-to-speech-yt NOTE: Clone the GitHub repository from the portfolio branch. 💼 Business Inquiries: codespirit369@gmail.com Don't forget to like, comment, and subscribe for more tutorials....
Build an AI Text-to-Speech (TTS) App Using Next.js and ElevenLabs (2024)
มุมมอง 4393 หลายเดือนก่อน
Build an AI Text-To-Speech (TTS) web app that allows user to convert any text into realistic, high-quality speech using the ElevenLabs API. ✨ElevenLabs: elevenlabs.io/ 📚 References: - GitHub Repository (give it a star ⭐): github.com/code-spirit-369/text-to-speech-yt - README: github.com/code-spirit-369/text-to-speech-yt/blob/main/README.md 💼 Business Inquiries: codespirit369@gmail.com Time Stam...
Build an AI Story Generating App Using Next.js and Gemini AI - Part 3 (2024)
มุมมอง 874 หลายเดือนก่อน
A Web App that generates stories for children using Gemini AI, with accompanying images created through the Stable Diffusion model via the Replicate website. ✨ Gemini AI API: aistudio.google.com/app/apikey ✨ Replicate: replicate.com/ 📚 References: - GitHub Repository (give it a star ⭐): github.com/code-spirit-369/dream-tales-ai - README: github.com/code-spirit-369/dream-tales-ai/blob/main/READM...
Build an AI Story Generating App Using Next.js and Gemini AI - Part 2 (2024)
มุมมอง 914 หลายเดือนก่อน
A Web App that generates stories for children using Gemini AI, with accompanying images created through the Stable Diffusion model via the Replicate website. ✨ Gemini AI API: aistudio.google.com/app/apikey ✨ Replicate: replicate.com/ 📚 References: - GitHub Repository (give it a star ⭐): github.com/code-spirit-369/dream-tales-ai - README: github.com/code-spirit-369/dream-tales-ai/blob/main/READM...
Build an AI Story Generating App Using Next.js and Gemini AI - Part 1 (2024)
มุมมอง 1484 หลายเดือนก่อน
A Web App that generates stories for children using Gemini AI, with accompanying images created through the Stable Diffusion model via the Replicate website. ✨ Gemini AI API: aistudio.google.com/app/apikey ✨ Replicate: replicate.com/ 📚 References: - GitHub Repository (give it a star ⭐): github.com/code-spirit-369/dream-tales-ai - README: github.com/code-spirit-369/dream-tales-ai/blob/main/READM...
Build a Game Listing App Using Next.js and RAWG API - Part 2 (2024)
มุมมอง 1374 หลายเดือนก่อน
A Game Database Web App that lets you explore games by genre, with a responsive design and dark/light theme mode toggler. 🎮 RAWG: rawg.io/ 📚 References: - GitHub Repository (give it a star ⭐): github.com/code-spirit-369/the-game-db - README: github.com/code-spirit-369/the-game-db/blob/main/README.md 💼 Business Inquiries: codespirit369@gmail.com Time Stamps 👇 - 00:00:00 - Build Mobile Side Menu ...
Build a Game Listing App Using Next.js and RAWG API - Part 1 (2024)
มุมมอง 2664 หลายเดือนก่อน
A Game Database Web App that lets you explore games by genre, with a responsive design and dark/light theme mode toggler. 🎮 RAWG: rawg.io/ 📚 References: - GitHub Repository (give it a star ⭐): github.com/code-spirit-369/the-game-db - README: github.com/code-spirit-369/the-game-db/blob/main/README.md 💼 Business Inquiries: codespirit369@gmail.com Time Stamps 👇 - 00:00:00 - Preview - 00:01:20 - Pr...
Build a Personal Portfolio Website Using Next.js (2024)
มุมมอง 8034 หลายเดือนก่อน
Build a Personal Portfolio Website Using Next.js (2024)
Build a Movie Database App with TMDB API (2024) - Part 3
มุมมอง 1485 หลายเดือนก่อน
Build a Movie Database App with TMDB API (2024) - Part 3
Build a Movie Database App with TMDB API (2024) - Part 2
มุมมอง 1305 หลายเดือนก่อน
Build a Movie Database App with TMDB API (2024) - Part 2
Build a Movie Database App with TMDB API (2024) - Part 1
มุมมอง 3975 หลายเดือนก่อน
Build a Movie Database App with TMDB API (2024) - Part 1
Build a Weather App with Next.js, TypeScript and shadcn Charts (2024) - Part 4
มุมมอง 1715 หลายเดือนก่อน
Build a Weather App with Next.js, TypeScript and shadcn Charts (2024) - Part 4
Build a Weather App with Next.js, TypeScript and shadcn Charts (2024) - Part 3
มุมมอง 1375 หลายเดือนก่อน
Build a Weather App with Next.js, TypeScript and shadcn Charts (2024) - Part 3
Build a Weather App with Next.js, TypeScript and shadcn Charts (2024) - Part 2
มุมมอง 1075 หลายเดือนก่อน
Build a Weather App with Next.js, TypeScript and shadcn Charts (2024) - Part 2
Build a Weather App with Next.js, TypeScript and shadcn Charts (2024) - Part 1
มุมมอง 8005 หลายเดือนก่อน
Build a Weather App with Next.js, TypeScript and shadcn Charts (2024) - Part 1
Build an AI Image Generator with Next.js, TypeScript, and OpenJourney (2024) - Part 4
มุมมอง 965 หลายเดือนก่อน
Build an AI Image Generator with Next.js, TypeScript, and OpenJourney (2024) - Part 4
Build an AI Image Generator with Next.js, TypeScript, and OpenJourney (2024) - Part 3
มุมมอง 975 หลายเดือนก่อน
Build an AI Image Generator with Next.js, TypeScript, and OpenJourney (2024) - Part 3
Build an AI Image Generator with Next.js, TypeScript, and OpenJourney (2024) - Part 2
มุมมอง 1585 หลายเดือนก่อน
Build an AI Image Generator with Next.js, TypeScript, and OpenJourney (2024) - Part 2
Build an AI Image Generator with Next.js, TypeScript, and OpenJourney (2024) - Part 1
มุมมอง 4955 หลายเดือนก่อน
Build an AI Image Generator with Next.js, TypeScript, and OpenJourney (2024) - Part 1
Build a Chatbot with Next.js, React, TypeScript, and Gemini AI (2024) - Part 3
มุมมอง 2845 หลายเดือนก่อน
Build a Chatbot with Next.js, React, TypeScript, and Gemini AI (2024) - Part 3
Build a Chatbot with Next.js, React, TypeScript, and Gemini AI (2024) - Part 2
มุมมอง 3635 หลายเดือนก่อน
Build a Chatbot with Next.js, React, TypeScript, and Gemini AI (2024) - Part 2
Build a Chatbot with Next.js, React, TypeScript, and Gemini AI (2024) - Part 1
มุมมอง 9335 หลายเดือนก่อน
Build a Chatbot with Next.js, React, TypeScript, and Gemini AI (2024) - Part 1