Build Full Stack Digital E-Commerce Next.js 14 App: React Js, Strapi, Tailwind Css, REST API, Email

Description:

------------------------------------
Strapi Admin Panel Login:
password:Tubeguruji123
------------------------------------

🚀 Ready to embark on a Full Stack journey? We'll cover:

⭐ Harnessing the capabilities of Strapi for efficient backend management.
⭐ Crafting sleek and responsive UI with Tailwind CSS.
⭐ Implementing the crucial functionality of resending emails in your application.

Whether you're a beginner or seasoned developer, this tutorial provides valuable insights and practical demonstrations to empower you in building your own feature-rich Digital E-Commerce platform.

Don't forget to like, share, and subscribe for more content on mastering Full Stack development with the latest technologies! Dive in and let's build something incredible together. 💻

____________Chapters_____________
00:00:00 Introduction
00:04:31 Project Setup
00:11:14 Header
00:22:30 Hero Section
00:27:08 Custom Font
00:28:43 Strapi Setup/Installtion
00:54:33 Get Products List
01:11:59 Display Products List
01:35:41 Product Detail page
02:09:00 Skelton Effect
02:20:03 Authentication
02:41:39 Add to Cart
03:15:11 Quick Fix
03:20:27 Cart Page
03:41:03 Payment Getway
04:06:15 Create/Save Order Details
04:15:06 Send Email(Email Integration)

✨Join this channel to get access to perks:

[vijayshankarcrypto]

Sir, Your channel is so underrated. You deserve subscribers in millions. Thank you for sharing this tutorial.

[cultman]

Pls make a video on integrating a to do list app using next js to postgressql

[usmanmarkaz]

Cool project sir thanks i am working on both React ja and React Native side by side your tutorials help me a lot ❤❤❤

[opurbo]

my bro just open folder without using terminal 🤐
a small tips:
use word-wrap in vs code

[cubedev]

U should teach us how to deploy this app

[smdgamerz]

Your Contents is really unbelievable i want source code of this but i can give any money can i get

[junayetislam]

Bro, it's just keeping my quality to 480p...pls render it to atleast 1080p..btw love'd ur work as seeing first time

[md.shahebali]

Wow Boss is back again with awesome project.

[krishnarajagopal]

*<CODE SHARE FOR ADDITIONAL USE CASE>*
@1:54:06 : *EXTRACT AND RENDER MULTIPLE LINES IN STRAPI "DESCRIPTION " FIELD WHILE PRESERVING ORIGINAL LINE BREAKS*
*ALSO ADDED A FUNCTION TO EXTRACT AND RENDER THE "WHATSINCLUDED' FIELD FROM STRAPI WITH ORIGINAL LINE BREAKS*

the resulting description field will be a complex JSON structure that will have the text inside multiple nested objects. Hence we need to use destructure and map function to extract the description field. while the \n in the "whats Included " field must be replaced with <br /> tags.

_app > project-detail > [projectid] > _components > JS Projectinfo.jsx >_

const ProjectInfo = ({product}) => {

const

const fullDescription = DescriptionArray.map((item, index) =>

(item.children[0].text)

)
console.log(fullDescription)

/**
* Replaces newline characters with <br /> in the whatsIncluded attribute of the product.
*
* @return {string} The modified string with newline characters replaced.
*/

function replaceWithBr() {
return product?.attributes?.whatsIncluded.replace(/\n/g, "<br />")
}

return (


<div>
<h2
<h2 className='text-[15px]
<h2 className='text-[15px] mt-5 text-gray-700 '>{fullDescription.map((item, index) => <p key={index} className='text-justify pr-5'>{item}</p>)}</h2>

<h2 className='text-[20px] mt-5'>Whats Included:</h2>
<h2 className='text-[15px] mt-5'><p replaceWithBr()}}/></h2>
<h2 className='text-[25px] mt-5 text-primary font-medium'>$

<button className='flex gap-2 bg-primary rounded-lg p-3 mt-5 text-white hover:bg-blue-600'>
<ShoppingCart />
Add to cart</button>
</div>

🙏

[chessknock]

Awesome project. Please keep it going 🎉

[userj-s]

Congrats on the project, another great result

[sinamed]

thanks for your best courses that taught me a lot, could you consider your next project a website like Glassdoor or Indeed?

[domvournias]

Why didn't you use server actions to call the data?

[rockbelleh]

THANKS ALOT FOR IS EXCELLENT PROJECT MUCH LOVE SIR

[felype_dev]

Muito bom!!! Topzeira, conteúdo incrível

[zoltanmolnar]

could you please tell me why miss deployment section. No deployment here no deployment for RN apps. The most important part always missing

[hetpatel]

Bro without backend or admin panel how to add the product in our website and how admin (website owner) know who bought the product

[abhysalian]

bro and also i cannot get description pls help 1:54:00

[Sebas-lkjv]

thanks for this tutorial. is this strip better than GrapQL ?

[Muhammadbilal-zwgz]

Please build beauty parlour location based system by using mern stack