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.
A more in depth step-by-step tutorial is expected in the near future
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.
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:
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.
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:
Again, all types of feedback is welcome, write freely!
See you in the tutorial!
Want to hear from us when there's something new? Sign up and stay up to date!Recent issues of our newsletter