• This is a website to help a dog-lover search through a database of shelter dogs, with the hope of finding a lucky dog a new home!

• See the design document here.

• The document is written and distributed by fetch.

• Here are four options for you to see the final result of this amazing web app!

• Click here to see the video demonstration

• See the website live here: 🐕PawFinder

• If you're using Safari or Chrome on phone, go to Settings and search for Safari(or Chrome), then turn off Prevent Cross-Site Tracking, and you will see the amazing ✨responsive design✨ on your mobile device!

Because in this project we have a different domain for backend, Disabling cross-site cookies would prevent you from logging into the website.

1. Clone the repository

• To begin, clone the repository from GitHub, using the following command:

git clone https://github.com/Jianganchen/PawFinder.git

2. Install the dependencies

• To install the dependencies, run this:

npm install

3. Launch the server

• run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

• Open http://localhost:3000 with your browser to see the result.

• I used Next.js's app router in this project. Basically there are three main pages: landing page, dashboard page and favorites page. Favorites page lives inside dashboard page because they sahre a same sidebar. I also have a not-found page for all the unwanted routes, so feel free to try it out!

.
├── app/                 # root route & landing page
│   ├── dashboard/       # dashboard page & sidebar
│   │   └── favorites    # favorite dogs page
│   └── login            # login page
├── components/          # all the reusable components
│   ├── context          # favorite dogs & user provider
│   └── ui               # UI library
├── hooks                # customized hooks
├── lib                  # apis & utils & TypeScript definitions
└── public               # pngs & svgs

• I put a lot of effort into the UI/UX design of this website, because I do think design is a significant part of front-end engineering!
• I studied 10+ different pet websites and chose this modern and simplistic style for PawFinder, which I think goes pretty well.

• You can filter dogs by breeds, states and city they live in, zipcodes, age and name etc. All the functionalities in the documentation are implemented.
• You can view all the dogs with pagination, and what's important is if you refresh the page you wouldn't be redirected back to page 1, because we don't want users to lose their progress while browsing through cute puppies.
• You can click the like button on any dog that you see on the on page, and later on you can generate a match according to the dogs you chose.

• This web app fully supports mobile device! Try to visit the link on your phone and see what's different.
• You may have noticed the choice I made in designing the buttons. For example, the silder for age selection, a toggle button for sorting order, a sidebar that can be toggled etc.

• If you try to visit /dashboard without logging in, you would be redirected to login page.
• If you visit any unlisted route, you would see a not-found page.
• If you accidentally set a filter where no dog satisfies any of the conditions, you will see a no-dogs-found page.
• If you try to generate a match without liking any dogs, it wouldn't let you.
• If you type in the incorrect zip-code, it would give you a warning.