• Technical Test: React Developer with Next.js and TailwindCSS
  • Table of Contents
  • Description
  • Screenshots
  • Requirements
  • Installation / How to run
  • Environment Variables
  • Pages description
  • Project Structure
  • Todo List
    • Task 1: Advanced Next.js Architecture (30 points)
    • Task 2: Advanced Component Development (35 points)
    • Task 3: Large Dataset Handling (25 points)
    • Task 4: Performance Optimization and Server-Side Rendering (25 points)
    • Task 5: Advanced Features (30 points)
    • Task 6: Testing and Documentation (15 points)
  • Deployment
  • Stack, Libraries, and Tools
  • Conclusions
  • Contribute
  • Author of the project
  • License

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.

• Node: v20.10.0
• Npm: v10.3.0
• Module-federation/nextjs-mf: v6.7.1
• Next: v13.4.7
• Tailwindcss: v3.0.23

It's a demo, so everything is in the same repository. However, it's a good practice to have each micro-frontend in a different repository and deploy them separately, using run-time integration, for example.

So to install it you just need to clone the repository and run the following command:

Install dependencies

npm install

To run the samples in development mode, run the following command:

npm run dev

To run the samples in production mode, first build the samples using the following command:

npm run build

Then, run the following command to serve the samples:

npm run start

The environment variables are located in the .env file. The following environment variables are required:

• GITHUB_ID: GitHub OAuth App Client ID.
• GITHUB_SECRET: GitHub OAuth App Client Secret.
• NEXTAUTH_URL: The URL of the NextAuth.js server.
• NEXTAUTH_SECRET: A secret used to encrypt session cookies.
• ANALYTICS_REMOTE_URL: The URL of the analytics micro-frontend.

• /: The homepage of the application with login and signup buttons.
• /404: The 404 page of the application.
• /dashboard: The dashboard page of the application. (Protected)
• /dashboard/website-analytics: The website analytics page of the application. (Protected)
• /dashboard/clients: The clients page of the application. (Protected)

react-nextjs-tailwindcss-microfrontends/
│
├── apps/
│   │
│   ├── remote/
│   │   ├── public/
│   │   ├── pages/
│   │   ├── lib/
│   │   ├── components/
│   │   ├── styles/
│   │   ├── ...
│   │   ├── tailwind.config.js
│   │   ├── next.config.js
│   │   └── tsconfig.json
│   │
│   └── host/
│       ├── cypress/
│       ├── public/
│       └── src/
│            ├── assets/
│            ├── components/
│            ├── pages/
│            ├── lib/
│            ├── styles/
│            ├── ...
│            ├── tailwind.config.js
│            ├── next.config.js
│            └── tsconfig.json    
└── docs/

• Implement a micro-frontends architecture using Module Federation.
• Integrate an external analytics module as a federated module.
• Secure routes using NextAuth.js for authentication.

Animated UI Components (20 points)

• Develop a dynamic dashboard component with charts and graphs to visualize data.
• Use a data visualization library (e.g., D3.js, Chart.js) for rendering charts.
• Implement smooth transitions and interactions within the dashboard.

Custom Hook (15 points)

• Create a custom hook for handling complex state management scenarios (e.g., data fetching, caching, and real-time updates).
• Use the hook in at least two different components to showcase its versatility.

• Fetch and display a large dataset (e.g., 10,000 records) efficiently on the homepage.
• Implement virtualization or pagination to handle the large dataset without compromising performance.
• Optimize the data fetching mechanism for minimal server load.

• Optimize the application for mobile performance using Google Lighthouse metrics.
• Implement server-side rendering (SSR) for critical pages to improve the initial loading time.
• Ensure efficient resource loading using strategies like pre-fetching or pre-loading.

Real-time Collaboration (15 points)

• Implement real-time collaborative editing for a shared document.
• Utilize a technology like Firebase Realtime Database or Socket.io for real-time updates.

Advanced Styling (15 points)

• Implement a theming system with multiple theme options.
• Integrate Tailwind CSS JIT for optimizing the styling workflow and reducing the final bundle size.

• Write end-to-end tests using Cypress for critical user flows.
• Provide comprehensive documentation covering architecture, data models, and instructions for development and deployment.

Submission Guidelines:

• Share the link to the Git repository containing your code.
• Provide a detailed README with instructions, architecture overview, and any additional information.
• Ensure that your application is deployed, and share the deployment link (e.g., Netlify, Vercel).

• The host/shell application here.
• The remote application here.

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
• Testing: Cypress

• 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.

If you want to contribute to this project, you can do so by following these steps:

1. Fork the project.
2. Create a new branch (git checkout -b feature/feature-name).
3. Commit your changes (git commit -m 'feat: add new feature').
4. Push the branch (git push origin feature/feature-name).
5. Open a pull request.
6. Wait for your pull request to be reviewed and accepted.
7. Start contributing!

Mariano Álvarez

Frontend Developer with more than 3 years of experience, specialized in creating fluid experiences and always attentive to the latest design trends and cutting-edge technologies.

• LinkedIn
• Website

This project is open source and available under the MIT License.