Abraham E. Tavarez
Abraham E. Tavarez
  • 62
  • 16 128
Social App with Next.js, and OpenAI Moderation API - [Final Part 11 Update Post]
Welcome to our latest tutorial where we take on the exciting challenge of creating a mini social media web application! 🌐 In this video, we'll guide you through the process of building a dynamic and interactive social platform using cutting-edge technologies: Next.js, TypeScript, Tailwind CSS, Supabase, and the OpenAI Moderation API.
🎉 Connect with me:
🔗 LinkedIn: www.linkedin.com/in/abrahametavarez/
📷 Instagram: abetavarez
🐥Twitter/X: abeTavarez
☕Buy me coffee: buymeacoffee.com/abrahamtavarez
📚 Resources:
Github Repo: github.com/AbeTavarez/social-app-with-moderation
NextJS Redirect: nextjs.org/docs/app/api-reference/functions/redirect#client-component
Dynamic Routes: nextjs.org/docs/app/building-your-application/routing/dynamic-routes
Supabase docs: supabase.com/docs/guides/getting-started/quickstarts/nextjs
Supabase NextJS: supabase.com/docs/guides/auth/server-side/nextjs
Join us as we cover every step of the development journey, from setting up the project to implementing key features that make our social media app unique and secure.
Key Features:
- Utilizing Next.js for fast and efficient server-side rendering and seamless user experiences.
- Writing clean and maintainable code with TypeScript for enhanced development productivity.
- Designing a beautiful and responsive user interface with Tailwind CSS.
- Leveraging Supabase for a robust and scalable database solution.
- Implementing OpenAI Moderation API to ensure safe and appropriate content on our platform.
This video is perfect for developers of all levels who are looking to expand their skill set and create a functional social media application. Whether you're a beginner eager to learn or an experienced developer seeking new insights, this tutorial has something for everyone.
Subscribe to our channel for more in-depth tutorials, tech insights, and innovative project ideas. Let's build something amazing together! 💻🚀🌟
#NextJS #TypeScript #TailwindCSS #Supabase #OpenAI #SocialMediaApp #WebDevelopment #Programming #TechTutorial #Innovation #Developer #SoftwareDevelopment #Coding
Don't forget to like, comment, and subscribe for more awesome content! 💬👍🔔
มุมมอง: 3

วีดีโอ

