Build and Deploy an online shop with Nextjs, CMS and Stripe

Focused View

Alaribe Bright

9:01:16

61 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. Gradually building course project

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 game category card classNames.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

Description

Next.js 13. Next JS / Sanityio & Stripe: Build, Authenticate, and Handle CMS efficiently. Typescript and Redux included

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.

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.

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, and more.

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, and logout functionalities. Utilize Redux Toolkit for efficient global state management, ensuring scalable and maintainable code.

Integrate MongoDB, a powerful 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 easily manage website content.

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 knowledge 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.

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.