AllCats app - ๐ UK's cat rescue charity. This app consists of the homepage with a listing of all the cats in the centre, a cat delivery page that includes a register form for anyone who might be interested in adopting a furry friend (or maybe more!) Once all of the admin stuff goes through, people can book a visit to the centre on the Book a Visit page. There's also a donation page - Whichever way you decide to give, your kind donation will help us to care for thousands of cats in need!
Hosted at https://quizzical-varahamihira-2b9274.netlify.app
React, React Hooks, Material UI and React Lottie
Login/Authentication for user to manage cat adoption application
More detailed each of the cat's page and compherensive Donate's page
Unit and end to end tests.
Utilising react-window or react-virtulized for large list
Integrating GraphQL through the Apollo client for interfacing with the API
Incorporating better styling throughout and greater consistency with the branding of website
npm install npm start
Hey there pal! Your task as an allstar engineer is to create a web application for our new digital product - ALLCATS - a cat adoption service! You've been supplied the following assets from our UX team:
- Wireframes for desktop and mobile
- SVG assets
As well as the following brand guidelines:
- Primary colour: #2EA372
- Background colour: #E7E7E7
- Font: https://fonts.google.com/specimen/Rubik
We'd love you to show us your skills and spend some time building as much of the application as you can. You can use any framework and libraries that you like, so feel free to experiment and have a play.
As the rest of our engineering team are hard at work building the API service, here's a mock endpoint which returns some data test you can use to enable us to start work on building the prototype: https://5e5932cd7777050014463360.mockapi.io/cats
Here's some extra things you could ponder about. Don't worry if you don't understand or have no idea about how to do any of them! If you run out of time but have ideas on how you would going about tackling these, jot down your ideas in the readme file as part of your submission.
- How could you build the "best" badge functionality using the
"tag"
field in the mock endpoint? - We like clean and easy to read code! Try to use ES6 syntax and features as much as possible
- What about including some delightful user interactions (how would the button behave when you click it? What about hover states?)
- Can you host your completed application somewhere?
- What kind of unit tests could you write?
- Loading / error / fail states? What if our API service was down? How might we communicate this to our user?
- Accessibility?
- Scaling - what if we had 1000 cats to rehome?!?! How could we build our application to support this?
Please submit your work as a Github repository or a .zip file. Include a readme file with instructions of how we can get your codebase up and running, and any other additional information you think we may need.
Please let us know if you have any questions or are unsure about how to approach it. Good luck and have fun!