My Account →

A Premium Training Course from Wes Bos

Fullstack Advanced
React & GraphQL

Join 15,433 others learning to build Full Stack JavaScript Apps with React.js and GraphQL

Start Learning Now →

Build an online store with React and GraphQL

Just as React has transformed the way we build web applications, GraphQL is changing how we build APIs to query and mutate data.

With a focus on modern JavaScript and real world application, this course is a start-to-finish way to learn Full Stack Advanced React, GraphQL, Node.js and friends.

Join me as I show you how to build a full stack online store with some of today's top JavaScript technology.

Buy the Course →

Together we will build "Sick Fits", a full stack online clothing store complete with real credit checkout. Users can search, sell, add to cart and checkout their favourite items.

The application has five main models — Users, Items, Orders, CartItems, and OrderItems — all of which are relational and showcase the power of relational GraphQL Queries.

The app also includes many server side bits including JWT authentication, permissions, sending email, uploading images, and charging credit cards.

In addition to building both the frontend and backend of the application, we also spend the last ⅓ of the course Testing the React application.

For a full list of topics covered, see below.

Laptop Showing example Application we build in the course
iPhone Showing example Application we build in the course

The code in the application has been reviewed and influenced by some of our industry's best JavaScript developers.

Peggy Rayzis

Peggy is an engineering manager at Apollo where she worked on Apollo Client & Apollo Link State. She also delivers talks and leads workshops on GraphQL all around the world.

Johannes Schickling

Co-founder and CEO of Prisma. Johannes is responsible for building and pushing a lot of the JavaScript GraphQL tooling forward.

All the code for the course is open source and posted on Github

The Tech Stack of our Application

FrontendBackend
React.js

React.js

For Building The Interface along with:
  • Next.js for server side rendering, routing and tooling
  • Styled Components for styling
  • React-Apollo for interfacing with Apollo Client
  • Jest & Enzyme for Testing
Apollo Client

Apollo Client

For Data Management
  • Performing GraphQL Mutations
  • Fetching GraphQL Queries
  • Caching GraphQL Data
  • Managing Local State
  • Error and Loading UI States
  • Apollo Client replaces the need for redux + data fetching/caching libraries
GraphQL Yoga

GraphQL Yoga

An Express GraphQL Server For:
  • Implementing Query and Mutation Resolvers
  • Custom Server Side Logic
  • Charging Credit Cards with Stripe
  • Sending Email
  • Performing JWT Authentication
  • Checking Permissions
Prisma

Prisma

A GraphQL Database Interface
  • Provides a set of GraphQL CRUD APIs for a MySQL, Postgres or MongoDB Database
  • Schema Definition
  • Data Relationships
  • Queried Directly from our Yoga Server
  • Self-hosted or as-a-service
↔↔↔
GraphQL Example Query

GraphQL is a type-safe query language for APIs and a runtime for fulfilling those queries with your existing data.

What?! It's a replacement for (or addition to) your REST API and Ajax Calls.

GraphQL requires buy-in from both your client and your server — it then puts the power of requesting only what you want into the client and the business logic of finding and filtering that data into backend resolvers.

Specifically in this course it enables libraries that make caching, loading, error handling and pagination a breeze

Complex Relational Data queries and server-side mutations like signing up or checking-out are a snap with GraphQL.

GraphQL is just a standard and can be implemented in any language or framework.

Wes Bos

Meet Wes Bos

Wes Bos is a Full Stack Developer, Speaker and Teacher from Canada. He is a course creator, works as an independent web developer and is the co-host of Syntax - a popular web development podcast. Wes has taught over 500 students in 200+ classes and spoken at dozens of conferences around the world. Wes wrote his own bio in the third person for some reason.

Wes is the author of React For Beginners, ES6 for Everyone and Learn Node which together have sold over 55,000 copies. He is also the author of JavaScript30.com, CSSGrid.io, Flexbox.io and Command Line Power User, a set of free video series. 300,000 people have taken at least one of Wes' free video courses.

Web developers who want to expand their JavaScript, React and Node skills while learning all about GraphQL.

You should be already familiar with the basics of React - components, state, props, modules and event handlers. If you have taken my React For Beginners course or built a few things in React, you are in good shape.

You should be comfortable with both writing and debugging modern JavaScript including arrow functions, classes, promises, async+await and other commonly used parts of ES6. You of course can take my ES6 for Everyone to skill up on this.

The backend of the course is written in Node. Prior node knowledge is nice, but not required for this course as you should be able to keep up no problem. You can take Learn Node if you'd like to learn more.

This course requires no knowledge of GraphQL, Prisma, Databases, or testing React components

  • Anyone looking to learn the whys and hows of GraphQL
  • Web developers who want to get better at JavaScript
  • JS developers looking to advance their skills and career
  • Bootcamp Graduates (see the FAQ for a student discount!)
  • Front End Devs looking to go Full Stack
  • Existing Node.js developers looking to learn how GraphQL works with Node
  • Anyone who wants to get better at JavaScript and learns well from seeing both fundamental and advanced concepts in practice.

