Details

  1. You are creating a tiling window system similar to Windows or Mac.
  2. Users will be able to create windows using the “+” button on the bottom right corner.
  3. Each window will be created in a random color, and show up at a random position
  4. Windows will have a bar on the top with a close button
  5. Users can close windows using the close button
  6. Users can click and drag on the bar to move windows.
  7. When a window is within 30px of an edge of the screen, there will be a transparent indicator showing that the window can be snapped to that side
  8. Once a window is snapped it will either take the full width (if snapped to top or bottom), or the full height (is snapped to right or left)
  9. Window will always take up 50% of the space on the axis it was snapped.
  10. Windows can be further snapped inside another window grid; i.e. once you snap a window to the left, you can snap another window to the left window’s top.
  11. Initially windows can be snapped on all 4 sides: top, left, bottom, right
  12. After the window has already been divided, snapping will only occur on the longer axis of a sub-grid.
  13. Windows can still be closed after being snapped; this will cause the other side to take the entire space.
  14. Windows can be moved out of their snapping positions causing it to be floating window again; the other window in the grid cell will take up the full space (similar to the closing case)

(Common) Rules

  1. Don’t make change to the package.json file provided int he starter code.
  2. Don’t use an extra libraries from npm.
  3. Don’t use SVG or Canvas; prefer to keep it only React to render HTML and CSS/Tailwind

Evaluate Yourself