---
# System prepended metadata

title: 'Interview Task Assignment: Simplified Real Estate Data Management System'

---

# Frontend Interview Assignment: Simplified Real Estate Data Management System

## Objective

Hey there, future tech wizard! Your mission, should you choose to accept it, is to conjure up a nifty Real Estate Data Management System using the MERN stack. This isn't just any system; it's your chance to show off those slick coding spells you've got up your sleeve. So, let's keep it simple, sweet, and a bit of fun! 


## The Blueprint

### 1. The Grand Plan
* **The Core Idea:**
    * You're crafting a minimalist web app where property seekers can browse through a list of mystical         properties (aka our mock data). Think of it as a crystal ball for real estate!
    * This isn't Hogwarts, so no magic wands allowed! Just good ol' Node.js, Express, React, and MongoDB.

### 2. Datebase Design & Mock Data
* **MongoDB Setup:**
    * Create a simple MongoDB schema for property listings. Include fields like `title`, `description`,   `price`, `location`, and `imageURL`.
    * Insert some mock data to start off. How about a castle, a cozy cottage, and maybe a haunted mansion? Just kidding about the haunted part… or are we?

### 3. The Frontend Spell
* **React Magic:**
    * Whip up a charming React app.
    * The UI should display property listings from your MongoDB.
    * Make sure to use modern design components that make your page elegant and also responsive across different screen sizes. (Hint: Chrome Developer tools is your friend)

### 4. Backend Brew
* **Express Potions:**
    * Cook up a very basic backend with Express.js.
    * Conjure some routes to fetch data from MongoDB. We don't need any complex spells here, just the basics. You don't need to worry about auth handling as well.

### 5. The Fun Part:
* **Be Creative:**
    * Sprinkle some creativity. Maybe add a quirky feature or two. The ability to mark certain properties as favourite and maintain their count? A map that displays all the properties? Filtering and searching properties? You be the judge


### 6. Documentation Scroll
* **README:**
    * Don't forget to leave a scroll (README file) with spells (instructions) on how to run your magical creation.

### 7. Submission
* **GitHub Repository:**
    * Push your code to a GitHub repository and share the link with us. Make sure your repo is not under an invisibility cloak (public or shared with us)
    * If you have the resources for it, host your frontend on platforms like vercel or GitHub pages.

## Evaluation Criteria
* **Functionality:** Does it work like a charm or does it need a few more spells?
* **Code Quality:** Is your code as neat as a wizard's library or as chaotic as a goblin's cave?
* **Creativity:** Did you add a dash of unicorn dust to make it stand out?
* **Responsiveness:** Is your webpage responsive across different screen sizes?
* **Documentation:** Can we follow your scroll or is it written in ancient runes?


Although the application has both frontend and backend components, feel free to keep the effort on backend to the bare minimum for the app to work and give extra love to the UI and UX aspects of the app.
Below are some of the designs you can derive inspiration from


![redfin](https://hackmd.io/_uploads/HkwoF-fR6.jpg)


![zillow](https://hackmd.io/_uploads/Sy6U5bfRT.jpg)


#### Found it too easy?
* Here are some fun ideas to try out if you're up for a challenge (although not mandatory for the submission at all) - If anymations are your jam, maybe animate elements on the webpage for example when hovering over components or when scrolling down, as placeholders when elements load up on the page. Play with box shadows to make your elements pop while blurring out the background.









