Take-Home Assignment: User Management Apps

Overview

Welcome to the take-home assignment!

Before you start coding, please take a moment to read this README in full. It contains important details about the task, setup, and expectations to help you complete the assignment efficiently.

Your task is to develop two frontend applications inside our existing Turborepo monorepo project. These apps will interact with a dummy REST API that manages users, located at apps/api. The API is accessible via Swagger UI at http://localhost:3000/api-docs;

The assignment will assess your ability to work with React, Next.js, Tailwind, and Shadcn while interacting with a backend API. You are encouraged to showcase best practices in structuring Next.js applications, handling API interactions, and designing UI components.

---

Task Description

You will implement two separate Next.js applications:

1. user-admin

This application will provide full CRUD functionality for managing users. It should allow an administrator to:

• Create a new user.
• Read (list) all users.
• Update an existing user.
• Delete a user.

2. user-storefront

This application will provide a simple user listing page where users are displayed but cannot be modified.

---

Tech Stack

You must use the following technologies:

• npm for package management.
• Typescript 5 for type safety.
• Node.js 22 as the runtime.
• Turborepo for managing the monorepo.
• Next.js as the React framework.
• React 18 for UI development.
• Tailwind CSS for styling.
• Shadcn for UI components.

---

Setup Instructions

1. Fork and Clone the Repository

First, fork the repository on GitHub. Make sure to keep it private.

Then, clone your forked repository:

git clone <your-forked-repo-url>
cd <repo-root>

2. Install Dependencies

npm install

3. Start the Backend API

npm run dev --workspace=apps/api

The API should now be accessible at https://localhost:3000.

4. Create the New Applications

Inside the apps/ directory, create two new Next.js apps.

5. Develop the Applications

• user-admin: Implement the CRUD operations using API calls.
• user-storefront: Fetch and display the user list.
• Use Tailwind CSS for styling.
• Use Shadcn for UI components (e.g., tables, forms, buttons).
• Follow Next.js App Router conventions.

💡 Hint: There is an example app in the repository called blog that uses shared components from @repo/ui: *. You may leverage these components or add more to maintain consistency across applications.

💡 Hint: You might need to update the CORS configuration in the api app to allow your frontend applications to communicate with it properly.

6. Start the Applications

Run both apps in parallel:

npm run dev --workspace=apps/user-admin
npm run dev --workspace=apps/user-storefront

They should be accessible at:

• https://localhost:3001 for user-admin
• https://localhost:3002 for user-storefront

---

API Documentation

The backend API provides a Swagger UI at http://localhost:3000/api-docs , where you can explore the endpoints. Key endpoints:

• GET /users – Get the list of users.
• POST /users – Create a new user.
• PUT /users/:id – Update a user.
• DELETE /users/:id – Delete a user.

---

Evaluation Criteria

We will assess your submission based on: ✅ Code organization and structure. ✅ Proper use of Next.js features. ✅ API integration and error handling. ✅ Clean UI design with Tailwind and Shadcn. ✅ Use of TypeScript for type safety. ✅ Git commit history (meaningful commits).

---

Bonus Points 🎯

Want to go the extra mile?

• Add responsive mobile and offline capabilities.
• Implement pagination, search and filtering in user-storefront and in the api.
• Add form validation in user-admin.
• Implement optimistic UI updates.
• Use React Query for data fetching and caching.

---

Submission Instructions

1. Push your work to your private GitHub repository (forked from the original repo).

2. Share access with us (at this point, you should have our emails).

3. Send an email with the repo link and a brief explanation of your approach.

---

Time Expectation ⏳

There's no strict time limit for this assignment, so take your time and enjoy the process! That said, we estimate that around 7 hours should be enough to implement a solid solution.

If you need more time, no worries—just let us know. The goal is to see your approach and skills in action rather than rushing to finish!

---

Questions & Support 🤔

If you have any questions at any point, feel free to reach out! We're happy to clarify anything that might be unclear.

---

Good Luck! 🚀

We look forward to seeing your work! If you have any questions, feel free to ask.