Front-end and Back-end Integration with React and Node.js [Full-stack Tutorial Part 3]

In this tutorial series, we’re exploring the core concepts and benefits of using GraphQL with Node.js and TypeScript architecture as we build a full-stack application together. So far, we’ve prepared our back-end to expose a GraphQL API – if you missed it, check out part one and two of the series. 

In this final chapter, we’re going to build our front-end and implement the user-facing features of our app. 

Helpful Resources for this Tutorial

In this tutorial series, we’ve covered the following parts: 

Part I: Project Setup, Data Modelling Process, and Testing. In part one of this series, we looked at an overview of the demo project that we’re building, set up the local environment, modeled our data and started testing it.

Part II: Integrating GraphQL with PostGraphile. In part two, we dove into some of the core aspects of GraphQL and implemented and tested the back-end features of our project.

You can find the source code for this project at: https://github.com/ScalablePath/full-stack-gql-ts-node-tutorial 

The final state of what we’re going to build in this part of the tutorial is available at: https://github.com/ScalablePath/full-stack-gql-ts-node-tutorial/tree/main/part-3/fe 

Project Recap: Building a Product Catalogue and Inventory Management Application

As a quick recap, we’re building a simple product catalog and inventory management application that: