This course is designed for anyone who wants to start building applications with React and GraphQL! In this course, we will build a recipe application from scratch with full authentication (sign up, sign in, sign out), as well as the ability to create, browse, search for, save, and delete recipes.
Full-Stack React with GraphQL and Apollo Boost
6h 54m 31s
English
Free
Full-Stack React with GraphQL and Apollo Boost is a 76-lesson 6 hours 54 minutes self-paced course by Udemy. This course is designed for anyone who wants to start building applications with React and GraphQL!
Course facts
- Lessons
- 76
- Duration
- 6 hours 54 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- Udemy
- Price
- Free
Building this project will give you the skills to create full-stack React and GraphQL applications from scratch for any theme you like!
This course presumes some experience with React, but if you are familiar with basic JavaScript concepts and have some knowledge of ES6 features, you will be able to follow along just fine.
We will begin by building a backend with Node.js using the Express framework, then learn how to integrate our backend with GraphQL. We'll learn about essential topics within GraphQL such as queries, mutations, schemas and resolvers, we'll learn the GraphQL syntax and work extensively with GraphiQL to test our queries and mutations, after which we will move onto working with React.
Then we will build a React application and then connect it to our GraphQL-Express backend using Apollo Boost. We'll cover all of the latest features of Apollo Boost and React Apollo, including ApolloClient, ApolloProvider/ApolloConsumer, as well as Query and Mutation components. On top of that, we'll learn how to refetch queries, use optimistic UI, nest query and mutation components, use fragments and much more!
On top of learning all about Apollo Boost, we will use essential React libraries such as React Router (version 4) to provide routing for our application, learn how to make protected routes, use essential lifecycle methods, reinforce proper state management practices, use helpful ES6 features such as the object and array spread operators and object and array destructuring, as well as cleaner React practices such as the property initializer syntax.
Once we are done creating our application, we will go through the process of deploying to Heroku. We will create a postbuild script that will allow us to deploy our full-stack app using the Heroku CLI.
As a bonus section, we're going to dive into some additional React component libraries (i.e. react-pose, react-spinners) that will give us the ability to further style and animate our application to make it production-ready, give users the ability to customize their recipes, and make our application responsive with CSS grid.
Requirements:
A basic familiarity with React
Some knowledge of JavaScript ES6 features is helpful, but not required
Who this course is for:
- Any developer who wants to learn to make full-stack web applications with React and GraphQL from scratch
What you'll learn:
- Make practical, production-ready full-stack applications with React and GraphQL
- Learn the GraphQL language, how to write queries and mutations both on the client and the server
- Learn React-Apollo in-depth, including Query and Mutation Components, Nested Components, Optimistic UI and Refetching Queries
- Understand how to use and set up Apollo Boost within React applications
- Implement essential web app features such as user authentication, searching, and route protection
- Authenticate your GraphQL application using JSON Web Tokens
- Learn advanced React patterns such as higher-order components and render props
- Discover many useful features of React Router 4
- Learn and reinforce effective state management patterns
- Animate your React app with popular component libraries such as React Pose
- Deploy and redeploy full-stack React applications to the web
Who teaches Full-Stack React with GraphQL and Apollo Boost? Udemy
Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.
Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.
What lessons are included in Full-Stack React with GraphQL and Apollo Boost?
- Space or K: play or pause
- J: rewind 10 seconds
- L: forward 10 seconds
- Left Arrow: rewind 5 seconds
- Right Arrow: forward 5 seconds
- Up Arrow: volume up
- Down Arrow: volume down
- M: mute or unmute
- F: toggle fullscreen
- T: toggle theater mode
- I: toggle mini player
- 0 to 9: seek to 0 to 90 percent of the video
- Shift plus N: next video
- Shift plus P: previous video
0:00 0:00
| # | Lesson Title | Duration |
|---|---|---|
| 1 | Project App Demo | 10:53 |
| 2 | GraphQL Introduction | 08:10 |
| 3 | Apollo / Apollo Boost Introduction | 03:05 |
| 4 | Install Packages our for Project | 01:59 |
| 5 | Git Clone and npm Install Dependencies | 01:08 |
| 6 | Initialize Express Server | 02:38 |
| 7 | Create MongoDB Atlas Database and Connect To It | 05:49 |
| 8 | Create Mongoose Schemas | 06:07 |
| 9 | Add Apollo-Express Middleware | 04:23 |
| 10 | Create GraphQL Schema | 04:34 |
| 11 | Add bodyParser Middleware and Root Query Type | 03:48 |
| 12 | Create First Mutation | 05:28 |
| 13 | Create First Query | 03:24 |
| 14 | Create React Application with create-react-app | 01:41 |
| 15 | Clean Up App.js and Add Components Folder | 02:46 |
| 16 | Add Client Dependencies and Set Up ApolloClient/ApolloProvider | 02:02 |
| 17 | Create Queries Folder, Write First Apollo Query | 05:06 |
| 18 | Add cors Middleware to Prevent Cross-Origin Errors | 02:06 |
| 19 | Add Skeleton CSS and Base Styles | 01:20 |
| 20 | Create Signup Mutation | 06:19 |
| 21 | Hash User Password with bcrypt | 03:34 |
| 22 | Add Routing with react-router-dom | 05:18 |
| 23 | Add Form to Signup Component | 03:07 |
| 24 | Manage Input State in Signup Form | 05:37 |
| 25 | Add Mutation Component to Signup Component, Write SIGNUP_USER Apollo Mutation | 05:43 |
| 26 | Add onSubmit to Signup Form, Run Signup Mutation on Client | 03:59 |
| 27 | Create Error Component, Clear State Upon Submit, Add Form Validation | 09:12 |
| 28 | Create Signin Mutation on Backend | 05:36 |
| 29 | Implement Signin Mutation on Client | 03:38 |
| 30 | Add Token to Local Storage, Put Token on Authorization Header | 06:27 |
| 31 | Verify JWT on Backend to Get Current User | 03:20 |
| 32 | Add getCurrentUser Query, Create withSession Component | 10:32 |
| 33 | Redirect Upon Signin/Signup, Refetch getCurrentUser Query Upon Redirect | 05:34 |
| 34 | Add Navbar Component, Add Search Component | 06:22 |
| 35 | Add Navbar Links For Auth User | 04:52 |
| 36 | Make Navbar Dynamic, Add Custom Heading | 03:33 |
| 37 | Implement Signout Button | 06:08 |
| 38 | Map Over Recipes, Create Recipe Item Component | 05:35 |
| 39 | Create Recipe Page, Get Recipe Id From Path | 06:08 |
| 40 | Add getRecipe Query in Backend, Run Query on Recipe Page | 06:07 |
| 41 | Output getRecipe Data to Recipe Page, Scaffold Add Recipe Form | 06:26 |
| 42 | Make AddRecipe a Stateful Component | 05:46 |
| 43 | Implement addRecipe Mutation on Client | 11:46 |
| 44 | Clear State and Redirect Upon addRecipe Mutation | 03:29 |
| 45 | Learning and Implementing Optimistic UI | 10:27 |
| 46 | Create searchRecipes Query on Backend, add Apollo Query to Search Component | 07:59 |
| 47 | Index Recipe Fields, Perform Search Query on Input Change Event | 08:59 |
| 48 | Add SearchItem Component | 02:51 |
| 49 | Add UserInfo Component to Profile Page | 09:48 |
| 50 | Add UserRecipes Component to Profile Page, Implement getUserRecipes Query | 07:47 |
| 51 | Add Route Protection with withAuth Component | 09:00 |
| 52 | Add and Implement deleteUserRecipe Mutation | 06:53 |
| 53 | Add Optimistic UI to deleteUserRecipe Mutation | 05:13 |
| 54 | Add refetchQueries to deleteUserRecipe Mutation | 02:04 |
| 55 | Add refetchQueries to addRecipe Mutation | 02:08 |
| 56 | Provide Default Text for User Without Recipes | 01:27 |
| 57 | Create LikeRecipe Component and Hide If Not Auth | 04:06 |
| 58 | Add and Implement likeRecipe Mutation | 08:07 |
| 59 | Develop Client-side Logic to Properly Toggle Like | 05:40 |
| 60 | Create and Implement unlikeRecipe Mutation with Optimistic UI | 09:43 |
| 61 | Prepare for Deployment | 04:13 |
| 62 | Use Fragments to Clean Up Queries | 05:04 |
| 63 | Deploy to Heroku | 12:49 |
| 64 | Add Additional CSS to Project | 01:50 |
| 65 | Adds imageUrl field on Recipe model and imageUrl input in addRecipe | 04:45 |
| 66 | Display Recipe Image on Home Page, Build Card | 04:37 |
| 67 | Style Recipe Page | 05:31 |
| 68 | Add CKEditor Component to AddRecipe Page for Formatted Instructions | 05:54 |
| 69 | Intro to React Pose Animation Library | 07:26 |
| 70 | Add React Pose Animation to Home Page | 07:18 |
| 71 | Add Spinners When Loading | 05:03 |
| 72 | Style Searchbar and Redeploy | 04:17 |
| 73 | Add Update Button, Make UserRecipes Stateful Component | 02:53 |
| 74 | Create Edit Recipe Modal | 06:46 |
| 75 | Populate Edit Recipe Modal | 04:53 |
| 76 | Create updateUserRecipe Mutation, Execute on Client | 08:25 |
Recommended next
What courses are similar to Full-Stack React with GraphQL and Apollo Boost?
-
ClassicLearn React 19 with Epic React v2
By: Kent C. DoddsReady for the React 19 revolution? The most in-demand JavaScript framework has received a major update! You are already familiar with React, but in React 19 the26h 51m4/5 -
Updated 3y agoNestJS GraphQL - Code-first approach
By: Learn NestJSGet up to speed with the GraphQL Code-first approach with NestJS. Master GraphQL fundamentals and essentials concepts behind creating your own enterprise-grade1h 55m5/5 -
Updated 2y agoTesting React with Jest and Testing Library
By: UdemyReact Testing Library has become an extremely popular option for testing React, and with good reason! This detailed, comprehensive course7h 41m -
Updated 2y agoMaster Laravel with GraphQL, Vue.js and Tailwind
By: UdemyLearn modern and most up to date development tools in your web developer toolchain. I'll let you see how modern PHP is these days. First off, the power of the L17h 48m -
Updated 2y agoFullstack ASP.NET Core and React Masterclass | Learnify
By: Fullstack.ioLearnify is a self-paced, online Masterclass, where you will master ASP.NET CORE and React by building a practical, real-world application from scratch.20h 40m0/5 -
Updated 2y agoMERN Stack Web Development with Ultimate Authentication
By: UdemyLearn how to build a full MERN app with clear and safe auth. You work with JWT, roles, and deploy the project to a live server.9h 24m -
Updated 2y agoReact Node FullStack - Ecommerce from Scratch to Deployment
By: UdemyLearn to Deploy your fully functioning Ecommerce app to production by using Digital Ocean cloud servers. Learn to add your own custom Domain name.16h 15m -
Updated 2y agoNode JS Cluster with PM2, RabbitMQ, Redis and Nginx
By: UdemyAs we all know, Node JS is single threaded event-driven JavaScript runtime. When we run any CPU intensive operation, Node will not be able to take an advantage2h 24m
More courses by Udemy
-
NewReact - The Complete Guide
React: The Complete Guide by Maximilian Schwarzmüller — original 2022 edition covering React hooks, Redux, Context API, Next.js basics.47h 42m5/5 -
Updated 3y agoComplete C# Unity Game Developer 3D
This is the long-awaited sequel to the Complete Unity Developer - one of the most popular e-learning courses on the internet!30h 34m -
Updated 3y agoNest.js Microservices: Build & Deploy a Scaleable Backend
Nest.js is an incredible backend framework that allows us to build scaleable Nodejs backends with very little complexity. A Microservice architecture is a popul5h 39m5/5 -
Updated 3y agoThe HTML & CSS Bootcamp 2023 Edition
Brand new HTML & CSS course, just released in February 2023 Check out the promo video to see the beautiful, responsive projects we build in this course!37h 18m5/5 -
Updated 3y agoMicroservices with Node JS and React
Event-Based Architecture? Covered! Server side rendering with React? Yep. Scalable, production-ready code? Its here!54h 13m5/5 -
FreeClassic100 Days of Code - The Complete Python Pro Bootcamp for 2023
Watch the 100 Days of Code Python Pro Bootcamp free: 100 daily projects covering Python basics, web scraping, data science, automation and GUI apps.58h 35m5/5
Frequently asked questions
What prerequisites are needed before enrolling in the course?
Prospective students should have a basic understanding of JavaScript and web development concepts. Familiarity with libraries like React and tools such as Node.js will be beneficial, although the course includes introductory lessons on these subjects. Basic knowledge of Git and npm will also aid in following along with the course setup and project installation processes.
What will I build during the course?
Students will develop a recipe application from scratch. The app includes full authentication features such as sign up, sign in, and sign out. Users can create, browse, search, save, and delete recipes. Key components like a dynamic Navbar, a recipe search feature, and user profile pages are also built to enhance functionality and user experience.
Who is the target audience for this course?
The course is targeted at developers who wish to learn how to integrate React and GraphQL in building full-stack applications. Whether you are an intermediate programmer looking to expand your knowledge of modern web technologies or a beginner wanting to understand how to handle authentication and state management in a full-stack environment, this course is suitable for you.
What specific tools and platforms are used in the course?
The course utilizes several tools and platforms including React for building the user interface, GraphQL for API management, Apollo Boost for client-side GraphQL operations, MongoDB Atlas for database storage, and Express for server-side handling. It also covers the use of libraries such as bcrypt for password hashing and jsonwebtoken for authentication.
How does the depth and scope of this course compare to similar courses?
This course offers a comprehensive approach to building a full-stack application with React and GraphQL, covering both client-side and server-side development. Unlike some other courses, it delves into authentication, state management with Apollo, and real-time UI updates with Optimistic UI. The course also provides practical, hands-on experience with a complete project build.
How much time should I expect to commit to this course?
The course consists of 76 lessons, and while the total runtime is not specified, students should anticipate spending a significant amount of time on both watching the lectures and applying the concepts through hands-on exercises. Time commitment will vary depending on your prior experience and the pace at which you learn, but expect to invest several hours each week.
What important topics are not covered in this course?
The course does not cover advanced topics such as server-side rendering with React, advanced GraphQL schema design, or deep dives into building CI/CD pipelines. Students looking to explore more advanced backend optimizations or to integrate additional front-end frameworks will need to seek further learning resources beyond this course.