Social App with Next.js, and OpenAI Moderation API - [Part 10 Delete Post Supabase]
มุมมอง 174 ชั่วโมงที่ผ่านมา
Welcome to our latest tutorial where we take on the exciting challenge of creating a mini social media web application! 🌐 In this video, we'll guide you through the process of building a dynamic and interactive social platform using cutting-edge technologies: Next.js, TypeScript, Tailwind CSS, Supabase, and the OpenAI Moderation API. 🎉 Connect with me: 🔗 LinkedIn: www.linkedin.com/in/abrahameta...
Social App with Next.js, and OpenAI Moderation API - [Part 9 Dynamic Post Page]
มุมมอง 214 ชั่วโมงที่ผ่านมา
Welcome to our latest tutorial where we take on the exciting challenge of creating a mini social media web application! 🌐 In this video, we'll guide you through the process of building a dynamic and interactive social platform using cutting-edge technologies: Next.js, TypeScript, Tailwind CSS, Supabase, and the OpenAI Moderation API. 🎉 Connect with me: 🔗 LinkedIn: www.linkedin.com/in/abrahameta...
Social App with Next.js, and OpenAI Moderation API - [Part 8 OPENAI Moderation API]
มุมมอง 544 ชั่วโมงที่ผ่านมา
Welcome to our latest tutorial where we take on the exciting challenge of creating a mini social media web application! 🌐 In this video, we'll guide you through the process of building a dynamic and interactive social platform using cutting-edge technologies: Next.js, TypeScript, Tailwind CSS, Supabase, and the OpenAI Moderation API. 🎉 Connect with me: 🔗 LinkedIn: www.linkedin.com/in/abrahameta...
Social App with Next.js, and OpenAI Moderation API - [Part 7 Supabase Create New Post]
มุมมอง 457 ชั่วโมงที่ผ่านมา
Welcome to our latest tutorial where we take on the exciting challenge of creating a mini social media web application! 🌐 In this video, we'll guide you through the process of building a dynamic and interactive social platform using cutting-edge technologies: Next.js, TypeScript, Tailwind CSS, Supabase, and the OpenAI Moderation API. 🎉 Connect with me: 🔗 LinkedIn: www.linkedin.com/in/abrahameta...
Social App with Next.js, and OpenAI Moderation API - [Part 6 Adding Supabase Database]
มุมมอง 217 ชั่วโมงที่ผ่านมา
Welcome to our latest tutorial where we take on the exciting challenge of creating a mini social media web application! 🌐 In this video, we'll guide you through the process of building a dynamic and interactive social platform using cutting-edge technologies: Next.js, TypeScript, Tailwind CSS, Supabase, and the OpenAI Moderation API. 🎉 Connect with me: 🔗 LinkedIn: www.linkedin.com/in/abrahameta...
Social Media App with Next.js, and OpenAI Moderation API - [Part 5 not-found Page]
มุมมอง 539 ชั่วโมงที่ผ่านมา
Welcome to our latest tutorial where we take on the exciting challenge of creating a mini social media web application! 🌐 In this video, we'll guide you through the process of building a dynamic and interactive social platform using cutting-edge technologies: Next.js, TypeScript, Tailwind CSS, Supabase, and the OpenAI Moderation API. 🎉 Connect with me: 🔗 LinkedIn: www.linkedin.com/in/abrahameta...
Social Media App with Next.js, and OpenAI Moderation API - [Part 4 Metadata and Nested Layouts]
มุมมอง 769 ชั่วโมงที่ผ่านมา
Welcome to our latest tutorial where we take on the exciting challenge of creating a mini social media web application! 🌐 In this video, we'll guide you through the process of building a dynamic and interactive social platform using cutting-edge technologies: Next.js, TypeScript, Tailwind CSS, Supabase, and the OpenAI Moderation API. 🎉 Connect with me: 🔗 LinkedIn: www.linkedin.com/in/abrahameta...
Social Media App with Next.js, and OpenAI Moderation API - [Part 3 TailwindCSS Styling]
มุมมอง 259 ชั่วโมงที่ผ่านมา
Welcome to our latest tutorial where we take on the exciting challenge of creating a mini social media web application! 🌐 In this video, we'll guide you through the process of building a dynamic and interactive social platform using cutting-edge technologies: Next.js, TypeScript, Tailwind CSS, Supabase, and the OpenAI Moderation API. 🎉 Connect with me: 🔗 LinkedIn: www.linkedin.com/in/abrahameta...
Social Media App with Next.js, and OpenAI Moderation API - [Part 2 Navigation]
มุมมอง 729 ชั่วโมงที่ผ่านมา
Welcome to our latest tutorial where we take on the exciting challenge of creating a mini social media web application! 🌐 In this video, we'll guide you through the process of building a dynamic and interactive social platform using cutting-edge technologies: Next.js, TypeScript, Tailwind CSS, Supabase, and the OpenAI Moderation API. 🎉 Connect with me: 🔗 LinkedIn: www.linkedin.com/in/abrahameta...
Social Media App with Next.js, TypeScript, Tailwind, Supabase, and OpenAI Moderation API - [Part 1]
มุมมอง 1329 ชั่วโมงที่ผ่านมา
Welcome to our latest tutorial where we take on the exciting challenge of creating a mini social media web application! 🌐 In this video, we'll guide you through the process of building a dynamic and interactive social platform using cutting-edge technologies: Next.js, TypeScript, Tailwind CSS, Supabase, and the OpenAI Moderation API. 🎉 Connect with me: 🔗 LinkedIn: www.linkedin.com/in/abrahameta...
Blog Post Generator App (Part 4) - Client Component & UI
มุมมอง 42หลายเดือนก่อน
Welcome to our latest video where we unveil a groundbreaking software application that revolutionizes content creation! 🚀 In this tutorial, we dive into the process of creating an innovative tool that harnesses the power of the OpenAI API to automatically generate captivating blog posts. With Next.js, TypeScript, Tailwind CSS, MongoDB, and Auth0, we've crafted a robust and efficient system that...
Blog Post Generator App (Part 3) - MongoDB integration
มุมมอง 912 หลายเดือนก่อน
Welcome to our latest video where we unveil a groundbreaking software application that revolutionizes content creation! 🚀 In this tutorial, we dive into the process of creating an innovative tool that harnesses the power of the OpenAI API to automatically generate captivating blog posts. With Next.js, TypeScript, Tailwind CSS, MongoDB, and Auth0, we've crafted a robust and efficient system that...
Blog Post Generator App (Part 2) - OpenAI Setup and Prompting
มุมมอง 782 หลายเดือนก่อน
Welcome to our latest video where we unveil a groundbreaking software application that revolutionizes content creation! 🚀 In this tutorial, we dive into the process of creating an innovative tool that harnesses the power of the OpenAI API to automatically generate captivating blog posts. With Next.js, TypeScript, Tailwind CSS, MongoDB, and Auth0, we've crafted a robust and efficient system that...
Blog Post Generator App with OpenAI and Next.js 14 (2024)
มุมมอง 2452 หลายเดือนก่อน
Welcome to our latest video where we unveil a groundbreaking software application that revolutionizes content creation! 🚀 In this tutorial, we dive into the process of creating an innovative tool that harnesses the power of the OpenAI API to automatically generate captivating blog posts. With Next.js, TypeScript, Tailwind CSS, MongoDB, and Auth0, we've crafted a robust and efficient system that...
Generative AI (Prompt Engineering) - Everything you should know (2024)
มุมมอง 312 หลายเดือนก่อน
Generative AI (Prompt Engineering) - Everything you should know (2024)
Next.js 14 App Deployment (Vercel) 2024
มุมมอง 1062 หลายเดือนก่อน
Next.js 14 App Deployment (Vercel) 2024
Next.js 14 Authentication with Auth0 2024
มุมมอง 5763 หลายเดือนก่อน
Next.js 14 Authentication with Auth0 2024
Next.js 14 Server Actions Module (Code Encapsulation) 2024
มุมมอง 403 หลายเดือนก่อน
Next.js 14 Server Actions Module (Code Encapsulation) 2024
Next.js 14 MongoDB CRUD 2024 (Part 4: EDIT) Final
มุมมอง 1053 หลายเดือนก่อน
Next.js 14 MongoDB CRUD 2024 (Part 4: EDIT) Final
Next.js 14 MongoDB CRUD 2024 (Part 3: DELETE)
มุมมอง 853 หลายเดือนก่อน
Next.js 14 MongoDB CRUD 2024 (Part 3: DELETE)
Next.js 14 MongoDB CRUD 2024 (Part 2: READ Single Documents)
มุมมอง 2253 หลายเดือนก่อน
Next.js 14 MongoDB CRUD 2024 (Part 2: READ Single Documents)
Next.js 14 MongoDB CRUD 2024 (Part 1: CREATE and READ)
มุมมอง 1.1K3 หลายเดือนก่อน
Next.js 14 MongoDB CRUD 2024 (Part 1: CREATE and READ)
Next.js 14 Create a Hero Component 2024
มุมมอง 3473 หลายเดือนก่อน
Next.js 14 Create a Hero Component 2024
Next.js 14 Loading and Not-Found (Special Files) 2024
มุมมอง 393 หลายเดือนก่อน
Next.js 14 Loading and Not-Found (Special Files) 2024
Next.js 14 Styling with Tailwind CSS 2024
มุมมอง 1334 หลายเดือนก่อน
Next.js 14 Styling with Tailwind CSS 2024
Next.js 14 Route Params (App Router) 2024
มุมมอง 2824 หลายเดือนก่อน
Next.js 14 Route Params (App Router) 2024
Next.js App Router (Routing) 2024
มุมมอง 1264 หลายเดือนก่อน
Next.js App Router (Routing) 2024
Next.js Framework Crash Course for Beginners ( Creating a new App )
มุมมอง 1374 หลายเดือนก่อน
Next.js Framework Crash Course for Beginners ( Creating a new App )
Secure User Authentication in Express: Using Mongoose, MongoDB, Bcrypt, JWT, and Cookie Sessions!
มุมมอง 2454 หลายเดือนก่อน
Secure User Authentication in Express: Using Mongoose, MongoDB, Bcrypt, JWT, and Cookie Sessions!