Not sure if it's for you?

100% money back if you don't think it's a good fit 💰

In each video, we learn and implement a concept into our application. Many of the concepts we return to over and over for different parts of the application, hitting and solving new problems each time.

As we build an entire full-stack application, this course covers a ton. Along with general JavaScript best practices, here are some of the things you can expect to learn:

  • React Best Practices
  • Server Side Rendering
  • Styled Components
  • Theming
  • Render Props
  • Routing
  • GraphQL Schema
  • Queries and Mutations
  • JSON Web Token (JWT)
  • Resolvers
  • Cache Management
  • Loading and Error States
  • Sending Email
  • Logic and Flow with Async + Await
  • Authentication and Permissions
  • Charging Credit Cards
  • Hosting and Transforming Images
  • Pagination
  • Forms in React
  • Animations
  • Third party React Components
  • Unit Testing
  • Mocking Components
  • Mounting vs Shallow Rendering
  • Deployment

👌 Video pacing is just right
fast enough to keep you interested without passing by or assuming any details.

Seriously, it won't put you to sleep - I'm even funny sometimes.

10Modules
68Videos
11Hours Building App
5Hours Testing

...and 236,837 words provided with the videos captions
Incremental, Referenceable and Easy To Digest

Each video breaks down a specific part of building a Node application and allows for quick referencing in the future. You can binge watch them all today or do a few each day during your lunch or on your commute.

Closed Captioning and Transcripts are provided for every video

    Module 1
    Introduction and Setup

  1. #1 — Editor Setup and Starter Files Installation (08:29)

  2. #2 — Sick Fits and the Tech Stack Behind It (10:30)

  3. #3 — An Intro to Next.js, Tooling and Routing (08:50)

  4. #4 — Custom _app.js Layout (12:25)

    5.

    Module 2
    CSS and Styled Components

  5. #5 — An Intro to Styled Components (11:19)

  6. #6 — Themes and Layout with Styled Components (18:51)

  7. #7 — Global Styling and Typography with Styled Components (10:50)

  8. #8 — Visualizing Route Changes (06:44)

  9. #9 — Fixing Styled Components Flicker on Server Render (04:18)

    10.

    Module 3
    Server Side GraphQL

  10. #10 — An intro to GraphQL (14:13)

  11. #11 — Getting Setup with Prisma (22:55)

  12. #12 — Getting our GraphQL Yoga Server Running (22:32)

  13. #13 — Our first Query and Mutation (11:40)

  14. #14 — Items Creation and Prisma Yoga Flow (26:07)

    15.

    Module 4
    Client Side GraphQL

  15. #15 — Setting Up Apollo Client with React (11:24)

  16. #16 — React Meets GraphQL (25:54)

  17. #17 — Creating Items with Mutations (29:50)

  18. #18 — Uploading Images (11:46)

  19. #19 — Updating Items with Queries and Mutations (25:42)

  20. #20 — Deleting Items (13:04)

  21. #21 — Displaying Single Items (12:33)

  22. #22 — Pagination (15:12)

  23. #23 — Pagination and Cache Invalidation (09:37)

    24.

    Module 5
    Accounts, Authentication and Permissions

  24. #24 — User Signup and Permission Flow (23:07)

  25. #25 — User Signup in React (12:13)

  26. #26 — Currently Logged In User with Middleware and Render Props (18:44)

  27. #27 — Sign in Form and Custom Error Handling (16:56)

  28. #28 — Sign Out Button (06:21)

  29. #29 — Backend Password Reset Flow (19:59)

  30. #30 — Frontend Password Reset Flow (14:56)

  31. #31 — Sending Email (12:13)

  32. #32 — Data Relationships (05:47)

  33. #33 — Creating a Gated Sign In Component (05:17)

  34. #34 — Permissions Management (22:34)

  35. #35 — Updating Permissions in Local State (12:44)

  36. #36 — Updating Permissions on the Server (17:30)

  37. #37 — Locking Down DeleteItem Permissions (06:38)

    38.

    Module 6
    Shopping Cart

  38. #38 — Creating our cart in React (05:29)

  39. #39 — Apollo Local State Queries and Mutations (12:30)

  40. #40 — Server Side Add To Cart (17:04)

  41. #41 — Displaying Cart Items and Totals (20:00)

  42. #42 — Removing Cart Items (10:45)

  43. #43 — Optimistic Response && Cache Updates with Apollo (07:55)

  44. #44 — Animating our Cart Count Component (13:20)

  45. #45 — Dealing with Deleted Items in CartItems (03:01)

    46.

    Module 7
    Advanced UI and Code Quality

  46. #46 — Cleaning Up This Render Prop Mess (06:20)

  47. #47 — Search Dropdown Autocomplete (18:13)

  48. #48 — Autocomplete with Downshift (13:08)

    49.

    Module 8
    Credit Card Checkout

  49. #49 — Credit Card Processing with Stripe Checkout (16:45)

  50. #50 — Charging Cards on the Server Side (17:50)

  51. #51 — Saving Orders to the Database (13:14)

  52. #52 — Displaying Single Orders (17:57)

  53. #53 — Orders Page (14:19)

    54.

    Module 9
    Testing

  54. #54 — Testing with Jest and Enzyme Introduction (07:44)

  55. #55 — Unit Testing 101 (16:30)

  56. #56 — Mocking 101 (09:47)

  57. #57 — First Tests and Shallow Rendering (14:38)

  58. #58 — Snapshot Testing (15:18)

  59. #59 — Testing and Mocking Apollo Queries (19:40)

  60. #60 — More Apollo Query Testing (20:55)

  61. #61 — Testing Pagination (15:18)

  62. #62 — Testing Mutations (25:47)

  63. #63 — More Apollo Client Mutation Testing (15:21)

  64. #64 — Testing our Cart (25:22)

  65. #65 — Testing Order Components (15:31)

    66.

    Module 10
    Deployment

  66. #66 — Deploying a Prisma Server to Heroku (06:49)

  67. #67 — Deploying Yoga Server to Heroku or Now (11:47)

  68. #68 — Deploying Frontend to Heroku and Now (09:43)

