Technical Test for React Developer
This project is a technical test for a React Developer position. It is a dashboard application built with Next.js and TailwindCSS. The application is a micro-frontend architecture with Module Federation. The application is a dashboard that displays data from a mock API. The dashboard is a dynamic dashboard with charts and graphs.
Stack, Libraries, and Tools
This project uses the following stack:
- Library: React
- Framework: Next.js
- Architecture: Micro-Frontends
- Concept: Module Federation
- Language: TypeScript
- Auth: NextAuth.js
- Deployment: Vercel
- Styling: TailwindCSS
- Components: MUI and shadcn/ui
- Linting: ESLint
- Formatting: Prettier
- Version Control: Git
- Repository Hosting: GitHub
- Data fetching: SWR
Conclusions
- Limitation in Next.js App Router:
The current version of Next.js App Router does not support Module Federation. You need to opt for an older version of Next.js and use a plugin designed to integrate Module Federation with Next.js.
- Webpack configuration:
Configuring Webpack to expose and define remotes is relatively simple. It is recommended to perform build tests to identify possible incompatibilities with Next.js or other component libraries or Hooks.
- Development with Tailwind CSS:
Tailwind CSS makes development easier by providing a smooth experience. When exposing remotes for use in the host/shell application, you face a challenge: class references in the build can break. Two possible solutions are: Use safelist to maintain the necessary classes. Import the Tailwind CSS module into each component file to generate the necessary classes and allow the host/shell to reference them correctly.
- Integration Experience:
The combination of Next.js, Module Federation and Tailwind CSS offers an interesting experience during development. Despite the attractive integration, it is suggested to consider other stacks for projects in production.
- Recommendation from the Creator of Module Federation:
In conversation with Zack Jackson, creator of Module Federation, he mentions that Next.js presents exceptional difficulties in terms of maintenance due to problems with Vercel in relation to MF.
The recommendation to carefully consider these difficulties provides perspective on the potential limitations in choosing this technology mix for projects beyond development.
Congratulations
Thank you for taking the time to view this project. I hope you liked it and found it inspiring for your projects.