If you have cloned this repository or pulled the docker image, the app will be available locally at http://localhost:3000 upon following the above steps
This app utilises Next.js and was bootstrapped with create-next-app.
All listing data was requested and rendered on the server.
/listing/[id] routes are protected by middleware - You will be redirected if your id does not exist in the database or fail to include one.
/listing/[id] routes currently display a stringified JSON object of the current listing. You can see this by clicking through on a listing or visiting /listing/0 - listing/24.
The app includes a very basic i18n configuration, allowing you to switch between en-GB and en-IE locales. This can be seen by navigating to /en-IE, listing values will now be displayed in euros, this has been achieved by utilizing Intl methods along with the relevant locale.
All listing data is served from a Firebase Database.
The database is fully writable and will allow you to expire and save listings, updates will always persist. Try clicking the save or expire icons and refreshing your page.
Styling has been achieved using TailwindCSS combined with a small amount of sass.
The tailwind config has a small selection of brand colours that are easy to use.
A responsive layout was kept in mind throughout development.
Some components and utils have been tested using Jest and Testing Library
The initial listing data was collected from a listings page on Zoopla - This code for this can be found inside the utils/collectListings.js file alongside the data.json it returned - This code can be copied and pasted into your developer console to be seen in action.
Listings can be filtered by all, active, expired and saved.
Accessibility was kept in mind throughout development, this can be seen by running a Lighthouse check or using browser extensions such as WAVE or axe.
This app has also been hosted on Vercel and Dockerized and hosted on Docker Hub.
I wouldn't typically commit a .env file, though for the sake of simplicity I have done so for this task.
Given more time, there are several things I'd have done, or done differently:
Some components could have done with more abstraction.
I am a strong advocate for testing everything I do - I would have liked to have added a complete suite of unit, integration and e2e tests to my application using Jest, React Testing Library and Cypress.
Firebase was new to me at the start of this task, it's usage may not be 100% optimal, though it was a great excuse to learn something new.
I would have liked to have implemented Husky and an accompanying pipeline to enforce typechecking, code formatting, test coverage and builds prior to commit or branch merges.
I would have liked to have implemented a Redux / Toolkit store to help manage listing data. Currently, if the data is updated via expiring or saving the listing, this is reflected in the listing view immediately, however, a page refresh will be required to see these changes reflected on the necessary filters.