Build your framework based on the requirements of your projects (focusing on JavaScript/TypeScript)
Muneeb Hussain
Posted on June 1, 2024
Here's a detailed guide on building your framework tied to the requirements of your projects, focusing on JavaScript/TypeScript.
In the Backend Part:
- Utilize Express (API) or NestJS (Microservices) as your Backend Framework
- Language: TypeScript
- Database options include PostgreSQL with Drizzle or MongoDB with Mongoose
- UI for Database: Adminer for PostgreSQL or mongo-express for MongoDB
- Protect and authorize with JWT and implement OAuth2 strategies with Passport.js
- Hash passwords and confidential data with Argon2
- Consider Postman, Insomnia, or Swagger (OpenAPI) for API Documentation
- Handle background jobs with BullMQ and Redis
- UI for BullMQ: bull-board
- Schedule tasks with node-cron or Bree
- Send emails with Nodemailer and SMTP of your choice
- Add restrictions and a layer of security with Helmet and rate-limiter-flexible
- Data validation and types: Zod
- Configuration management: dotenv
- Need a message queue? Consider RabbitMQ
- Utilize piscinajs to Perform CPU intensive operations
- Need observables? Consider RxJS
- Support GraphQL through GraphQL Yoga and handle types with gqtx or Pothos then generate SDKs with GraphQL codegen
- Cache endpoints and responses with Redis
- Real-time Communication: Implement Socket[dot]io
- Testing with Jest + Supertest
- Containerize with Docker + Docker Compose
- CI/CD setup using GitHub Actions
- Monitoring and Logging tools: Prometheus, Grafana, and Winston
In the Frontend Part:
- Opt for TypeScript
- Choose React as your Frontend Framework
- Explore meta-frameworks like Next.js, Astro, Remix, or Vite
- UI Framework options: TailwindCSS + ShadCN + Aceternity UI, Mantine, Chakra UI, Ant Design, or Material UI
- For Data-fetching, consider Tanstack Query + Axios
- State Management with Zustand
- Form Handling using React Hook Form
- Add Animations through Framer Motion or GSAP
- Dashboard solutions: react-admin, Refine, or HorizonUI
Bonus Part:
- Enhance code formatting with Prettier
- Maintain code quality with Eslint
- Monorepo management with Nx
- Opt for esbuild as your Bundler
- Utilize pnpm as your Package Manager
- Consider PM2 as your Process Manager
- Explore Vite as your Build Tool
- For Container Orchestration, look into Kubernetes + Helm
- Server Configurations can be managed with Ansible
- Infrastructure as Code practices with Terraform
- Cloud Platforms like AWS and Cloudflare can be utilized
- Serve everything securely with automatic SSL with Caddy
Did I miss something? Write a comment.
💖 💪 🙅 🚩
Muneeb Hussain
Posted on June 1, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
webdev Mastering the Dependency Inversion Principle: Best Practices for Clean Code with DI
November 28, 2024