Build, Test and Deploy a Full Stack Next JS E-Commerce from Scratch. (2024)
HTML-код
- Опубликовано: 12 сен 2024
- Build, Test and Deploy a Full Stack Next JS E-Commerce from Scratch. (2024)
Time Stamps 👇
00:00:00 - Intro
00:02:57 - Demo
00:13:22 - Create next app
00:20:09 - File Structure
00:34:21 - Setup Eslint
00:40:10 - Setup Jest
00:53:55 - Setup Cypress
01:08:34 - Create Pipeline CI CD
01:43:38 - Setup ShadCn and Some Libraries
02:56:32 - Setup Frontend UI Kit ( Colors - Fonts - Container )
02:13:01 - Create Header Component
DEMO
STORE : carrefour-theta.vercel.app
ADMIN: carrefour-theta.vercel.app/admin/dashboard
Repo: github.com/sylvaincodes/youtube_ecommerce
🔗 Links
-------------------------------
🤑 Donate www.paypal.me/sylvaincodes
💻 Github Repo www.github.com/sylvaincodes/yoom
🔴 Patrean www.patreon.com/sylvaincodes
🔔 Subscribe ruclips.net/user/channe....
++ Portfolio www.sylvaincodes.vercel.app
🔗 MUSIC
-------------------------------
- From Myself
⚠️ Disclaimer
The disclaimer video is intended for educational purposes only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, reporting current affairs, teaching, scholarship and research. Fair use is permitted by copyright law that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use.
#nextjs14
#sylvaincodes
#ecommerce
#reactfrontend
#fullstack
I was waiting for a full stack e-commerce project with nextjs you saved my life.😊
I obviously build this one quickly. Thanks for sharing with us so nice project🙏
This is the most complete project on the entire network, fantastic.
This really saved my life and regained my confidence. Looking forward to
your video is not complete
nice! can't wait to see the next videos!
Beau boulot!
Merci ! The next one is gonna be INSANE! 😱
👋Hey guys,
📚 Get files & Links
🔴FRONTEND WEBSITE
👉Source code github.com/sylvaincodes/youtube_ecommerce
👉Demo carrefour-theta.vercel.app
🟢BACKEND API/ADMIN DASHBOARD
👉Source code: www.patreon.com/posts/become-full-next-109836821
👉Dashboard link : carrefour-api-test.vercel.app
✍Login: admin@gmail.com
✍Password: Admin2024&
Enjoy.
Sir i cannot get into your discord server can you fix the link in the git repo
@@AyushSingh-tj3hq Hi, here is the new link:
🌎discord.gg/aGer8EX9
Hey Sir, you dropped this: 👑
Yess thank you a lot sir. I am working as a Junior FE and my work use storybook nextjs ts jest for unit testing and cypress for e2e testing etc. This project you use jest and cypress .I will follow your tutorial sir
This is adorable, thank you and weldone❤
Nice one.
include github action, ci/cd.. very real project. thks
You're welcome! Stay tuned for the next one. Peace❤
you just gained a follower. Nice Job
Wow great teaching ❤
just subbed keep it up we need more with testing also with firebase and jest
What happend with video ? Why we have only header build section and setup project ?
great video dude!
looking forward to this free course
Hi, nice video!
Just question, in patreon already full tutorial? Or you haven't upload it yet?
Nice one dude❤
sound keeps annoying, instead of sound it would have been better if you have explained all by talking
and if possible please use backend node api standalone and integrate into it
Of course! I’ll make sure to narrate my code like a suspenseful thriller-stay tuned for the plot twists!
i have been searching for the .env file where we can add mongodb links and i didnt found it and
i added the .env file respecting every think but it doesn't work
Could you please upload full video if possible sir, we all are eagerly waiting for that.
Hey , nice work. Before jumping into the code i want to know is the completely build in 2 hours? Both backend frontend ( with admin panel too?). i am unable to acess admin dashboard it is redirecting me to main page.
Request:
can u use nodejs for the backend? Please go in details how one can start buidling the projects from scratch and the setup for that docker/CICD PIPELINES.
Hi, to access the admin you need to log in as an admin from the login page
here is an admin account
login: admin@gmail.com
pass: Admin2024&
🌍 link: carrefour-theta.vercel.app/signin
And then go click on Account => dashoard
@@sylvaincodes593 thanks buddy just check it ,
please also tell me which DB u used for this?
The full course made 24 hours to watch (store + admin ) so 2 or 3 videos will be uploaded soon. Do not worry! .
this video handles the most important part of frontend such as:
✅ Configuration of Nextjs
✅ File && Folders structure
✅Setup test with Jest and Cypress
✅ Setup Workflows for CI CD with Github Actions
✅Installing frontend dependencies
✅ Setup Shadcn
✅Setup Responsive layout with Tailwind Css
That is a good start
📗the frontend codesource is available on github fork it github.com/sylvaincodes/youtube_ecommerce and chill
⛑for any issues feel free to ask for help.
Besides:
🔗You can check my Patreon right here => www.patreon.com/posts/become-full-next-109836821 for
☑Private support,
☑Full source code content
☑Early access to upcoming content 🔗
❤❤
@@sylvaincodes593 alright thanks man , im looking forward to other videos too. is there any idea how many days will it take to be on youtube
@@user-mk4zu8nc5nI used Mongo Db for this project. with native query like => find, findOne, findfindById, sort , limit and aggregations etc.....
When will the rest of the videos be released to complete the series?
I really need to see the rest of the videos
How many videos will the playlist be?
hi, at least 2 videos very soon.
For private message feel free to follow me on patreon: www.patreon.com/posts/become-full-next-109836821
Peace❤
When will you upload the video step by step?
wait what happened? video is not completed ?
when will you upload next part? bro
Hi, Great Tutorial , How we can access full source code ?
Hi, Here are the links:
✅Frontend source code: github.com/sylvaincodes/youtube_ecommerce
➡Frontend + Admin/API: www.patreon.com/posts/become-full-next-109836821
❤ Peace.
Hi sir .can you make your video to be 1080p?
For sure.
I hope this will be a complete tutorial ❤
For sure.
What platform of payments do you use in this ecommerce?
Hi, I used:
☑ Credit and debit cards with Stripe
☑ Cash on Delivery
☑ Digital wallets with Paypal.
@@sylvaincodes593 Ok. And I've got another question. Will you upload more videos explaining step by step?
@@hugomendez7659 Yep, of course
@@sylvaincodes593 I hope they don't take too long. thank you.
sir kindly upload the next videos of the full project tutorial
is there backend as well ????
Hi, I've just posted the next video about this course
click here => ruclips.net/video/QqKsrFVBbUg/видео.html
You will find all links in comments of this video.
have a good one❤
@@sylvaincodes593 I was wondering like is there we going to build rest API or only frontend
next video please
Hi bro .One question . Is it okay if i dont follow your Github Actions (CI/CD) parts and continue doing developing and testing process?.Is it okay?
yep, it's okay.
@sylvaincodes593 yess bro .Thanks a lot for your effort. I finished this video. I will practice it one more time while waiting for your next one.
when will you upload next part??
hi, very soon.
finished 1:8:25
Congratulations! stay tuned for the new one bro. Peace out. ♥
@sylvaincodes593 yess bro I will follow your tutorial of course. ❤️
hell brother, how can i access the admin panel like you did.
Hi, you need to log in as an admin.
👉 here is an admin account
✍login: admin@gmail.com
✍pass: Admin2024&
🌎 link: carrefour-theta.vercel.app/signin
And then go click on Account => dashoard
@@sylvaincodes593 thanks bro, and is this a mongodb database
And can I use this project for commercial purposes like selling products
@@haithammisape9155 Yes of course, i will help you switch to production. But you need to click on this link
👉 www.patreon.com/posts/become-full-next-109836821 and then create an account and send me private message.
My country has no access to the link site
all
bro just complete somethign anything .
hi, watch the next video => ruclips.net/video/QqKsrFVBbUg/видео.html
Fake video 😂