DEV Community

Muneeb Hussain
Muneeb Hussain

Posted on

Build your framework based on the requirements of your projects (focusing on JavaScript/TypeScript)

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.

Top comments (1)

Collapse
 
reactadmin profile image
react-admin

Great resources, thanks for sharing! And thanks for the shoutout 😉