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 3rd 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 🥳
Top comments (0)