Next.js 13 - OpenAI (Online Shop CMS - Project Manager App)

Focused View

Alaribe Bright

15:57:17

19 View

1. Getting started - Next.js Basics

1. Project Demo (Nextjs Sanity Stripe).mp4

07:10

2.1 dont-skip.txt

2. What is next.js Creating a new next.js app.mp4

07:07

3.1 how-to-stay-updated.txt

3. Understanding folder structure.mp4

04:27

4. Layout component Next Font.mp4

10:02

5. Next.js Metadata.mp4

02:33

6. Tailwind color theme config.mp4

02:14

7. Understanding Routing in NextJs Pages.mp4

08:35

2. ECOMMERCE SHOP SANITY.IO CMS STRIPE

1.1 header classNames.txt

1. Header Component.mp4

12:38

2.1 footer classNames.txt

2. Footer Component.mp4

03:24

3.1 hero classNames.txt

3. Hero Section.mp4

10:11

4.1 dummy games.txt

4.2 game card classNames.txt

4.3 section classNames.txt

4. Trending Games Section.mp4

09:51

5.1 featured classNames.txt

5.2 featuredGame.txt

5.3 trending.zip

5. Featured Game Section.mp4

05:50

6.1 categories.txt

6.2 gameCategoryClassNames.txt

6.3 styles.txt

6. Category Section.mp4

10:24

7. Recent Games.mp4

05:07

8.1 newsletterSectionClasses.txt

8. News Letter Section.mp4

03:50

9. Routes Grouping.mp4

08:10

3. Sanity CMS. Getting started

1. What is Sanity.io.mp4

03:49

2. Creating a sanity project.mp4

07:23

3. Sanity CORS.mp4

01:01

4. moving sanity project keys to .env.mp4

03:22

5. Category Schema.mp4

08:38

6. Game Schema.mp4

11:25

4. Sanity Next.js. Data Fetching

1. connecting sanity with next.js. Fetch Categories.mp4

11:33

2. Fetching Games.mp4

10:50

3.1 classNames.txt

3. Category Page.mp4

06:35

4. Fetching Category Games.mp4

08:07

5. Fetching Category Subtitle.mp4

03:00

6.1 games page classNames.txt

6. Games Page.mp4

05:36

7.1 carousel classNames.txt

7. Creating Carosel Slider. First Client Component.mp4

14:18

8. Fetch Game.mp4

05:00

9.1 game details classNames.txt

9. Game Details Page.mp4

11:42

10. Server component in client component.mp4

03:05

11. Composing our page with server and client components.mp4

11:42

5. Redux Toolkit

1. Redux toolkit Setup.mp4

08:28

2. Redux custom hook.mp4

02:49

3. Cart Slice (Actions Reducer).mp4

14:43

4.1 cart classNames.txt

4. Cart Component.mp4

09:30

5. Cart Component Cont..mp4

09:15

6. Optimization Cart functionality.mp4

08:07

7. More Cart Functionality.mp4

08:21

8. Custom Hook Logic.mp4

07:39

6. Authentication

1. Auth.JS Overview.mp4

05:04

2. Signup Component.mp4

10:06

3. API Backend.mp4

03:30

4. Signup Logic API.mp4

09:03

5. MongoDB.mp4

06:34

6. Signup Functionality.mp4

11:27

7. User Friendly Error message.mp4

03:42

8. Auth.Js MongoDB..mp4

12:21

9. Auth.js Providers (Google Credentials).mp4

12:47

10. Google Credentials..mp4

05:42

11. Signin Test.mp4

08:55

12. Testing Google Auth.mp4

01:12

7. Stripe Integration

1. Creating a stripe account.mp4

03:11

2. Load stripe in Next.js.mp4

08:14

3. Checkout API endpoint.mp4

04:20

4. Check Cart Item Quantity.mp4

09:41

5. Verify Cart Quantity and Price on the server.mp4

11:24

6. Stripe Checkout.mp4

12:15

7. Update game quantity in sanity after successful payment.mp4

08:40

8. Sanity Mutation.mp4

09:05

