05 May 2024

12h 0m

Build a Complete E-Commerce Shop with Next.js 14, Tailwind, React | Full Course 2024

Josh tried coding

This podcast episode explores the process of building a complete Next.js shop from scratch. It covers various topics including building a front-end UI, implementing an admin dashboard, and diving into the concepts behind writing great software. The speaker emphasizes hands-on learning and highlights the importance of good design and secure payment systems. The episode also discusses the implementation of features such as a draggable image component, authentication, reviews section, and integrating third-party services like Stripe. Overall, the podcast provides a comprehensive guide to building a visually appealing and fully functional e-commerce application.

Outlines

Continue

Preview

How to Get Rich: Every EpisodeNaval

Build a Complete E-Commerce Shop with Next.js 14, Tailwind, React | Full Course 2024

Josh tried coding

00:00Building an Entire Next.js Shop: From Front-end UI to Admin Dashboard

Building an Entire Next.js Shop: From Front-end UI to Admin Dashboard

10:14Creating a Reusable Wrapper Component for Consistent Styling

Creating a Reusable Wrapper Component for Consistent Styling

22:01Creating a checklist section and adding star icons for a more appealing homepage

Creating a checklist section and adding star icons for a more appealing homepage

34:44Creating and Implementing the "Phone" Component with Custom Props

Creating and Implementing the "Phone" Component with Custom Props

47:01Setting up Authentication and UI Library

Setting up Authentication and UI Library

58:02Setting up Authentication and Creating an Admin User in Next.js

Setting up Authentication and Creating an Admin User in Next.js

1:05:57Creating an impressive landing page with social proof

Creating an impressive landing page with social proof

1:20:23Building the Reviews Section in React: A Top-Down Approach

Building the Reviews Section in React: A Top-Down Approach

1:32:42How to Create a Review Column Component for Rendering Phone Elements

How to Create a Review Column Component for Rendering Phone Elements

1:41:56Configuring Animation Delays for Reviews

Configuring Animation Delays for Reviews

1:52:35Achieving a Cool Effect with MSPerPixel

Achieving a Cool Effect with MSPerPixel

2:03:40Building an Effective Landing Page and Footer for Your Application

Building an Effective Landing Page and Footer for Your Application

2:16:07Creating a Functional Web App with React Dropzone

Creating a Functional Web App with React Dropzone

2:27:17Building the Upload Form with Drop Zone

Building the Upload Form with Drop Zone

2:37:49Implementing Upload Functionality with UploadThing

Implementing Upload Functionality with UploadThing

2:49:35Setting up UploadThing for Easy File Uploads

Setting up UploadThing for Easy File Uploads

3:00:39Uploading Image and Handling File Rejections

Uploading Image and Handling File Rejections

3:13:07Step Two: Involving the Database and Server-side Logic

Step Two: Involving the Database and Server-side Logic

3:26:33Creating a Database and Initializing Prisma

Creating a Database and Initializing Prisma

3:38:49Storage and Retrieval of Images in a Database

Storage and Retrieval of Images in a Database

3:50:27Troubleshooting Server Issues and Updating Dependencies

Troubleshooting Server Issues and Updating Dependencies

4:03:13Making the Image Draggable Over the Phone Case with react-rnd

Making the Image Draggable Over the Phone Case with react-rnd

4:16:29Creating Resizable Objects with Flex-Col and Scroll Area

Creating Resizable Objects with Flex-Col and Scroll Area

4:41:41Structuring Apps for Maintainability and User Customization

Structuring Apps for Maintainability and User Customization

4:54:46Adding Options Easily to User Selections

Adding Options Easily to User Selections

5:06:48Implementing Radio Group Options and Pricing

Implementing Radio Group Options and Pricing

5:20:03Creating a Responsive Design Configurator

Creating a Responsive Design Configurator

5:30:12React R&D and Handling Resizing and Dragging in a Component

React R&D and Handling Resizing and Dragging in a Component

5:40:06Positioning and Cropping User Images on the Canvas

Positioning and Cropping User Images on the Canvas

5:50:40Converting Base64 String to PNG File: A Step-by-Step Guide

Converting Base64 String to PNG File: A Step-by-Step Guide

6:00:03Uploading and Updating User Configurations in the Database

Uploading and Updating User Configurations in the Database

6:11:38Using React Query for Data Fetching and Modification

Using React Query for Data Fetching and Modification

6:20:14The Use of RPC in Next.js and Saving Configurations on the Server

The Use of RPC in Next.js and Saving Configurations on the Server

6:33:27Configuring Phone Case and Previewing the Design

Configuring Phone Case and Previewing the Design

6:47:17Using Confetti and Displaying Phone Configuration

Using Confetti and Displaying Phone Configuration

6:59:10Creating Divs and Listing Highlights and Product Details

Creating Divs and Listing Highlights and Product Details

7:10:25Improving App Design with Font and Background Changes

Improving App Design with Font and Background Changes

7:22:36Creating a Beautiful Loading Animation for a Button

Creating a Beautiful Loading Animation for a Button

7:36:08Modeling an Order System and Creating a Payment Session

Modeling an Order System and Creating a Payment Session