Scribd
Upload
15 views9 pages

MVP Isometric Building Web App Description

Uploaded by

HenikenBitew
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views9 pages

MVP Isometric Building Web App Description

Uploaded by

HenikenBitew
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

MVP Isometric Building Web

App
Project description
This project is based on building a small and simple MVP which is a Web App. This
MVP is part of a bigger project. But for now the scope of this project is is to have a
very basic base building mechanic of the app, which is an isometric building
game.

Required Tools & Technology


React

TypeScript

Tailwind CSS

Next.js (latest version)

Screen designs
A user starts with an empty grid.

MVP Isometric Building Web App 1


A user can hover over the empty grids. The hovered column gets highlighted.

MVP Isometric Building Web App 2


When the user clicks a column from the grid, a menu pops open. In this menu, the
user can select an item and click “place”.

MVP Isometric Building Web App 3


The selected item is now visible on the grid. It’s important when a user clicks on
“Place” that the block is rendered in using a fun and nice animation (use Framer)

MVP Isometric Building Web App 4


Another example, selecting and placing a “House”.

MVP Isometric Building Web App 5


MVP Isometric Building Web App 6
So eventually a user could for example end up with the following:

Isometric set
A specific isometric must be used for this MVP! I can send the the Illustrator file,
or in PNG / SVG’s.

MVP Isometric Building Web App 7


Reference code
Attached to this job will be a reference project which can be used when creating
this MVP. The reference code is using React, TypeScript and PixiJS.

MVP Isometric Building Web App 8


You can run the code locally to see a very basic version of this isometric building
mechanism. You are free to use this code, or come up with your own
implementation.

Acceptance criteria
The delivered product looks exactly like the provided UI/UX designs
Navigation bar, clouds in the background, grid.

The clouds in the background are moving infinitely from right to left

The delivered product makes use of the required isometric city set

A user starts with an empty grid (8x8)

Animation when placing an item on the grid

The grid should be expandable

For example, every user starts with a default empty grid of 8x8. But it should
be able to enlarge this grid to for example 20x20.

The user should be able to zoom in and out of the grid

The user should be able to move across the grid by dragging with the mouse

MVP Isometric Building Web App 9

You might also like