ความคิดเห็น

  • @codewithnabin4560
    @codewithnabin4560 วันที่ผ่านมา

    Thank you for your tutorial. This is amazing. Hope to see more :D

  • @Hyperblaze456
    @Hyperblaze456 2 วันที่ผ่านมา

    Nice tutorial!, just what I needed. I wonder how long is the series, though.

    • @abetavarez
      @abetavarez 2 วันที่ผ่านมา

      Hey! the series is 11 parts/videos, just enough to cover the basic CRUD. I'm trying to make shorter videos to focus on a single task per video and leave room for changes and improvement. I hope these videos can help you!

  • @DevinBates
    @DevinBates 25 วันที่ผ่านมา

    Was a good tutorial. Where is part 2 tho?

  • @jamesmassa1999
    @jamesmassa1999 2 หลายเดือนก่อน

    you have to put ./ in front of src/index.js

  • @cosmin-daniellupu5138
    @cosmin-daniellupu5138 2 หลายเดือนก่อน

    Hi Abraham! What do I do if I have? For example, localhost:3000 as the welcome page and then I Want to user to get redirected to Say a dashboard page after login. How do I specify to which page the login calls back to after logging in? The thing is that yes, I can allow call back to dashboard page. But how can I enforce it?

  • @theintjengineer
    @theintjengineer 2 หลายเดือนก่อน

    Comments for the Algorithm. I hope you grow, Bro. Your content is good 👍

    • @abetavarez
      @abetavarez 2 หลายเดือนก่อน

      Thank you! I really appreciate it 🙏🏻

  • @theintjengineer
    @theintjengineer 2 หลายเดือนก่อน

    Could you please tell us what you are thinking of using for your DB? Are you going to use an ORM? What about Auth'n and Auth'z? Are you gonna do it with OAuth2, Authjs, Lucia Auth, etc...? Thank you very much for creating such nice videos and providingthem for free. We appreciate it.

    • @abetavarez
      @abetavarez 2 หลายเดือนก่อน

      Hey, sorry about that 😅 I'm pretty new at making videos. I'm planning to used MongoDB and Auth0. I using the same stack I used for my NextJS crash course which will make it easier to follow along from there.

    • @theintjengineer
      @theintjengineer 2 หลายเดือนก่อน

      @abetavarez oh, MongoDB and Auth0 alright. Thanks for the info. And to be honest, I, too, wanted to get into creating videos at some point. But bro, I really need to get some "video-and-design-stuff" skills, haha. You leap-jumped into it, so hats off, haha. Keep them coming. Cheers.

    • @abetavarez
      @abetavarez 2 หลายเดือนก่อน

      If you have the time do it, making videos it's great! I mostly use Canva for designs and OBS for recording nothing to difficult. I don't even have a lot of free time to record so I use those to save time. what you want to make videos about?

  • @theintjengineer
    @theintjengineer 2 หลายเดือนก่อน

    Hey Abraham, I like how you take your time to explain even some little things others just skip mentioning. It helps us [not coming from Web Dev] a lot. I'm actually a C++ Dev, so, very far from your field😂.

    • @abetavarez
      @abetavarez 2 หลายเดือนก่อน

      Thanks, I'm trying to keep the videos short and just explain the must confusing parts.

  • @JaWilson-tm2lt
    @JaWilson-tm2lt 2 หลายเดือนก่อน

    Hi, Abraham Thanks for your video Everything seems to be running smoothly with my application, but whenever I attempt to log in, my browser displays an error message. Additionally, when I try to access the 'manage users' section, I notice that my user has never logged in. The error message I encounter in the browser reads: 'localhost is currently unable to handle this request. HTTP ERROR 500' and code: 'ERR_LOGIN_HANDLER_FAILURE' in console Could you tell me what's wrong?

    • @abetavarez
      @abetavarez 2 หลายเดือนก่อน

      Sounds like your server is crashing during the login request. If you want drop your Github repo so I can take a look at it.

  • @brookkervin2875
    @brookkervin2875 3 หลายเดือนก่อน

    😋 Promo-SM

  • @rajasekhar672
    @rajasekhar672 3 หลายเดือนก่อน

    Hey, i want to access the search params at the time of rendering a page instead client side in next.js static site generation (S3 host). Is there any possible ways, could you explain?

    • @abetavarez
      @abetavarez 3 หลายเดือนก่อน

      Check this out and let me know of it helps: nextjs.org/docs/app/api-reference/functions/use-search-params

  • @nadetdevfullstack7041
    @nadetdevfullstack7041 4 หลายเดือนก่อน

    Excellent

    • @abetavarez
      @abetavarez 2 หลายเดือนก่อน

      Thank you so much 😀

  • @hector2824
    @hector2824 8 หลายเดือนก่อน

    *Promo sm* 😝

  • @paulsingh9298
    @paulsingh9298 10 หลายเดือนก่อน

    hey i had a question. Im having trouble having my folders in my project folder in order. like I have 6 folders in my main project folder, i cant get the in order lik 1 to 6. Everytime i tried to make a new folder to go under the old folder it jumps up or in the middle. Can you please help me

  • @quamepounds3767
    @quamepounds3767 ปีที่แล้ว

    I just suscribed

    • @abetavarez
      @abetavarez ปีที่แล้ว

      I’m working on more content, it should be ready pretty soon!

  • @quamepounds3767
    @quamepounds3767 ปีที่แล้ว

    Great teacher

  • @pradeepKumar-rf9qb
    @pradeepKumar-rf9qb ปีที่แล้ว

    just amazing...

  • @mykhaylolytvynov5369
    @mykhaylolytvynov5369 ปีที่แล้ว

    Dude, good work! You need to work with sound.

    • @abetavarez
      @abetavarez ปีที่แล้ว

      Thanks for the feedback. I'll work on that before making the rest of the videos.

  • @alnadzmermabboljamil2430
    @alnadzmermabboljamil2430 ปีที่แล้ว

    Really is this totally considered SSR?

  • @rodolfobertolino4880
    @rodolfobertolino4880 ปีที่แล้ว

    I prefer the SSR, thanks!

    • @abetavarez
      @abetavarez ปีที่แล้ว

      Thanks for the feedback!

  • @DNayte-pp1hy
    @DNayte-pp1hy ปีที่แล้ว

    you really have to work on your sound

    • @abetavarez
      @abetavarez ปีที่แล้ว

      Thanks for the feedback! I'll work on that.

  • @mahdisalmanizadegan5595
    @mahdisalmanizadegan5595 2 ปีที่แล้ว

    great!

    • @abetavarez
      @abetavarez ปีที่แล้ว

      Thanks, I'm trying to make better videos.