This challenge is part of the hiring process for some of the Software Engineer positions at MUI. The idea is to make as much progress as possible under a given time constraint (3-4 hours).
MUI is looking for Full-stack engineers to join the team. We are looking for people who are proficient in both modern React development and backend technologies. Throughout this challenge, you are required to build a basic forum application.
MUI's objective is to become the UI toolkit for React developers. We're unifying the fragmented ecosystem of dependencies into a single set of simple, beautiful, consistent, and accessible React components.
Our mission is, ultimately, to make building great UIs and web apps a breeze ⎯ quicker, simpler, and accessible to more people. At the end of the day, it's about writing less code.
Head over to our company Handbook to learn more!
You are handed a PostgreSQL database containing some data and a starter Next.js application. You'll have to interface with this database and visualize it in a React UI.
The database contains the following schema and is seeded with some dummy data.
CREATE TABLE thread (
id SERIAL PRIMARY KEY,
created_at TIMESTAMP NOT NULL DEFAULT Now(),
title TEXT NOT NULL
);
CREATE TABLE post (
id SERIAL PRIMARY KEY,
thread_id INT REFERENCES thread (id) NOT NULL,
created_at TIMESTAMP NOT NULL DEFAULT Now(),
title TEXT NOT NULL,
body TEXT NOT NULL,
starred BOOLEAN NOT NULL DEFAULT false
);This is a simple forum-like application with separate threads, each thread containing a set of posts. Your task is to build a UI on top of this data that allows viewing the threads and adding new posts.
A mockup of a potential UI:
+--------------------------------------------------+
| thread 1 | title: thread 2 |
| thread 2 +---------------------------------------+
| thread 3 | Post title 1 created_at |
| thread 4 | |
| thread 5 | Post body 1 |
| thread 6 |---------------------------------------|
| . | Post title 1 created_at |
| . | |
| . | Post body 1 |
| |---------------------------------------|
| | textfield |
| | |
| |---------------------------------------|
| | [ send ]|
+--------------------------------------------------+
Start the database with:
docker-compose upRun the application with:
yarn
yarn devThe UI is accessible at http://localhost:3002 If everything is set up well you should see the message "Database connection: succeeded"
- You are allowed to use any library or ORM you want, but you must use the provided PostgreSQL database and Next.js application.
- List of threads: Threads must be displayed in a list, sorted by the thread with the most recently created post first.
- Selecting a thread: Clicking a thread should reveal its posts sorted by least recent first
- There's a form that allows you to enter a subject and a body and a button to add a new post to the thread.
- To keep the scope of the assignment small, we'll keep the system user-agnostic. No authentication is required, assume you are the only user of this application.
- No need to write documentation, unless there are extra steps involved in starting the application.
Don't tackle these unless you have time left
- Keyboard accessibility
- Pagination
- Form validation
- Allow for creating new threads
- The database comes without indices. Propose a set of indices to optimize the usage of this db.
- First of all, try to respect the time limit, it's part of the grading
- Quality over quantity: prefer doing half of the features at 100% rather than all of the features at 50%.
Instructions:
- DO NOT host your project on a public repository.
- Please send us a zip file containing this project using the upload link that we have provided by email (with the .git folder).
- To significantly reduce the size of the archive, you can remove the
/_node_modules_/and/.next/folders. - If you don't have the upload link, you can simply send it to job@mui.com. Thanks!
We're excited and looking forward to seeing what you'll create! Good luck 🚀