![Marius Espejo](/img/default-banner.jpg)
- 64
- 1 952 543
Marius Espejo
United States
Приєднався 19 бер 2019
I make all sorts of fullstack JavaScript content! Nodejs, reactjs, data structures, algorithms, web development, and more!
System Design has never been easier
In this video we take a look at how we can use AI to auto generate system design diagrams including cloud architecture, database ERDs, flow charts, sequence diagrams, and more!
Check out this new AI diagraming tool at 👉 Eraser.io
Check out this new AI diagraming tool at 👉 Eraser.io
Переглядів: 112 701
Відео
This setup has the best developer experience
Переглядів 7 тис.4 місяці тому
In this video we will learn about the benefits of having a type-safe REST API. We will talk about how to combine a ReactJS frontend client with a NestJS API into a single monorepo using turborepo. We will then construct a type-safe CRUD API using ts-rest and then consume that on the client using Tanstack React Query utilizing queries, mutations, and caching. Basically everything you need to jum...
How I manage multiple NestJS applications
Переглядів 8 тис.6 місяців тому
In this video we walk through how to create and maintain multiple Nest applications in a single repository using Nest CLI's built-in support for monorepo. Plus we'll walk through how to create libraries to share code across your applications.
EASIEST way to web scraping using Playwright!
Переглядів 11 тис.7 місяців тому
In this video we'll learn about the fundamentals of web scraping using Playwright and Bright Data's Scraping Browser. We'll discuss strategies for automating running a browser, navigating to specific pages, locating elements and performing actions, then finally tip on how to scrape information off of a web page. Learn more about Bright Data’s Scraping Browser: brdta.com/mariusespejo
I Never Want to Create APIs Any Other Way
Переглядів 22 тис.11 місяців тому
In this video we'll discuss how we can create typesafe REST APIs using ts-rest. This solution works for NestJS, NextJS, ExpressJS, and even Fastify APIs. With this solution we're able to consume the API on the client with a fully type-safe RPC-like client, leading to the best possible developer experience. This is a specially useful pattern if you happen to be developing your backend and fronte...
You should upgrade! NestJS v10
Переглядів 10 тис.11 місяців тому
Very quickly going over the recent major version release of Nest.js which introduces SWC as an alternative compiler, along with a few other small changes. I'll also show you how to actually upgraded your application in the simplest way possible.
What Next.js doesn't tell you about caching...
Переглядів 11 тис.11 місяців тому
In this video we discuss some issues and confusion around how page and data caching works for NextJS, and we talk about the distinction between server and client caching and the settings which affect both. We also discuss the behavior of the next js Link component, how prefetch affects caching behaviors, and finally the distinction between soft vs hard navigation. Github Issue about stale pages...
This Drizzle ORM feature is a game changer!
Переглядів 19 тис.11 місяців тому
In this video we quickly talk about Drizzle ORM's support for prepared statements, an API that allows you to effectively pre-compile your SQL queries ahead of time, allowing to get maximum performance out of your queries!
Decouple your NestJS code with this technique!
Переглядів 33 тис.Рік тому
In this video we talk about how we can use the EventEmitter module to easily decouple our NestJS code. We can also take this approach and apply it to any NodeJS / ExpressJS code.
Kysely first impressions - Typescript SQL query builder and migrations
Переглядів 14 тис.Рік тому
In video we take a quick look at a new Typescript SQL query builder which optimizes for type-safety and the best possible intellisense. We'll walk through how to use it to connect to a database and perform typical CRUD queries, we'll explore how to simulate relational queries, and finally we'll give their migration feature a try!
Drizzle ORM First impressions - migrations, relations, queries!
Переглядів 38 тис.Рік тому
In this video we take a quick look at the drizzle ORM to see if it's good enough to replace other options like prisma, typeorm, and Kysely. We'll create a simple application to test out creating migrations, running introspection, creating queries, and using relations. If you're looking for an orm for database queries that has very good typescript support but doesn't try to over abstract, you ne...
React JS Component Testing with Storybook 7 Typescript
Переглядів 8 тис.Рік тому
In this video we learn how to setup and write interaction tests with storybook and React JS! This is a follow up to my last video where we learned how to set up a vite react and typescript project along with storybook. Think of interaction tests as a more powerful version of unit tests which run directly on the browser along side your storybook stories. I'll also show you how you can use the in...
Storybook 7 Crash Course - React Typescript
Переглядів 42 тис.Рік тому
In this video I'll walk you through how to setup storybook for the first time as well as the fundamentals you need to know to create stories and develop ui or react JS / TS components in isolation.
You don't need passwords anymore! NestJS passwordless magic link authentication
Переглядів 11 тис.Рік тому
In this tutorial video we take a look at the steps to implement passwordless authentication via magic links using NestJS and PassportJS. 00:00 - Passwords are terrible 01:15 - Project setup 02:25 - Users Service 03:40 - API design 06:43 - passport-magic-login intro 08:14 - Magic Login Strategy 14:53 - Auth Service validate user 17:10 - Complete login route and send magic links 21:17 - Validate ...
Can we combine a NestJS app with React?
Переглядів 29 тис.Рік тому
In this quick video we learn how to create a monorepo using turborepo, which combines a NestJS API with a React frontend. We will also learn how to set up our Nest application to serve up our React SPA build so that we only need to run a single server for production!
Next.js 13 vs Remix! Nested layouts and routing
Переглядів 12 тис.Рік тому
Next.js 13 vs Remix! Nested layouts and routing
TypeORM v0.3.x Migrations, queries, with NestJS!
Переглядів 36 тис.Рік тому
TypeORM v0.3.x Migrations, queries, with NestJS!
Speech-to-Text app with SENTIMENT Analysis using ReactJS and AI!
Переглядів 4,1 тис.2 роки тому
Speech-to-Text app with SENTIMENT Analysis using ReactJS and AI!
Easiest way to build real-time web apps? WEBSOCKETS with NestJS
Переглядів 44 тис.2 роки тому
Easiest way to build real-time web apps? WEBSOCKETS with NestJS
Vue JS 3 Reactivity Fundamentals - Composition API
Переглядів 5 тис.2 роки тому
Vue JS 3 Reactivity Fundamentals - Composition API
How to Manage User Access in NestJS | Authorization with CASL
Переглядів 39 тис.2 роки тому
How to Manage User Access in NestJS | Authorization with CASL
Is this the best NodeJS Authorization Library? | CASL JavaScript Tutorial
Переглядів 27 тис.2 роки тому
Is this the best NodeJS Authorization Library? | CASL JavaScript Tutorial
Pinia Vue 3 State Management | Vue JS
Переглядів 21 тис.2 роки тому
Pinia Vue 3 State Management | Vue JS
Build Your Own Blog with Remix and Tailwind CSS, and deploy to Vercel!
Переглядів 10 тис.2 роки тому
Build Your Own Blog with Remix and Tailwind CSS, and deploy to Vercel!
Remix React Fullstack Tutorial | Crash Course
Переглядів 29 тис.2 роки тому
Remix React Fullstack Tutorial | Crash Course
GraphQL Authentication: JWT, login, signup, and more! | NestJS PassportJS Tutorial
Переглядів 34 тис.2 роки тому
GraphQL Authentication: JWT, login, signup, and more! | NestJS PassportJS Tutorial
I tried RedwoodJS - Fullstack Framework for Startups?
Переглядів 9 тис.2 роки тому
I tried RedwoodJS - Fullstack Framework for Startups?
React Router v6 Upgrade Guide - Refactoring from v5
Переглядів 3,2 тис.2 роки тому
React Router v6 Upgrade Guide - Refactoring from v5
I cloned TeamSeas.org using GraphQL, Prisma, NestJS, React, and more! #TeamSeas
Переглядів 30 тис.2 роки тому
I cloned TeamSeas.org using GraphQL, Prisma, NestJS, React, and more! #TeamSeas
thank you! does ts-rest set up work with angular too ? Any guidance / link etc. would be super appreciated! thanks again. (I did not not see angular support in the docs but google AI says it is possible so was hoping to get your take / input)
The base client is based on Fetch API so it should be agnostic to any client
Good content bro. But, how can I use git in this project? Would I create two repositories and save indivudualy or just one with turbo configs?
The point of monorepo is to have one repo for two or more applications, if you have two repositories that’s longer a monorepo. Hope that helps
I wish I could like this video more than once. Thank you so much.❤
You’re welcome!
Great one! What theme are you using on vscode ?
I was looking for resources on creating a design system with React, this was the perfect video for it. Thanks alot!
what about bringing adds to it ?
Hey, I am looking for a setup for test suites in NestJS, but with addition of factories for classes, in order to help me with seeding and "Arrange" Step of the Test. Any idea where to watch that? Especially, for complex schemas where i.e. I want to test a module, which every entity depends on the creation of others.
great work, very well explained. greetings from Argentina 🔵⚪🔵
Can you create a video on stepper Which would look like this O 0 ---------- 0 ----------| O Step1 Step2 Step3
Thank's!
33:54 i also did faced with the same issue. "rootDir": "./", and "modulePaths": [ "<rootDir>/" ],
Adding this to the config object in main.ts makes the UI read the comments on PAGE REFRESH without having to restart the sevre. typescript: { reactDocgen: 'react-docgen', },
Is it me, or i just want to see github for this code practice
Great video, thanks! How about input validation and swagger? Is it possible to implement them?
Yes you can generate openapi document from the contract, and nest can generate swagger docs off of that. And yes input validation is also supported
Please Help after update the entities add colum or update name and try to run generate it give me create not alter and when i use migration:run i get sql error this table is already exist
Make sure your datasource config is setup properly. Generally how generate command works is it connects to your DB to figure out current schema, and compares it to your local entities to understand the diff. If your generate results in CREATE commands, that likely means you are connecting to a database where the tables were not yet created. Also you are still in full control of the SQL, if generate results in incorrect SQL you should correct it
@@mariusespejo i use "paths": { "@/*": ["./src/*"] } as config in ts config file can be this problem
Thanks a lot. I followed along, learnt a lot. Would've appreciated the source code though ;-)
Have you encountered any errors when importing the react mui library to the frontend project? It seems it does not play well with the rollup commonjs plugin
Sorry I haven’t used mui
@@mariusespejo Hey sure no problem. For anyone having issues with MUI what worked for me was to exclude the node_modules folder in the rollup commonjs plugin like this: commonjs({ exclude: [/node_modules/] })
Bro, thank you for laying this out in such a clear and concise way. I've been struggling with typeOrm for a while now, and I finally decided to come and seek help. Silly devs like me who don't have the time to go through the documentation still try stabbing in the dark to figure it out which is far more time consuming. But I had no idea I could learn so much so quickly from anyone on the subect. Kudos! <3
Thanks for the comment! Glad this old video is still helping folks out!
@@mariusespejo In a big way!
bro with this approach the user need to register and then login, we should be able to register and automatically login
So create a jwt at register, nothing stopping you from achieving that
What is the name of ur icon and theme in ur vscodeM
You are a blessing!!!. Your videos are well detailed. I really appreciate your effort in enriching others with the knowlegde you have. Thank You.
Thanks for stopping by to comment John!
Time to do another Nest 10 vs Adonis 6 comparison
Haha good idea!
after this video things with nestjs and typeorm going much better. THANK YOU MARIUS.
best tutorial about migration for nestjs ** in my case was issue that i did use yarn+morepo - better use npm for run migrations
THANK YOU! So so much
Is it open source
I don’t think so, it’s a product
thank you! very clear and straightforward
Thanks for feedback!
Thanks for feedback!
So you can use any of the big LLMs like ChatGPT to generate diagrams. You just have to describe what you want then ask it to return the diagram in a mermaid format. Then you can paste that in tools like excalidraw and such.
Good to know, thanks!
can u use it for org charts?
Definitely!
I'd use it if it would be exporting to mermaid or if they would provide the tools to be able to visualize it easily. I wouldn't mind paying for the generation but after that i don't want to be limited in the generated result.
The video is great, but the pattern is insane. The amount of work that people go through to avoid calling a function and using its return value is impressive. It's all functions, pals. Keep it simple.
Obviously if you used this on everything it would be overkill. The point is to understand its purpose and use it in a scenario where decoupling is important. It’s not about avoiding calling a function, that’s an oversimplification. Although perhaps I didn’t explain the why behind using it well enough
Severe high pitch squeal in your audio
Like a background noise? Thanks will try to monitor it better during production
Is my assumption correct that for large applications, using a monorepo might not be the best choice due to potential coupling issues? For instance, if we decide to create a mobile application, we might face challenges with a monorepo setup. Similarly, if we want to split our server into microservices, having a monorepo could complicate things. On the other hand, is it true that a monorepo setup is more suitable for relatively small projects?
I think that it depends on your overall pipeline and deployment infrastructure. Fun fact for example, I believe google stores all of their code in a monorepo. Personally I would think of monorepos in a scenario where code sharing is beneficial, but like with everything it has pros and cons, and you need to pick based on which tradeoffs are okay with you. A native mobile app for example I don’t really see benefiting much from a monorepo where the other apps in the repo are in totally different languages and technologies.
What are your theme and fonta
I heard about mermaid and D. This is another diagram as code tool. Very neat
Great informative video! It would be wonderful if you could create a video on using SVGs in Storybook.
Perhaps in a follow up. In general though you just need a way to load in SVG in such a way that would be compatible with webpack, which storybook uses. So I’d suggest looking at things like svgr, which is one of the typical ways to load svg in a react application for example
Very nice!
very interesting tool, thank you for sharing!
how to deploy storybook in static site at the same time library to npm?
Depends on what your deployment pipeline looks like, do you have it automated? A storybook deployment in general just means run storybook build and have some server to host it, github pages might be easiest, assuming your library is open source anyways
This is such an amazing tool. Thanks you for sharing it. Good thing I subscribe to your channel.
amazing video + the editing
Thank you!
amazing, still relevant in 2024! thanks mate!
Thanks! Good to know, I was thinking of maybe doing a refresh of this with current versions
@@mariusespejo will be amazing to include DataLoader topic as well
Nice video...do you have any idea on how to integrate this into Nestjs?
Thanks! Yep take a look at this: github.com/kazu728/nestjs-kysely
@@mariusespejo thank you
Goat
Thank you very much!
You’re welcome!
Thanks for the sharing
No problem!
I dont like the sound of your voice man, but your are really freaking good
hi mate thanks for your very informative videos do you have any idea if i can upload/download images using a dockerized nestjs application with graphql.i cant find any resource online to help me.will my images be uploaded in the container?Thanks in advance.
You first need to understand the different approaches, then decide on where to store it, e.g. in a dedicated storage something like s3 and not in your container I recommend spend some time reading about it wundergraph.com/blog/graphql_file_uploads_evaluating_the_5_most_common_approaches
No link to the tool?
In the description! Eraser.io
awesome man, thank you