It's Nightmare on ElmStreet and Guess who's playing Jason 😜

#devchallenge #frontendchallenge #webdev #javascript

Frontend Challenge Perfect Landing Submission 🦇🎃

This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing

What I Built

Earlier this year I went through the harrowing experience of purchasing a home for the first time. I'd browse Zillow for hours at a time any time searching for homes that would fit my criteria. I still find myself opening up the site out of habit, even after the fact.

That chokehold inspired me to make a real estate landing page. I think the housing market is scary enough but to really sell the Halloween theme it's specifically for haunted estates.

Demo

⚡ ElmStreet Live Demo ⚡

Journey

My process began in FigJam where I quickly doodled the UI. Since there was a deadline and I tried to go for some of the first ideas I came up with.

Then I moved into a Figma Design file to create the high fidelity mock-up in both desktop and mobile screens.

Next I dropped the design into Figma Make to generate some code. I find that Make is not to good with overlapping elements but it was a huge help in discovering improvements in positioning.

Lastly I moved the coding to Nextjs. I ended up using only the dot navigation directly from the Make code which was a bummer because my intention was to to have the components 99% of the way done with Make. Next time I'll spend more time in Figma to create a component library.

Additional use of AI was generating the house images with Google Gemini and debugging/polishing with Copilot. Two of the images were houses from a YouTube video entitled Mansions No One Wants to Buy at any Price.

What I learned

I had no clue prior to working on this that there was an HTML <dialog> tag. Using semantic HTML solves a good number of accessibility issues so I always strive to use proper tags but for dialogs I'd been writing additional code to manage focus. The dialog tag handles that out of the box, saving lines of code.

What's next?

A quick improvement would be enhancing the quality of the images, and the auto navigating through the featured houses. In terms of functionality I would implement proper search features and a database of haunted houses to pull from.