Welcome to Client-Side GraphQL with React!

Are you ready to dive into the exciting world of modern web development? In this course, we'll be exploring the powerful combination of GraphQL and React to build dynamic and efficient client-side applications. You can follow along and watch the course on frontendmasters!

Prerequisites

To make the most out of this course, it's recommended that you have a basic understanding of:

• JavaScript: Familiarity with JavaScript fundamentals such as variables, functions, arrays, and objects will be beneficial.
• React: While not required, having some prior exposure to React will help you grasp the concepts more quickly. If you're new to React, don't worry! We'll cover everything you need to know to get started.
• APIs: Understanding the basics of how APIs work and how to interact with them.

Course Format

This course is designed to be engaging and interactive, with a blend of:

1. Lecture: We'll start each section with a comprehensive lecture where we'll explain the core concepts and demonstrate how they're applied in real-world scenarios.
2. Practice: Following the lectures, you'll have the opportunity to practice what you've learned through hands-on exercises and coding challenges. This is where you'll solidify your understanding and gain confidence in your skills.
3. Real-World Application: Finally, we'll apply everything you've learned to build a real-world React application powered by GraphQL. You'll see how the concepts come together to create a seamless and efficient user experience.

By the end of this course, you'll not only have a firm grasp of GraphQL on the FrontEnd with React but also the skills and confidence to build your own client-side GraphQL applications from scratch.

Setup

• Git
  • Fork the repo and pull it down form GitHub
• Node.js v20+
  • Install all the node_modules with npm install
• Turso DB (free)

  • Create a Turso account

  • Follow the instructions to make a new DB (you don’t need a replica)

  • Follow instructions to download the CLI and authenticate

  • Using the CLI, generate a token for your db with this command turso db tokens create [your db name]

  • Create a .env file on the root

  • Add these env vars

    TURSO_CONNECTION_URL="your turso db url"
    TURSO_AUTH_TOKEN="your db token"
    

  • Push the schema to your Turso DB with this command npm run db:push