Choose Your Desired Option(s)
Overview
In this tutorial, we will create a FullStack Twitter Clone that allows users to create and post tweets, follow other users, like, and view their own profile and the profiles of other users.
Tech Stack
- Node.js for our backend code which would be running graphql server inside node.js environment.
- GraphQL for our API, which provides a flexible and efficient way to define our data model and query it.
- Prisma ORM for our database ORM, which provides a type-safe and easy-to-use interface for interacting with our PostgreSQL database.
- PostgreSQL as our database, which is a powerful and reliable relational database system.
- Supabase for hosting and managing cloud postgresql db.
- Redis for query caching on server side and increase query speeds
- Google OAuth for Signin with Google
- JSON WEB TOKENS for authentication
- Next.js for our frontend, which is a popular framework for building React applications with server-side rendering and optimized performance.
- TailwindCSS for styling and re-useable components.
- Codegen for typesafe graphql queries and mitations.
- Graphql-Request as API client for client server communication
- React-Query for client side data caching and query caching
- Typescript to maintain code quality and write type-safe code.
- Amazon Web Services for storage and deployments.
Prerequisites
To follow along with this tutorial, you will need the following:
- Basic programming knowlege
- Min 6 months of experience with Node.js and Express
- Beginner level experince with React and NextJS
- Overview of Graphql (Optional)
Learning Outcomes
After this course, learners would have strong hand-on over several latest technologies, tools and programming practices such as:
- How to use Graphql with Express
- How to use PrismaORM with Node and PostgreSQL
- How relational db’s work and how to make relations in SQL database
- Complex Joins and Lookups in SQL using Prisma ORM
- Client Query Caching with React Query
- On Demand Query Invalidation
- Server Side Data Fetching and Rendering with Next.js SSR
- How to Implement OAuth from Scratch
- Creating Custom Hook Wrappers around React Query
- Redis Caching to increase query speeds
- Configuring and Setting up Custom S3 Bucket Policy on AWS
- Uploading Media to AWS S3 using Pre-Signed URLs
- Working in Typesafe code check with Typescript and Codegen
Share Now!