Skip to content
Hallway
0:00 / 0:00

#graphql#next.js#mikrorm

Fullstack React GraphQL TypeScript Tutorial

Ben Awad

491K subscribers • 5 videos on Hallway

YouTube

Intermediate. Assumes working knowledge.

1.3M views6 years ago6 recommendations

Web developmentDatabases and dataReactTypeScriptNode.js, Deno and Bun

Ben Awad teaches how to build and deploy a full-stack Reddit clone from scratch using React, TypeScript, GraphQL, Node.js, and PostgreSQL.

A fullstack project course that teaches you how to build a backend and frontend from scratch then deploy it. Includes the follow technologies: - React - TypeScript - GraphQL - URQL/Apollo - Node.js - PostgreSQL - MikroORM/TypeORM - Redis - Next.js - TypeGraphQL - Chakra Code: github.com/benawad/lireddit Links from video: Learn vim: benawad.com/vim How to install PostgreSQL: google.com/search?q=how+to+install+postgresql How to install Redis: google.com/search?q=how+to+install+redis Argon2 vs bcrypt: security.stackexchange.com/questions/193351/in-2018-what-is-… React snippets: gist.github.com/benawad/1e9dd01994f78489306fbfd6f7b01cd3#fil… Simple pagination: github.com/FormidableLabs/urql/blob/main/exchanges/graphcach… Node.js Docker: nodejs.org/en/docs/guides/nodejs-docker-webapp/ Next Apollo: github.com/adamsoffer/next-apollo/blob/master/src/withApollo… Intro Node/TypeScript Setup MikroORM Setup Apollo Server Express Setup MikroORM TypeGraphQL Crud Register Resolver Login Resolver Session Authentication Sessions Explained Next.js + Chakra URQL Basics GraphQL Code Generator Register Error Handling NavBar URQL Cache Updates Logout Next.js URQL SSR Forgot Password Change Password Why Switching to TypeORM Switching to TypeORM Many to One Global Error Handling Next.js Query Params URQL Pagination Start Adding Mock Data Chakra Styling More URQL Pagination Fix Mock Data URQL Pagination Has More GraphQL Fetching Relationships GraphQL Field Permissions Many to Many Invalidate Queries Upvote UI Change Vote Write Fragments Vote Status SSR Cookie Forwarding Single Post Delete Post Edit Post DataLoader Cache Reset Deploy Backend Docker Environment Variables DB Migrations Docker Hub DNS Deploy Frontend Fix Cookie Switch to Apollo #benawad #fullstack #tutorial ---- Checkout my side projects: If you're into cooking: mysaffronapp.com/ ---- Join the Discord: discord.gg/Vehs99V ---- Patreon: patreon.com/benawad ---- Follow Me Online Here: Twitter: twitter.com/benawad Medium: medium.com/@benawad GitHub: github.com/benawad Twitch: twitch.tv/benawad Facebook: facebook.com/benawad97/ LinkedIn: linkedin.com/in/benawad/ Instagram: instagram.com/benawad97 TikTok: tiktok.com/@benawad ​ ​ ---- Follow me online: voidp

Why it's here

6 people recommend this

What people say. Highly recommended as a comprehensive, in-depth tutorial for building a complete full-stack TypeScript and GraphQL application.

u/-S3pp-in r/typescript • Recommends

On “Solid TypeScript + ExpressJS Tutorial”

Ben awad’s 14hr long video on react/express with typescript and graphql is pretty good link to this video he uses mikrorm but refractors it later to typeorm and use Postgres for dB and also Redis I believe
12View on Reddit

u/up_yer_kiltin r/typescript • Recommends

On “Creating an express router in TypeScript”

IMO, classes get messy. Keep it functional. You’ll create something like App / Server / Router classes and find yourself recreating the same interfaces already provided by express. Create a basic typescript project and install express and @types/express and play around with interfaces. I usually export a router per file. Ben Awad’s super video has an example near the beginning: link to this video
9View on Reddit

u/Ricen_in r/typescript • Recommends

On “How to create a project with express+react+typescript?”

You aren't going to get a hard fast "official" way. ~~Here is a video long course that covers setting up a complete Typescript project on frontend and backend. It also covers GraphQL that you could just ignore.~~ It might be a bit much for what you are asking. Stick with the two I linked below then come back to this one if it interests you. Typescript w/ React and Typescript with Node.js
2View on Reddit

u/precision16918in r/typescript • Recommends

On “PERN stack with Typescript?”

link to this video This is a very good react graphql typscript postgresql nodejs as backend tutorial made by Ben awad 14 hrs course Replying to HotelStrong4102's submission: |I have the entirety of the last 2 days searching for a tutorial for a full-stack app with React--Typescript front end, backend using Node.js/Express (using Typescript) and Postgres database. I am thinking of using sequelize or typeorm as ORM. | |Any suggestions on where to get started or resources i can reference? Enter your reply below this instruction block, an empty message will abort the comment. INSTRUCTIONS-->
2View on Reddit

u/Hazork_in r/typescript • Recommends

On “Example typescript project repos?”

This benawad real life coding video comes to the rescue once again link to this video
1View on Reddit

u/Simmsenin r/node • Recommends

In-depth 14 hour Fullstack React/GraphQL/TypeScript Tutorial
0View on Reddit

u/wrtbwtrfasdfin r/typescript • Mentions

On “My first TypeScript project: a simplistic, sharable list app made with React, TailwindCSS, Apollo Server/Client, TypeGraphQL, TypeORM, and more. Free to use and open source”

> next project with MikroORM because its being actively maintained Getting a flashback to 1 year ago with link to this video
1View on Reddit