8. Order Feature

1. Order Schema.mp4

09:08

2. Create Order Mutation.mp4

05:13

3. Correct Create Order Mutation.mp4

04:34

4. Test Create Order.mp4

06:25

5. Errors. Debugging.mp4

03:12

6. Stripe doesnt return customer details. Refactoring.mp4

08:40

7. Fetch Order API.mp4

05:06

8. Order Page.mp4

04:05

9. Displaying Orders In Table.mp4

12:29

10. Protecting Orders Page.mp4

06:53

9. Deployment

1. Deploy to vercel.mp4

08:30

2. Test Deployed app add keys to sanity.mp4

02:17

10. AI POWERED PROJECT MANAGER APPLICATION

1.1 Github Repository.html

1. New project set-up.mp4

03:34

2. Side Navigation Component.mp4

07:48

3. Header Component.mp4

10:36

11. Getting Started With Prisma

1. Prisma Schema Relationship MongoDB.mp4

18:19

2. MongoDB migration Prisma Client.mp4

08:30

12. Authentication Route Protection

1. Next Auth Github Authentication.mp4

08:25

2. Authentication Continued.mp4

15:32

3. Sign out.mp4

05:21

4. Middleware Route Protection.mp4

03:09

5. Configuring Session Object.mp4

04:21

13. Project Management Feature Home Page

1. GET Project API Endpoint Home Page.mp4

08:15

2. Project Table UI.mp4

10:44

3. Create Project API Route.mp4

06:04

4. Modal UI Component.mp4

06:03

5. Create Project Form Input Component.mp4

20:40

6. Create Project Functionality.mp4

17:27

7. Code Optimzation Typo Fix.mp4

02:59

8. Edit Project.mp4

15:38

14. Project Management Feature Project Item Page

1. Project Item Page Understanding Params.mp4

11:01

2. Fetching Project Board.mp4

05:08

3. Create Project Board API Route.mp4

10:26

4. Create Project Board Form.mp4

13:56

5. Create Project Board Frontend.mp4

11:50

6. Project Board Component.mp4

15:41

7. Feature Creation Form Component.mp4

09:54

8. Create Feature API Route.mp4

07:04

9. Feature Creation Frontend.mp4

15:57

10. Feature Card Component.mp4

12:57

15. Drag and Drop Feature

1. Drag and Drop Project Board Frontend.mp4

09:44

2. Drag and Drop Project Board Frontend Continued.mp4

04:32

3. Update Project Board API Route.mp4

11:07

4. Drag and Drop Feature Card Frontend.mp4

07:31

5. Drag and Drop Feature Card Frontend Continued.mp4

07:09

6. Feature Update API Route.mp4

14:05

7. Update Feature Frontend.mp4

07:11

8. Prisma Unique BUG Fix.mp4

06:55

16. AI Chat Integration

1. Getting API Key.mp4

01:53

2. AI Chat API Route.mp4

13:08

3. Chat Page.mp4

08:53

4. Chat Message Component.mp4

08:07

5. Chat Functionality Frontend.mp4

09:41

17. Deployment

1. Deployment to vercel.mp4

18:46

Description

Next.js 13. Sanityio & Stripe: Build and Handle CMS efficiently. Open AI - ChatGPT - Prisma ORM. Typescript and Redux

What You'll Learn?

Master Nextjs: Learn the latest features for server-side rendering, routing, and data fetching.
Integrate Stripe payments: Add secure payment processing to Nextjs applications using Stripe.
Implement Redux for global state management in Nextjs: Learn Redux principles, set up the store, manage state, and enable data sharing across components.
Build dynamic sites with Sanity CMS: Create content-rich websites with real-time updates.
TypeScript Fundamentals: Master TypeScript in Nextjs. Learn static typing, interfaces, and enhance code quality in Nextjs projects
Implement Authjs: Secure user authentication for Nextjs applications.
Store user data in MongoDB: Manage authenticated user data securely in MongoDB.
Responsive designs with Tailwind CSS: Develop flexible and visually appealing layouts.
Integrate openAI in to nextJS project
Drag and Drop functionality
Prisma ORM integration with MongoDB

