https://github.com/aaronconway7/open-rent-homepage-redesign

Redesign of the OpenRent homepage. For an interview/coding exeercise/test
https://github.com/aaronconway7/open-rent-homepage-redesign

Last synced: 3 months ago
JSON representation

Redesign of the OpenRent homepage. For an interview/coding exeercise/test

• Host: GitHub
• URL: https://github.com/aaronconway7/open-rent-homepage-redesign
• Owner: aaronconway7
• Created: 2023-07-16T19:49:36.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-07-16T20:13:08.000Z (almost 2 years ago)
• Last Synced: 2025-01-17T02:11:57.355Z (4 months ago)
• Language: TypeScript
• Homepage: https://openrent-homepage-redesign.netlify.app/
• Size: 14.1 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# [OpenRent Homepage Redesign](https://openrent-homepage-redesign.netlify.app/) 🏠

![Screenshot of my redesign](./files/screenshot-new.png)

[![Netlify Status](https://api.netlify.com/api/v1/badges/3ed340ae-678d-48af-a77f-1bfab7402b37/deploy-status)](https://app.netlify.com/sites/openrent-homepage-redesign/deploys)

> Following on from that, given publicly accessible work is often limited and doesn't necessarily show off your current ability, we like to get candidates to perform a small front-end based project. If you could take a page on our site (any you like), and put together an alternative design/UI/UX. I wouldn't spend _too_ much time on this, but bonus points for it working with a live demo! The idea here is to see, without any real brief, what you'd do to our UI / UX. It's also hopefully a chance to show off technical, design and product development ability!

## [Current Site](https://openrent.co.uk) 📆

![Screenshot of the current site](./files/screenshot-old.png)

## Getting Started 🏃‍♂️

This page is deployed on [Netlify](https://www.netlify.com/) - check it our [here](https://openrent-homepage-redesign.netlify.app/)!

> Remember to `npm install`!

If you want to run it locally,

```

npm run dev

```

## Stack 🍔

- React + Typescript

- Vite

- Tailwindcss

## Future work 🔮

If I had more time or was really building this as part of a real project there are several things I would try to do:

- Spend time on the design/planning. As I didn't want to take too long I went straight into development

- Add some animations

- Compress images further - I passed them through a compress but they are still v big so makes the page load slow - I probably would have taken a look into lazy/progressive loading techniques

- Accessibility improvements - the current brand colour used currently produces a warning

- Write some tests

- Mobile navigation

- Reduce amount of hardcoded data (hardocded in this case as this is just an example of a one off page design)

- Add social media links to footer

- Improve the `PropertyGrid` component on mobile (currently too long)

- Refactor code - e.g. `Landlords.tsx` and `Tenants.tsx` are very similar