---
# System prepended metadata

title: Material-UI (MUI)

---

# Material-UI (MUI)

## Generic Layout with MUI

Turning a (good) design into a real working webpage is a skill a web developer must have. MUI is a powerful React UI library that can help you greatly with building a basic, functioning and aesthetically pleasing website.

## User Stories
- Users can see 5 job postings on their screen with the job title, skills required and description.
- Users can see a responsive navigation bar.
- Users can browse the website on both desktop and mobile devices.
- Users can see (non-functioning) pagination buttons.
- Users can see no more than 4 skills for each job.
- :rocket: Users can use the pagination buttons and see different pages.
- :rocket: Users can see a dark theme. 

## Design & Data

As we just want to create a mock website, the data will be fixed and you don't have to fetch it from a server.


### Design

Desktop           |  Mobile
:-------------------------:|:-------------------------:
![](https://i.imgur.com/YUzOdGt.png)  | ![](https://i.imgur.com/9v4alFQ.png)

### Data

[Download](https://docs.coderschool.vn/assets/web-virgil/data/jobs.json)

Save this data however you see fit. Don't want to fetch it. Just save it directly in your project.

## What to Use
Here are a few hints of what MUI components to use:
- App Bar
- Box
- Button
- Chip
- Divider
- Paper
- CssBaseline

You may need to modify the theme too.

## Marking Guide

Everyone will start at 100 score.

| Requirement                                | Grade |
| ------------------------------------------ | ----- |
| Missing any user story that are not rocket | -5    |
| The web must be similar to the design      | -10   |
| Finishing a rocket                         | +10   |