Who is this for?

Front-end developers looking to expand their knowledge of Nextjs and leverage its advanced features for server-side rendering, routing, and data fetching.

Full-stack developers who want to integrate payment processing with Stripe, implement user authentication with Authjs, and work with a CMS like Sanity to create dynamic and content-rich websites.

Web development enthusiasts and students eager to learn Nextjs and gain hands-on experience with popular technologies like Tailwind CSS and MongoDB.

Engineers looking to implement Open AI into their applications

What You Need to Know?

This course is designed to accommodate learners of all skill levels, including beginners. No prior knowledge of Nextjs, Stripe, Sanity CMS, Tailwind CSS, Authjs, or MongoDB is required.

Having a basic understanding of JavaScript, HTML, and CSS and React will be beneficial

More details

Description
Elevate your web development skills with our comprehensive Next.js course, where you'll delve into the latest advancements and industry-standard tools. Join us as we guide you through creating a full-stack game-selling website using Next.js 13, TypeScript, Redux Toolkit, NextAuth.js, MongoDB, Sanity io, Stripe, Tailwind CSS, Prisma, OpenÂ AI, and more.

Build and Deploy 2 Robost Applications (Fullstack Online Shop - AI-Powered Project Management Application).

Through this hands-on course, you'll gain mastery over Next.js 13 and its cutting-edge features, such as the app directory structure, dynamic routing, API routes, Metadata API, Next/fonts, server-side rendering, etc. Harness the power of TypeScript to add static typing and enhance code quality in Next.js applications.

Implement a secure and seamless authentication system using NextAuth.js, enabling user registration, password login, Google Login, GithubÂ Login, and logout functionalities. Utilize Redux Toolkit for efficient global state management, ensuring scalable and maintainable code.

Implement OpenAI chat GPT into your next.js application

Drag and Drop Project management application

Seamlessly integrate Prisma ORM with MongoDB Database

Integrate MongoDB, a robust NoSQL database, to securely store and retrieve authenticated user data.

Effortlessly manage content with Sanity io, a headless CMS that enables real-time updates and content customization. Configure Sanity Studio, create custom data models and empower content editors to manage website content easily.

Enable secure and convenient payment processing with Stripe integration. Implement smooth transactions, handle payment events, and ensure a seamless checkout experience, calculating price and updating content upon checkout on the server.

Craft visually stunning and responsive designs with Tailwind CSS, utilizing utility classes and responsive breakpoints to create professional-grade user interfaces.

This course provides a practical case study of building a game-selling website, but the knowledge gained can be applied to any kind of website development. Gain the skills and expertise to build robust, scalable, and feature-rich web applications using Next.js and a comprehensive stack of tools and technologies.

Enroll now and embark on a transformative learning journey!
Who this course is for:
Front-end developers looking to expand their knowledge of Nextjs and leverage its advanced features for server-side rendering, routing, and data fetching.
Full-stack developers who want to integrate payment processing with Stripe, implement user authentication with Authjs, and work with a CMS like Sanity to create dynamic and content-rich websites.
Web development enthusiasts and students eager to learn Nextjs and gain hands-on experience with popular technologies like Tailwind CSS and MongoDB.
Engineers looking to implement Open AI into their applications

User Reviews

Rating

average 0

Total votes0

Focused display

Alaribe Bright is an experienced full-stack developer and instructor, with expertise in both frontend and backend technologies. With over 6 years of experience in the industry, I have developed a passion for teaching and sharing knowledge with others.After completing a degree in statistics/computer science, I began my career as a software engineer, working for several top tech companies. Over time, I developed a keen interest in web development and honed my skills in both frontend and backend technologies, becoming a full-stack developer.Driven by a desire to help others learn and grow in the industry, I began teaching web development courses on platforms like Udemy and Youtube. My courses have received high ratings from students around the world, and I have become known for my engaging teaching style and ability to explain complex concepts in a clear and concise manner.When not coding or teaching, I enjoy playing play station or watching football and spending time with my family.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.