Code Monkey home page Code Monkey logo

allcats-app's Introduction

All Cats

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!

Demo

Hosted at https://quizzical-varahamihira-2b9274.netlify.app

Built With

React, React Hooks, Material UI and React Lottie

Recommendations / Future Improvements

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

Installing and running the app

npm install npm start

๐Ÿˆ allplants coding challenge!

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:

As well as the following brand guidelines:

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

Bonus points

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?

Submission

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!

allcats-app's People

Contributors

illianyh avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.