Building a WhatsApp Clone with GraphQL, React Hooks and TypeScript

This tutorial guides you through building a WhatsApp clone using Hasura's real-time GraphQL APIs. The backend is built in two parts: firstly, the backend with Hasura GraphQL Engine and secondly, the frontend with React Hooks and TypeScript. The app's source code is available for reference. The tutorial begins by deploying Hasura on Hasura Cloud and setting up a PostgreSQL database via Heroku. It then moves onto creating the necessary tables in the database: users, chat, chat_users, and message. Relational modeling with constraints is also discussed to leverage the relational features of Postgres. The tutorial continues by defining relationships between these tables using Hasura's console. It then demonstrates how to create queries for various use-cases such as listing all chats, users/groups, and messages in a chat. Mutations are also covered for inserting chats/groups, messages, deleting chats, and updating user profiles. Real-time data is achieved using GraphQL Subscriptions where the client watches for changes in data and the server pushes data to the client whenever there's a change. The tutorial concludes by defining role-based access control permissions model for the app's user role. The next part of the tutorial will cover integrating these GraphQL APIs with the React frontend using Hooks, TypeScript, and GraphQL Code Generator.