Epic Todo ✅

Implement a full-stack todo application in different tech stacks using different tools and techniques

Aim ✨

To make a fullstack todo application with different variations of backend api's (REST, Graph, RPC) and frontend libraries/frameworks (React, react-native, Nextjs, graphql-client) using different tools and techniques.

Overview 📚

• Build different versions of client using react, react-native, nextjs
• Use different client-side tools react-query, axios, redux, redux-saga, mobx, custom hooks, graphql-client, react-bootstrap, tailwind-css, chakra-ui
• Use different rendering strategies CSR, SSR, ISR (all using nextjs)
• Build different versions of server api using REST (MVC architecture), Graph (graphql), RPC (tRPC/gRPC)
• Use different server-side tools joi, yup, zod, jwt, express-jwt, bcrypt, argon2d, morgan, express, busboy, formidable, multer, helmet, winston
• Use different databases postgres (SQL), mongodb (noSQL)
• Use different ORMs prisma, mongoose, typegoose
• Use firebase tools firebase-auth, firestore
• Implement basic CI/CD using github-actions
• **Setup horizontal scaling with pm2, nodejs-built-ins (fork, process, worker)
• **Use message-queues rabbit-mq, bullmq
• **Use server-side caching redis
• **Use websockets with socket.io

PS: All items marked with (**) will be low priority

Procedure 👨‍🔬

• Different versions of frontend todo-client using different libraries mentioned above.
• Fetch data using different tools mentioned above.
• Experiment with different client-side techniques like lazy-loading, Suspense, code-splitting and component-injection.
• Experiment different techniques in server-side like refresh-token/access-token, email verification, logging, clusters, thread-workers, caching, sticky-sessions.
• Enable basic CI/CD for projects.
• All different variations of stack will be in different branches of this repository.

Outcome 🎯

• Learn these different tools and tech stacks.
• Experiment with a variety of 3^rd party services like firebase-auth and firestore, other ecosystem tools.
• To Become a better full-stack engineer.

Why a todo-app ⚛️

• Its a dynamic application which requires GET, POST, PUT/PATCH, DELETE operations in terms of database operations.
• We can build this app with many variations and the codebase size will be manageable by a single or small group of devs who want to learn and explore hands on.
• We can experiment and prototype rapidly since the application logic is simple.
• We can then increase the engineering complexity and not feel lost due to simple nature of application.

**Attention ( for developers ) 🛑

This repository code is based in the nodejs and javascript ecosystem, we will mainly work with javascript and add typescript functionality in a different branch.

Visit the repository on Github Epic-Todo

PART I 👉 Full-stack todo app built using react, express and mongodb (coming soon!)

Let me know if you'll be following along with the progress down in the comments 🥳