In this fullstack javascript tutorial we are going to try and clone the TeamSeas website using GraphQL, Prisma, NestJS, ReactJS, Chakra UI, and Formik!! We're going to learn everything we need to build an API from scratch, have that connect to a database, develop GraphQL queries, mutations and subscriptions. Then finally we build a new UI from the group up using React to attempt and clone the TeamSeas website, we'll learn how to connect and query a GraphQL API and even make realtime subscriptions!

Code Repo: https://github.com/mariusespejo/team...
Donate at: https://teamseas.org/

#TeamSeas #webdev #javascript

00:00:00 Preview
00:00:24 What we will cover
00:00:29 #TeamSeas Intro
00:01:57 Feature’s we’ll build
00:05:36 Tech stack
00:06:43 Create new Nest application
00:07:24 Set up GraphQL integration
00:09:45 Apollo Sandbox
00:10:45 Generating typings from GraphQL schema
00:12:38 Generate Donations resource
00:17:00 Trying Apollo Sandbox
00:19:43 Building out the Donation schema
00:21:12 Adding Scalar for timestamps
00:24:13 Set up prisma and database
00:25:37 Donation database table (prisma) schema
00:28:29 Database migration
00:29:45 Seeding the database
00:32:02 Generating Prisma Client
00:33:15 Running nom scripts in parallel with concurrently
00:35:28 Implement donations findAll query
00:35:55 Create PrismaService
00:39:18 Quick break
00:40:00 Implement findOne query
00:42:41 Implement createDonation Mutation
00:48:01 Improve donations findAll to include orderBy and sorting
00:53:32 Enable Validation with classvalidator
01:01:10 Implement totalDonations query
01:01:46 Implementing Subscription
01:12:02 Testing our Subscription
01:13:05 Quick pause
01:13:22 CORS and updating the port
01:14:22 Initialize React app with Chakra UI template
01:16:14 Overview of Chakra style props and default theme
01:21:31 Installing fonts and extending the theme
01:25:05 Creating animated counter
01:27:29 Setting up URQL and WS client (subscriptions)
01:30:52 useQuery to get total donations
01:32:11 Enabling subscription to get total updates
01:35:21 Start implementing Leaderboard
01:53:42 Performing Donations query for leaderboard
01:57:00 Using Radio to change ordering and sorting
02:00:42 DonationsWizard, multistep pagination
02:04:35 Implementing Count / pounds selection
02:16:43 Maintaining state across the pages/steps
02:20:39 Implementing Details Form with Formik
02:24:01 Creating custom Formik Fields
02:28:51 Form Validation using Yup
02:33:22 Triggering a mutation on form submit
02:36:00 Showing confirmation
02:36:55 Testing everything we’ve built so far
02:37:29 Breaking down what happened
02:38:00 URQL cache invalidation
02:39:37 One more test
02:39:51 Wrap up and summary
02:41:05 Join #TeamSEAS at teamseas.org