Starter Course

  • Access to the first 4 Modules / 23 HD Video Tutorials
  • Stream course from any device
  • Source Code — Completed Examples and Exercises
  • Unlimited Updates + Never Expires
  • SlackExclusive access to the Advanced React Slack Chat Room where you can ask for help and chat with other learners
Get the Starter Course$89

Join 15,433 Others!

Master Package

  • Access to all 10 Modules / 68 HD Videos — see above for a full listing of topics
  • Stream and Download DRM-free files from any device
  • Includes Accounts, Authentication and Permission
  • Sending Email, Pagination, Shopping Cart, checkout
  • All Testing and Deployment Videos
  • All Source Code — Completed Examples, Exercises, Webpack files and npm scripts
  • Unlimited Updates + Never Expires
  • SlackExclusive access to the Advanced React Slack Chat Room where you can ask for help and chat with other learners
Get The Master Package$139

15,433 already sold!

Team License Packages

With a team license you can buy a number of spots to allocate to employees. The spots do not expire and you can fill the spots via the dashboard whenever you like.

Perfect for on-boarding new hires, interns and contractors to your tech stack.

The team license includes everything in the Master Package above. Spots cannot be re-assigned once used.

For larger groups or for on-site training contact me for more info!

All prices in USD

I don't like your cool font

Do these videos expire? Is this a monthly cost?

Nope and nope. Pay once, have them forever.

Cool, but I would have used with and then and with a hint of ITS THE BEST!!!

I've spent many months evaluating many different setups, boilerplates, packages and approaches to building a full stack application. Why no doubt there are many fantastic options, I found this set of technologies to be the best fit - they are all extremely well supported, actively developed and most importantly are the tech that I'd reach for when building a new application.

It's important to note here that this course isn't just teaching you how to hook together a few packages - you are learning to think in and build full stack React and GraphQL applications. The ideas behind this course transcend all packages!

Do you provide a certificate of completion?

Sure do! In your course dashboard you can download an official certificate of completion that can be used to be reimbursed by your employer or land that dream job you are applying for.

Can I put the code on GitHub? Can I put this app in my portfolio?

Absolutely - I just ask that you don't create your own course teaching with this app. Otherwise, go nuts! You can credit my course if you like, but it's not required as you might be using this app to get a job :)

What other courses do you have?

I've got a bunch of free and premium web development courses — check out the whole listing over at wesbos.com/courses.

I lost, deleted or never got my welcome email! What do I do?

Log into your account, or create an account with the same email you used to buy the series.

What format are the videos? How do I watch them?

Once you buy a package, you will be mailed access to your account dashboard where you can stream all the videos. Buyers of the Master Package will also be able to download them for off-line viewing. All the videos were professionally recorded at 1920×1080 with top quality audio — no pops, echoes, chair squeaks, breathing or gross mouth sounds here!

What if I'm not thrilled?

I want to make sure you get real value out of this so I only want your money if you are happy with the product! If you aren't satisfied, please send an email to [email protected] with a copy of your welcome email and I will refund you.

Do you offer a student discount?

Absolutely! Fill out this form with some proof that you are a student and I'll send you a discount code. This applies to anyone in any type of schooling, including evening classes and coding bootcamps!

If you have received a student discount for a previous product, it's the same code 😉.

What theme do you use? What is that font? What terminal do you use? What kind of bread do you buy?

I've detailed my entire setup over here, feel free to tweet me with any more questions you have about setting things up.

I have another question!

Sure - email me at [email protected] or give me a call 416-833-3641!

Are you ready to improve your JavaScript Skills?

© Wes Bos ∞

Don't Copy Me 😘

×

React For Beginners

Package

Secure SSL Payment via Stripe

Secure SSL Payment via PayPal