Marius Espejo
Marius Espejo
  • 64
  • 1 952 543
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
Переглядів: 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!
Server-Sent Events with NestJS
Переглядів 30 тис.2 роки тому
Server-Sent Events 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

КОМЕНТАРІ

  • @nikhilgoyal007
    @nikhilgoyal007 3 дні тому

    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)

    • @mariusespejo
      @mariusespejo 2 дні тому

      The base client is based on Fetch API so it should be agnostic to any client

  • @benjaflinston
    @benjaflinston 3 дні тому

    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?

    • @mariusespejo
      @mariusespejo 2 дні тому

      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

  • @tikthetok6198
    @tikthetok6198 3 дні тому

    I wish I could like this video more than once. Thank you so much.❤

  • @anesmeister1511
    @anesmeister1511 4 дні тому

    Great one! What theme are you using on vscode ?

  • @stevesmith0624
    @stevesmith0624 4 дні тому

    I was looking for resources on creating a design system with React, this was the perfect video for it. Thanks alot!

  • @phantazzor
    @phantazzor 4 дні тому

    what about bringing adds to it ?

  • @dimitrisbellos01
    @dimitrisbellos01 6 днів тому

    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.

  • @R3flexx2001
    @R3flexx2001 9 днів тому

    great work, very well explained. greetings from Argentina 🔵⚪🔵

  • @adilkevin6220
    @adilkevin6220 9 днів тому

    Can you create a video on stepper Which would look like this O 0 ---------- 0 ----------| O Step1 Step2 Step3

  • @hazielcastillo8887
    @hazielcastillo8887 12 днів тому

    Thank's!

  • @eugenematsetska8406
    @eugenematsetska8406 20 днів тому

    33:54 i also did faced with the same issue. "rootDir": "./", and "modulePaths": [ "<rootDir>/" ],

  • @elkhial
    @elkhial 21 день тому

    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', },

  • @khangmach5369
    @khangmach5369 22 дні тому

    Is it me, or i just want to see github for this code practice

  • @vahidnajafi756
    @vahidnajafi756 23 дні тому

    Great video, thanks! How about input validation and swagger? Is it possible to implement them?

    • @mariusespejo
      @mariusespejo 22 дні тому

      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

  • @amerhamed1729
    @amerhamed1729 25 днів тому

    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

    • @mariusespejo
      @mariusespejo 25 днів тому

      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

    • @amerhamed1729
      @amerhamed1729 22 дні тому

      @@mariusespejo i use "paths": { "@/*": ["./src/*"] } as config in ts config file can be this problem

  • @aarushsaboo1194
    @aarushsaboo1194 25 днів тому

    Thanks a lot. I followed along, learnt a lot. Would've appreciated the source code though ;-)

  • @agoranaosei
    @agoranaosei 25 днів тому

    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

    • @mariusespejo
      @mariusespejo 25 днів тому

      Sorry I haven’t used mui

    • @agoranaosei
      @agoranaosei 25 днів тому

      @@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/] })

  • @James-fe7wd
    @James-fe7wd 27 днів тому

    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

    • @mariusespejo
      @mariusespejo 27 днів тому

      Thanks for the comment! Glad this old video is still helping folks out!

    • @James-fe7wd
      @James-fe7wd 27 днів тому

      @@mariusespejo In a big way!

  • @mohabedr5030
    @mohabedr5030 29 днів тому

    bro with this approach the user need to register and then login, we should be able to register and automatically login

    • @mariusespejo
      @mariusespejo 27 днів тому

      So create a jwt at register, nothing stopping you from achieving that

  • @mehdiwow5388
    @mehdiwow5388 Місяць тому

    What is the name of ur icon and theme in ur vscodeM

  • @John-King87
    @John-King87 Місяць тому

    You are a blessing!!!. Your videos are well detailed. I really appreciate your effort in enriching others with the knowlegde you have. Thank You.

    • @mariusespejo
      @mariusespejo Місяць тому

      Thanks for stopping by to comment John!

  • @nanonkay5669
    @nanonkay5669 Місяць тому

    Time to do another Nest 10 vs Adonis 6 comparison

  • @eugenematsetska8406
    @eugenematsetska8406 Місяць тому

    after this video things with nestjs and typeorm going much better. THANK YOU MARIUS.

  • @eugenematsetska8406
    @eugenematsetska8406 Місяць тому

    best tutorial about migration for nestjs ** in my case was issue that i did use yarn+morepo - better use npm for run migrations

  • @LawrenceChege
    @LawrenceChege Місяць тому

    THANK YOU! So so much

  • @bajrabahu581
    @bajrabahu581 Місяць тому

    Is it open source

    • @mariusespejo
      @mariusespejo Місяць тому

      I don’t think so, it’s a product

  • @davialmeida1078
    @davialmeida1078 Місяць тому

    thank you! very clear and straightforward

  • @RocketLR
    @RocketLR Місяць тому

    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.

  • @tikkivolta2854
    @tikkivolta2854 Місяць тому

    can u use it for org charts?

  • @AnnevanRossum
    @AnnevanRossum Місяць тому

    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.

  • @luizsocrate7936
    @luizsocrate7936 Місяць тому

    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.

    • @mariusespejo
      @mariusespejo Місяць тому

      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

  • @ScriptureFirst
    @ScriptureFirst Місяць тому

    Severe high pitch squeal in your audio

    • @mariusespejo
      @mariusespejo Місяць тому

      Like a background noise? Thanks will try to monitor it better during production

  • @danyakomik9414
    @danyakomik9414 Місяць тому

    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?

    • @mariusespejo
      @mariusespejo Місяць тому

      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.

  • @bikkikc013
    @bikkikc013 Місяць тому

    What are your theme and fonta

  • @Candyapplebone
    @Candyapplebone Місяць тому

    I heard about mermaid and D. This is another diagram as code tool. Very neat

  • @vikasmv5952
    @vikasmv5952 Місяць тому

    Great informative video! It would be wonderful if you could create a video on using SVGs in Storybook.

    • @mariusespejo
      @mariusespejo Місяць тому

      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

  • @googooboyy
    @googooboyy Місяць тому

    Very nice!

  • @dev_ression
    @dev_ression Місяць тому

    very interesting tool, thank you for sharing!

  • @MaxViews24
    @MaxViews24 Місяць тому

    how to deploy storybook in static site at the same time library to npm?

    • @mariusespejo
      @mariusespejo Місяць тому

      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

  • @vincebanzon756
    @vincebanzon756 Місяць тому

    This is such an amazing tool. Thanks you for sharing it. Good thing I subscribe to your channel.

  • @momokoko9864
    @momokoko9864 Місяць тому

    amazing video + the editing

  • @ViciuSRO
    @ViciuSRO Місяць тому

    amazing, still relevant in 2024! thanks mate!

    • @mariusespejo
      @mariusespejo Місяць тому

      Thanks! Good to know, I was thinking of maybe doing a refresh of this with current versions

    • @ViciuSRO
      @ViciuSRO Місяць тому

      @@mariusespejo will be amazing to include DataLoader topic as well

  • @rawlespringer3917
    @rawlespringer3917 Місяць тому

    Nice video...do you have any idea on how to integrate this into Nestjs?

    • @mariusespejo
      @mariusespejo Місяць тому

      Thanks! Yep take a look at this: github.com/kazu728/nestjs-kysely

    • @rawlespringer3917
      @rawlespringer3917 Місяць тому

      @@mariusespejo thank you

  • @ardanys9652
    @ardanys9652 Місяць тому

    Goat

  • @redakker
    @redakker Місяць тому

    Thank you very much!

  • @kaiyuanliu4151
    @kaiyuanliu4151 Місяць тому

    Thanks for the sharing

  • @loribryant4999
    @loribryant4999 Місяць тому

    I dont like the sound of your voice man, but your are really freaking good

  • @julesruzindana-rukundo6254
    @julesruzindana-rukundo6254 Місяць тому

    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.

    • @mariusespejo
      @mariusespejo Місяць тому

      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

  • @santozard
    @santozard Місяць тому

    No link to the tool?

    • @mariusespejo
      @mariusespejo Місяць тому

      In the description! Eraser.io

  • @praweewongsa
    @praweewongsa Місяць тому

    awesome man, thank you