Match users with the pet of their dreams.
React query handles state from server such as pet data. Auth status and user details client state is handled by Redux Toolkit. User details are encrypted and stored in sessionStorage for persistance across reloads.
React query optimistic UI makes favoriting and unfavoriting instant regardless of server time to response. Unfavoriting on the favorties page is also instant. Filtering by Dog vs Cat vs All uses the cache.
Client built with TailwindCSS and Headless UI for React.
Zod was the original choice for user data validation, but then I found react-hook-form and used it for the contact and donate pages.
Stripe integration for donations.
Routing is done with React Router Dom.
Sequelize is the ORM for a PostgreSQL database. Express is the server. Express Router for routing.
This application uses session authentication with an axios response interceptor to redirect the user to login if session expires, but rolling is set to true with express-sessions so user should stay logged in while active, but also for x amount of time after inactivity.
This app was originally designed with headless architecture, but Safari third party cookie rules made this too difficult for this project without the introduction of sub-domains, which I wasn't interested in doing at this time, but will revisit later.
To install necessary dependencies, run the following command:
npm i
Clone the repository, run the install command and then npm run start:dev. Then navigate to the localhost port.
To test the stripe integration, which is in test mode, use the CC number:
4242 4242 4242 4242
with any other valid test data of your choosing.
To login with registering, use
[email protected]
password
https://pawsome-pets-a74380f52be3.herokuapp.com/
- Pet data usually won't match pet image. I used fakerjs to generate fake data, and the point of this project is the coding, not the fake data.
- Again due to limits on time with fake data, I am not concerned with ages of kittens and puppies.
Fork the repository and make a pull request with your new code.
To run tests, run the following command:
npm test
Images of cats & dogs together by Vecteezy.com
Thanks to Lucky Dog Animal Rescue for providing site content and loose specs for this project.
Custom fonts from dafont.com and google fonts.
If you have any questions about the repo or notice any bugs you want to report, open an issue or contact me directly at [email protected].