- 21
- 130 700
Cyril from CodeCake
Taiwan
เข้าร่วมเมื่อ 16 ก.พ. 2023
Let's code complete applications from end to end, from creation to deployment.
Here, we pay special attention to the quality of our code.
Here, we pay special attention to the quality of our code.
Build a Full Stack E-commerce app with Spring boot 3, PostgreSQL, Angular 18 and Tailwind CSS (2024)
🚀 Welcome to this complete full-stack development guide where we create an e-commerce clone using some of the latest and most efficient technologies in 2024! In this TH-cam tutorial, we'll dive deep into using Spring Boot 3 for our backend development, Angular 18 for the frontend, and integrate Tailwind CSS with Daisy UI for sleek and responsive UI components. Our database management will be handled by PostgreSQL, which ensures robust data handling. For secure authentication, we're utilizing Kinde.
🎯 By the end of this tutorial, you'll have a fully functional e-commerce platform and a deeper understanding of creating a full-stack application from scratch. You'll be equipped with the knowledge to tackle similar large-scale projects and incorporate these technologies into your future endeavours.
Chapters
- 03:27 Generate NX project + Angular
- 16:28 UI architecture (Frontend)
- 30:21 Generate Backend (Backend)
- 54:11 Authentication and Authorization (Backend)
- 2:02:06 Authentication and Authorization (Frontend)
- 2:34:50 Product and Category CRUD (Backend)
- 3:48:13 Product and Category CRUD (Frontend)
- 4:55:42 Homepage (Backend)
- 5:01:14 Homepage (Frontend)
- 5:16:53 Product details (Backend)
- 5:27:09 Product details (Frontend)
- 5:44:41 Products (Backend)
- 5:50:41 Products (Frontend)
- 6:17:26 Carts and payments part 1 (Backend)
- 6:40:40 Carts and payments part 1 (Frontend)
- 7:14:48 Carts and payments part 2 (Backend)
- 7:47:31 Carts and payments part 2 (frontend)
- 8:24:18 Order user and Admin (Backend)
- 8:38:03 Order user and admin (Frontend)
- 8:55:01 Conclusion
Each commit comes with a chapter
Resources
Source code repository
github.com/C0de-cake/ecommerce-app
Schema documentation
github.com/C0de-cake/ecommerce-app/blob/main/schema-ecommerce-app.png
Hero.webp
github.com/C0de-cake/ecommerce-app/tree/main/apps/ecom-frontend/public/home
Liquibase file
github.com/C0de-cake/ecommerce-app/tree/main/apps/ecom-backend/src/main/resources/db
Shared backend package
github.com/C0de-cake/ecommerce-app/tree/main/apps/ecom-backend/src/main/java/fr/codecake/ecom/shared
application.yml
github.com/C0de-cake/ecommerce-app/blob/main/apps/ecom-backend/src/main/resources/application.yml
🎯 By the end of this tutorial, you'll have a fully functional e-commerce platform and a deeper understanding of creating a full-stack application from scratch. You'll be equipped with the knowledge to tackle similar large-scale projects and incorporate these technologies into your future endeavours.
Chapters
- 03:27 Generate NX project + Angular
- 16:28 UI architecture (Frontend)
- 30:21 Generate Backend (Backend)
- 54:11 Authentication and Authorization (Backend)
- 2:02:06 Authentication and Authorization (Frontend)
- 2:34:50 Product and Category CRUD (Backend)
- 3:48:13 Product and Category CRUD (Frontend)
- 4:55:42 Homepage (Backend)
- 5:01:14 Homepage (Frontend)
- 5:16:53 Product details (Backend)
- 5:27:09 Product details (Frontend)
- 5:44:41 Products (Backend)
- 5:50:41 Products (Frontend)
- 6:17:26 Carts and payments part 1 (Backend)
- 6:40:40 Carts and payments part 1 (Frontend)
- 7:14:48 Carts and payments part 2 (Backend)
- 7:47:31 Carts and payments part 2 (frontend)
- 8:24:18 Order user and Admin (Backend)
- 8:38:03 Order user and admin (Frontend)
- 8:55:01 Conclusion
Each commit comes with a chapter
Resources
Source code repository
github.com/C0de-cake/ecommerce-app
Schema documentation
github.com/C0de-cake/ecommerce-app/blob/main/schema-ecommerce-app.png
Hero.webp
github.com/C0de-cake/ecommerce-app/tree/main/apps/ecom-frontend/public/home
Liquibase file
github.com/C0de-cake/ecommerce-app/tree/main/apps/ecom-backend/src/main/resources/db
Shared backend package
github.com/C0de-cake/ecommerce-app/tree/main/apps/ecom-backend/src/main/java/fr/codecake/ecom/shared
application.yml
github.com/C0de-cake/ecommerce-app/blob/main/apps/ecom-backend/src/main/resources/application.yml
มุมมอง: 28 183
วีดีโอ
How to deploy Spring boot / Angular application in the cloud (CD)?
มุมมอง 2.6K4 หลายเดือนก่อน
In this video, we are going to see how to automatically deploy a real-world application (Spring Boot backend with an Angular frontend) on a VPS or VM with the help of Coolify (Platform as a Service). Chapters : 00:00: Introduction 01:14 Backend configuration 23:41 Frontend configuration 39:50 Setup Coolify 46:17 Backend deployment 52:53 Frontend deployment 58:32 Github Action for backend 01:07:...
The Ultimate Angular Developer Roadmap
มุมมอง 2.3K5 หลายเดือนก่อน
Ready to level up your Angular skills? This video is your ultimate guide to becoming an Angular expert. From understanding key prerequisites and mastering the core concepts like NgModules and components, to delving into advanced topics like NgRx and Change Detection, we've got it all covered. Whether you're a student or an experienced developer, this roadmap will help you efficiently navigate t...
Build a Full Stack WhatsApp Clone project with Spring Boot 3, Angular, and Keycloak
มุมมอง 12K5 หลายเดือนก่อน
🚀 Welcome to this complete full-stack development guide where we create a Whatsapp clone using some of the latest and most efficient technologies in 2024! In this TH-cam tutorial, we'll dive deep into using Spring Boot 3 for our backend development, Angular 18 for the frontend, and integrate Bootstrap for sleek and responsive UI components. Our database management will be handled by PostgreSQL,...
Create a Full Stack Airbnb clone with Angular 17, PrimeNG, Spring boot 3, PostgreSQL (2024 project)
มุมมอง 43K7 หลายเดือนก่อน
🚀 Welcome to this complete full-stack development guide where we're creating an Airbnb clone using some of the latest and most efficient technologies in 2024! In this TH-cam tutorial, we'll dive deep into using Spring Boot 3 for our backend development, Angular 17 for the frontend, and integrate PrimeNG for sleek and responsive UI components. Our database management will be handled by PostgreSQ...
Create a Spotify clone with Spring boot 3, Angular 17, Bootstrap 5, PostgreSQL (2024)
มุมมอง 11K9 หลายเดือนก่อน
Dans cette vidéo, nous plongeons dans la création d'un clone de Spotify, en utilisant Spring Boot 3 pour le backend, Angular 17 pour le frontend, avec Bootstrap 5 pour le design, PostgreSQL pour la base de données, et Auth0 pour l'authentification. Que vous soyez débutant ou expérimenté, ce guide pas à pas vous fournira les connaissances et les compétences nécessaires pour construire une applic...
4 ressources clés méconnues pour faire passer ton code au niveau supérieur
มุมมอง 51510 หลายเดือนก่อน
🚀 Découvrez dans cette vidéo 4 ressources essentielles pour améliorer vos compétences en codage et faire progresser votre carrière de développeur ! 🚀 📘 Dans cette vidéo, je partage avec vous quatre ressources qui ont eu un impact significatif sur ma façon d'écrire du code, de structurer mes applications, et sur ma carrière en général. Que vous soyez débutant ou expérimenté, ces ressources pourr...
How to build a Netflix clone with Angular (A to Z tutorial)
มุมมอง 3.9K10 หลายเดือนก่อน
🚀Découvrez comment créer un clone de Netflix en utilisant Angular, de A à Z. Ce tutoriel complet vous guidera à travers chaque étape du processus, en mettant l'accent sur les meilleures pratiques et les techniques avancées d'Angular.🚀 📅 Au programme : 00:43 Création de l'application 06:20 Architecture de l'interface 08:26 Barre de navigation 11:56 À la une 30:43 Liste des films par genre 55:36 ...
How to become QUICKLY a professional web developer
มุมมอง 11Kปีที่แล้ว
📝 Description : Dans cette vidéo, je te partage un guide complet sur comment devenir un développeur web professionnel rapidement en 2024. Je te propose un processus efficace et structuré pour apprendre le développement web. Voici les points clés que nous allons aborder : 📅 Au programme : 00:00 Introduction 00:42 Pourquoi devenir développeur web ? 01:49 Comment apprendre le code rapidement ? 02:...
Learn Typescript in 5 minutes
มุมมอง 6Kปีที่แล้ว
📝 Description : Dans cette vidéo, je vous guide à travers les fondamentaux de TypeScript, un langage de programmation incontournable pour les développeurs web. Que vous soyez un débutant complet ou que vous cherchiez à rafraîchir vos connaissances, ce tutoriel est pour vous ! 📅 Au programme : 00:00 Introduction 01:13 Les variables 02:00 Les tableaux 02:17 Les interfaces 02:55 Les classes 03:38 ...
Tuto Angular de A à Z : Transforme ta voix en texte avec OpenAI (Whisper)
มุมมอง 789ปีที่แล้ว
Tuto Angular de A à Z : Transforme ta voix en texte avec OpenAI (Whisper)
Je code ChatGPT en 48h (ne fais pas la même erreur)
มุมมอง 423ปีที่แล้ว
Je code ChatGPT en 48h (ne fais pas la même erreur)
Tuto Angular : Maîtrise le client HTTP d'Angular avec OpenAI
มุมมอง 355ปีที่แล้ว
Tuto Angular : Maîtrise le client HTTP d'Angular avec OpenAI
Thank you for the wonderful tutorial on Spring Boot and Angular. However, I am encountering a bit of trouble in setting up the database. I now have both the front-end and back-end files you provided. Could you please guide me step by step on how to get the web application up and running like you did? I really appreciate your help. I hope you will be able to reply to me within a few hours.
I am trying to follow this project now, and there are some major changes in the way to set up prime ng for the project. It would be helpful if there is a new version of this project or some guidance.
By the way I am using angular 19 and prime ng v19.
Awesome overview!!! Thank you very much!
amazing thank u
You are welcome
On 31:49 When running the Nx command "nx g @nxrocks/nx-spring-boot:project ecom-backend --verbose" I get this error: NX Cannot read properties of undefined (reading 'replace') TypeError: Cannot read properties of undefined (reading 'replace') at removeWindowsDriveLetter Update: Error was because of the Nx version ("nx": "20.2.2"). I switched to npx create-nx-workspace@19.6.5 instead which works okay
How do you fix it? i have the same error.
@tiagote99 I started a new project with create-nx-workspace 19 instead (mentioned it above)
Merci pour cette vidéo qui est super bien expliquée. C'est rare de trouver des vidéos récentes sur des projets complets avec Angular. Donc Merci !!
De rien :)
Bonjour, Bon alors je suis à 1:37:00 Il y'a un truc que je ne comprend pas, c'est lors de l'authentification frontend.. Si on suit simplement ce tutoriel, alors il n'est tout simplement pas possible de se connecter car la seule possibilité de se connecter est d'utiliser un compte google et si on utilise un compte google, on se retrouve avec une erreur back end : *_java.util.Collection.stream()" because "roles" is null_* le compte google n'a pas roles, et n'est enregistré nul part et quand on inspecte la console du navigateur, on se retrouve avec *_erreur 404 - get-authenticated-user/?forceResync=false_* L'appli plante. On se retrouve en boucle, car désormais avec ce compte google il n'est plus possible de se connecter. On ne sait pas trop si notre connexion coté front marche. - Comment arrives tu à te connecter une première fois sans avoir SIGN UP comme dans la vidéo ? je pensais qu'avec ce qu'on avait écrit dans l'action trigger sur le site manage.auth0.com, on était automatiquement un ROLE_TENANT par défaut or toi ça marche... Coté backend, tu n'exites pas dans la base de données. D'ou est ce que ton back prend les datas pour le Login ? - Aussi malgré les setting AUTH0, quand on lance l'appli et qu'on regarde la console du navigateur, j'ai un message d'erreur CROSS ORIGIN refusé pourtant je l'ai activé dans mes settings. _localhost4200 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource._
Peut être que la configuration par défaut de Auth0 a changé mais tu devrais pouvoir activer authentification par mot de passe sans problème, quand tu arrives sur le formulaire de connexion tu devrais avoir l’accès au formulaire d'inscription. Tu ne dois pas utiliser la connexion via google , j'ai pas du tout tester cette manière de se connecter. En fait dans la video, j'ai déjà un user sur Auth0 d’où le fait que ca marche déjà. Cela dit c'est peut être trompeur, parce que tu dois passer par le formulaire Côté Backend, pas de soucis parce que la méthode syncWithIDP va se charger de récupérer les infos contenu dans le token JWT et les mettre en DB. Pour CORS, une fois connecté, tu ne devrais plus avoir cette erreur.
@@code-cake Merci pour la réponse. Je comprends, vu que je n'avais pas d'user, seul la connexion via google me semblait logique. Donc si j'ai bien compris. Il faut d'abord créer un user sur Auth0. Je pensais que c'était déjà le cas quand on créait un compte. Quand suit ce que tu as fait dans le tutoriel, et on va dans le User Management, en cliquant sur "Users", on a un user qui apparait, à cet user je peux lui attribuer les rôles que je veux (je lui ai donné les trois roles Tenant, admin et landlord). Ce qui est que je vais devoir absolument créer un nouveau compte Auth0 car en essayant avec une connexion google (mon idée de départ) ca fait completement planté l'appli Airbnb, et peu importe si je relance le serveur, le login ne marche plus. Je ne connais pas très bien AUTHO et son fonctionnement. C'est la première que je vois son implémentation via un projet type tutoriel. *EDIT:* J'ai crée un user, sur Auth0 il est autorisé à se connecter sur l'appli Airbnb mais malgré tout je me retrouve avec le même problème : *localhost:4200/api/auth/get-authenticated-user/?forceResync=false* Status 404 en réponse à ma requete 😶
You skipped a lot of stuff and didn't explain much for new beginners, don't take it the wrong way but do better.
Nicely explained , but is this packaging " controller -> service -> repo " type of pattern where we package all this by what it is ? and also can you please teach us the important patterns widely used apart from this ?
Thanks, what do you mean by here we package all this by what it is ? Yes I'll make other short content to explain different kind of pattern
Hi Cyril, I am getting issue in redirectToCheckout method from StripeService. Its deprecated. Any suggestions?
You need to be more precise about the exact line that is deprecated
Which angular version can be used? Version 19? I'm so excited to try and learn from you
I didn't try to run the app with Angular 19 but I don't see why I would be a problem, it should be fine
pls get the production level spring boot microsevice project with docker ,k8s ,chache(redis),kafka .thanku sir your best teacher
I have no experience with Angular, only ReactJS, would be this a good project to learn? I want to use it to learn Angular and Spring boot
Yes you can go ahead with this project
spring boot / angular / postgres on aws and thank you
I am a big fan of yours. 😊 Thank you! 🙏
If you don't want to start with Spring Security, which takes the first 1/3 of the time and which you can't practically see on the frontend, start at 1:40:07 where the regular functionalities appear and you can really see what the code from the backend is causing on the frontend. Also don't add security related dependencies like okta, spring security and oauth2. Writing such things is definitely not for beginners.
Any tutorials with a more real life implementation tone isnt beginners friendly and im saying this as a beginner. It's always spring security the hardest part to get.
I agree Spring security is very tricky because most of the behaviour is hidden even for non beginner it can be tough
when i generate nx spring boot, it always error NX can't read properties . Can you help me to fix that ?
What's the exact command that you are trying to execute?
@@code-cake i cant use this command nx g @nxrocks/nx-spring-boot:project <your-app-name> it always said directory is null
you are the best, hello from kyrgyzstan
really hard to follow your speed, I wonder how many people actually finish watching it , I gave up on minute 30
would you suggest a book about software architecture?
Yes Clean code from robert martin, Object oriented analysis and design, Head first design pattern. If you read and understand this three you will definitely get ahead from the crowd.
this can be created on windows as well right without any issue?
No issue since all the tools that I use are compatible with windows
Do you know MERN stack?
Not enough to make a complete app like this
thanks so much
Very good tutorial, thank you so much, please can I use @Builder from Lombok instead of @Builder from Jilt ?
Yes of course you can use Lombok on your side
Really Amazing content , but can you tell me why did u use sse over websockets??
Easier to configure and manage and faster
SSE it's easier to handle mainly because with websocket you will have CORS issue if you don't host the frontend on the same domain as your backend. So I wanted to keep that as simple as possible
hello, why I got this error message : {"error":"invalid_request","error_description":"The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed. Requested audience 'localhost:8080/api' has not been whitelisted by the OAuth 2.0 Client."}
très belle vidéo merci à toi, mais dis moi comment tu gères la création des users? je vois juste la connexion avec auth0. Ne peut on pas depuis auth0 faire également le formulaire d'inscription? ou il faut le faire manuellement à part?
Tout est géré côté auth0, même le formulaire d'inscription, pas besoin de le faire de ton côté
@17:15 the command line is not right for me, I have to run: nx g @nx/angular:component apps/ecommerce-frontend/src/app/layout/navbar/navbar --style=scss --no-interactive With nx version v20.1.3
ohhh man thank u so much , I was so confused jaja
n
je suis debutant , tu peux faire une video de l config au debut
La configuration c'est a dire ?
im sorry im noob here,i want to ask is that important to use stripe method in e-commerce or there is another alternative?
This tutorial focuses on Stripe but technically you can use any alternative you like, the concept will stay the same
thats gold
Hello, I just know Java and little bit of advanced Java and Spring Boot. Will I be able to understand this project completely? :)
It depends if you are familiar with SQL and Hibernate as well. So have a look at that first. Also have a look at Angular it will be helful for this tutorials
hey bro im having some issues do you know why it might be saying this java: package org.junit.jupiter.api does not exist
You need to give me more context, when does it happen ? what are you using as IDE, etc
@ thank you for replying! You know what’s crazy is I think it’s because I don’t have IntelliJ ultimate therefore I could not use the springboot plug in - however ChatGPT recommended me to switch to vs code and now i just connected to your data base in vscode - what are your thoughts on this?
You can use the IDE that you like, I don't have any problem with that
It would be great , if you could provide the AirBNB clone series with React. alongwith Sring boot
I don't know React enough for the moment
20:48 Part of the code is not visible, the window with the face is in the way. On Github this line (21) is completely absent.
It's because I'm refactoring it later in the video : getHeaders(): HttpHeaders { return new HttpHeaders().set('Authorization', `Bearer ${environment.TMDB_API_KEY}`); }
15:00 breakpoint
Such an amazing tutorial. Thank you so much for your efforts and talents. Please continue making more projects. You honestly make a great impact on peoples' lives.
Why every time i have a problems with images? Logo doesent work bcoz after 18 version we must place images in 'public' folder. I move logo to 'public' folder it's still doesnt work.
Verify that you put the right address in the HTML and that the file is present in the assets folder
Sir I'm impressed by your content. A big fan. Nobody even comes closer to you in entire youtube when it comes to Java-springboot-angular fullstack projects. But It'll great for our college friends if you may recreate or append this code for another tech stack. I mean same project but use keycloak instead of kinde (as keycloak is free, no tension of 90 days validity, you can use cloud version of keycloak "Cloud-IAM" for ease alike kinde) and Paypal payment gateway ( as its available in all countries including India). It'll help us to publish it in online via github & versal/render to showcase in college project or resume during placement. Lot of gratitude & heartiest thanks from us. We don't skip any ad because we think it as our small Thanksgiving to u.
I code this project along with u, but unable to integrate keycloak & paypal... trying since last 1 week...I guess it'll take only 10 minutes for you to integrate keycloak & paypal, and may be another 10 minutes to deploy it in render/netlify...plz make another video 20 minutes video lectures on it.🙏 Request from small brother..😀
Sure I'll put it on my list. Thanks a lot for the great feedback :)
bro how you import the files in the munit 34 because i can't see
Can you be more precise ?
hello Cyril thanks a lot for the hard work you done with this project its very well done made and easy to follow the steps : even am a bit very slowly following your steps : can you explain please what you did exactly in the second 34:37 when you did imported the xml files into db.changelog i didnt get the right action to get those files merci beaucoup
I took the liquibase files from the project already made. So for you, you should go here github.com/C0de-cake/ecommerce-app/tree/main/apps/ecom-backend/src/main/resources/db And copy paste the same files as what I'm doing in the video.
也许你应该使用标签 DDD,这是一个关于 DDD 的好视频
Yes I'll add it
Great tutorial, learning a lot from your channel. I am following the tutorial and building the project but i got an issue in the authentication part. When i click on login the console says connected pointing to the console log in line 60 in the oauth2.service.ts but my averter or profile image does not change as to show I am really logged in.
In that case it can be an issue on the backend side when the client calls the endpoint to get the user information, check that your user is persisted properly
Very good tutorial Thank you so much please don't stop .... continue with deployment of mono-repo app
Yes it's coming
very much struggling to understand why so many thing build this way, means why so many complex packages...? why every field of class has separate record...? it seems over engineered.... also not given explanation why it is getting implementing that way. but I dont know, may be I dont have that much real world project experience,
Watch the e-commerce video, I'm explaining more why it's better. Or you can just search for hexagonal architecture on yt you will find plenty of content that will explain why it's better than the traditional layered architecture
I also felt that
Hi Just an advice if you can sepeare backend and frontend parts as I am mostly intrested in spring boot. Also I am familiar with react so frontend parts are ussually a turn off to watch tutorial. If you can first focus on backend and then create frontend than it would be easier and also there will be seperation of concern. Thanks !!
Each chapter is already backend or frontend so if you just want to follow the backend part just avoid the frontend chapters
Hello, I had a little problem. In my project, the generated-resources folder was not deleted. Could you help me?
Sure I can help you. When is it happening? Did you try to do a mvn clean ?
@@code-cake It worked out!!! Thank you very much man
Merci
Why i cant generate component? nx generate @nx/angular:component navbar --directory apps/ecommerce-frontend/src/app/layout navbar NX Schema does not support positional arguments. Argument 'navbar' found ?
nx generate @nx/angular:component --directory apps/ecommerce-frontend/src/app/layout navbar You have two times navbar that's why it's not working