Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
37 views2 pages

Full Practical Coding Front End Test

The document outlines a practical test for building a property management dashboard using React.js and TailwindCSS or MUI. Key requirements include displaying a list of properties, managing tenant details, ensuring responsive design, and following technical guidelines such as using functional components and React Router. Additional features like state management and dark mode are considered bonuses, with submission expected within 3 to 4 days along with a GitHub repo or ZIP file and README instructions.

Uploaded by

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

Full Practical Coding Front End Test

The document outlines a practical test for building a property management dashboard using React.js and TailwindCSS or MUI. Key requirements include displaying a list of properties, managing tenant details, ensuring responsive design, and following technical guidelines such as using functional components and React Router. Additional features like state management and dark mode are considered bonuses, with submission expected within 3 to 4 days along with a GitHub repo or ZIP file and README instructions.

Uploaded by

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

Front-End Practical Test for Front End

Objective:
Build a simple property management dashboard (mini version of something like
www.rentila.co.uk) using React.js + TailwindCSS (or MUI if preferred).

Test Scope
1. Dashboard Page

 Display a list of properties.


 Each property should show:
o Property Name
o Address
o Number of Tenants
o Current Rent Due
 Fetch the property list from a mock API (can use a simple JSON server or mock
inside the project).

2. Tenant Management

 Ability to view tenants per property.


 Create a Tenant Details Page:
o Tenant Name
o Lease Start and End Date
o Rent Amount
o Payment Status (Paid/Unpaid)
 Payment status should show in green if paid, red if unpaid.

3. Responsive Design

 The dashboard must be responsive on mobile, tablet, and desktop (use Chrome
DevTools to test).

4. Technical Requirements

 Use functional components and React hooks (useState, useEffect).


 Organize code into features/components/hooks/services folders.
 Create a mock service to simulate API requests.
 Use React Router for navigation.
 Add loading states and error handling (e.g., using react-toastify).
 Optional: use React Query for data fetching if desired.

5. Bonus (Nice to Have)

 Use Zustand or Context API for simple state management.


 Dark mode toggle.
 Simple pagination if there are more than 10 tenants.

Delivery
 GitHub repo or ZIP file.
 Please include basic README instructions on how to run the project.
 Submit within 3 to 4 days (flexible if needed).

✅ This test will check:

 Project organization
 API handling
 UI responsiveness
 Code cleanliness
 Frontend performance thinking

You might also like