An open-source full-stack example app made with React 16.7 (Hooks & Suspense), TypeScript, GraphQL-Subscriptions/Codegen/Modules and PostgreSQL

You might have seen it around already — an open-source WhatsApp Clone tutorial; a project which was originally started in 2015 by Urigo based on Angular-Meteor and Ionic, and have been throughout different incarnations ever since.

This time around, I'm happy to announce that a new version of the WhatsApp Clone is coming, and it's based on React 16.7 (Hooks & Suspense), Styled-Components, Material-UI, TypeScript, Apollo, GraphQL-Subscriptions/Codegen/Modules, PostgreSQL and TypeORM.

Click me to go to the tutorial page

A more in depth step-by-step tutorial is expected in the near future

What is it good for?

This app was built with all the latest and hottest technologies out there. The purpose is simple — it should be a guideline for building a proper app, thus we thought very carefully regards the design patterns and architecture used in it, plus, we made sure to cover all communication methods with a GraphQL-back-end in different variations (query, mutation, subscription). This way whenever you're looking to start a new app, maintain an existing one or upgrade your dev-stack, the WhatsApp-clone can be a great source to start with! It's full stack and has a complete flow.

Why did we choose this dev-stack?

React, GraphQL, Apollo, PostgreSQL and TypeScript for obvious reasons — they are backed by a strong ecosystem that grows rapidly. These technologies can be used in endless variations, and there's no one way which is the most right of doing so, but we chose a way that makes the most sense for us and that we truly believe in when it comes to building apps. We've connected it all with TypeORM, GraphQL-Code-Generator, GraphQL-Modules for the following reasons:

• The GraphQL back-end was implemented using GraphQL-Modules where logic was splitted into feature based modules. GraphQL-Modules is a library which provides you with the ability to manage and maintain your GraphQL schema in a scalable and reusable way. Not once nor twice I have seen people who struggle with that and get tangled upon their own creation, and with GraphQL-Modules where you have a very defined structure, this problem can be easily solved. You can read more in this series of 7 blog posts about it.
• Every GraphQL/TypeScript definition was automatically generated with GraphQL-Code-Generator using a single command call. There's no need to maintain the same thing twice if it already exists in one way or another. This way you don't have to write TypeScript type definitions for your GraphQL documents (queries, mutations and subscriptions), GraphQL resolvers and GraphQL types.
• The new version of React 16.7 was used with Hooks and Suspense and 100% of the project is made out of function components. The front-end communicates with the back-end using only hooks and there was no use in GraphQL-React components, which makes async tasks look a lot more readable with no extra indentations.
• We used TypeORM to correctly split the logic of the entities in the database and define the relationships between them. ORMs are controversial these days, but they can help a lot in some cases and we thought a good example could be valuable to the community.

What to expect?

• Basic authentication.
• Image uploading with Cloudinary.
• Live updates with GraphQL Subscriptions.
• 100% function components with React Hooks.
• GraphQL communication with react-apollo-hooks.

This can be extremely useful for those who have little to no background in one of the technologies in our dev-stack. We will let you know when it's ready and will publish it due time, until then be sure to follow our blog and the Github repositories.

Influence

We want to hear your opinions!

Should we choose another library and technology over another? Could we write the code better/cleaner? Should we add a specific feature to the app? We want to hear it all!

Please tell us now so we could integrate your feedback on the tutorial itself!

We want to keep evolving the stack and as the tutorial would be based on git commits, we want to create the same clone with different tech-stacks and compare them on this real app using code diffs.

Everything is completely free and open source, and we want your help and (not financial) contribution!

Best place would be to open an issue or create a PR on the repositories:

• Server — urigo/WhatsApp-Clone-Server
• Client — urigo/WhatsApp-Clone-Client-React

Again, all types of feedback is welcome, write freely!

See you in the tutorial!