This repo is part of the interview process at Fetch for this Frontend Engineer position.
Here at Fetch, we love dogs, and hope you do too! Your task is to build a website to help a dog-lover like yourself search through a database of shelter dogs, with the hope of finding a lucky dog a new home!
- Visit joetheis.me/fetch-a-dog to interact with the app live on the internet
- Ensure Node.js is installed on the machine (node v20.18.0 was used for development)
- In the directory containing the package.json file enter the following commands into a terminal:
- npm install
- npm run dev
- This will build and run the dev server
- The terminal will display a link like
Local:http://localhost:5173/. Click it to open the app.
These are item that weren't explicitly in the requirements (see below), but I've identified either as issues to fix, or enhancements to make. This isn't an exhausive list. Items will be added as I run across them, and checked off and removed as I finish them.
- (UX) Scrollbar color
- (UX) Implement "root close" behavior for menu popovers, where clicking outside them dismisses them.
- (UX) Validate login form field values
- Name length requirements and character restrictions
- Valid email regex
- (ERRORS) Handle login errors
- (UX) Loading indicator for sign in
- (UX) Handle auth expiration
- (FIX) Space between grid rows when results don't fill full page (e.g. zoom out)
- (ERRORS) Handle API errors
- (UX) Add filtering by age
- (UX) Handle individual image loading state
- (UX) Add first/last page buttons
- (UX) Add numbered page buttons (similar to "< Goooooooogle >")
- (UX) Add a page size option menu
- (UX) Integrate search into querystring for link/shareability
- (UX) Add logged in username to account menu
Full requirements and documentation is available at frontend-take-home.fetch.com
- You first should have users enter their name and email on a login screen.
- Then, you should use this information to hit our login endpoint to authenticate with our service
- Once a user is successfully authenticated, they should be brought to a search page where they can browse available dogs.
- Users must be able to filter by breed
- Results should be paginated
- Results should be sorted alphabetically by breed by default.
- Users should be able to modify this sort to be ascending or descending.
- All fields of the Dog object (except for id) must be presented in some form
- Users should be able to select their favorite dogs from the search results.
- When finished searching, they should be able to generate a match based on dogs added to the favorites list.
- A single match will be generated by sending all favorited dog IDs to the /dogs/match endpoint.
- You should display this match however you see fit.
- Please provide a link to your deployed site and your public code repository via Greenhouse.
- Your app should be hosted on the internet where it can be visited and interacted with
- You should include any necessary documentation to run your site locally
- Your source code should be stored in a git repository and hosted on the internet (i.e. GitHub)
As for everything else, you have free rein, so get creative! We strongly encourage you to go beyond the minimum requirements to build something that showcases your strengths.