Denys-Lytvynenko / cats-app

This application is my realization of MacPaw 2022 test task. Application gives you ability to see information about cat's breed, vote for your favourite breed, upload your images of cat and more from any device.

Cats web app

Link to the cats web app

Table of content

---

• Project description
  • List of used technologies
  • Figma prototype
• Installation and running
  • Installation
  • Run dev
  • Make production build
  • Preview production build on local machine
  • Run tests
• Project overview
  • Home page
  • Dark mode manual switching
  • Dark mode auto detection
  • Dark mode auto detection
  • Voting page
  • Breeds page
  • Breed page
  • Gallery page
  • Upload file modal
  • Likes page
  • Favourites page
  • Dislikes page
  • Dislikes page
  • Search page
  • Tablet navigation menu
  • Tablet layout
  • Mobile layout
• License text

Project description

---

This application is my realization of MacPaw 2022 test task.

Application gives you ability to see information about cats breed, vote for yor favourite breed, upload your images of cat and more from any device.
This web application uses Cat API under the hood.

Technologies:

• React.js - Fast library for web and native user interfaces (Used for UI creation).
• Redux - A Predictable State Container for JS Apps (Used for containing and managing of application state)
• Typescript - A strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. (Used for decreasing bugs and catching errors early in editor not on production)
• Sass - Sass is the most mature, stable, and powerful professional grade CSS extension language in the world (Used for application styling).
• Jest - Jest is a delightful JavaScript Testing Framework with a focus on simplicity (Used for writing unit tests).

Figma prototype:

• Design file - it is a copy of the original design file.

How to Install and Run the Project

---

To install clone project and run next command in CLI:

npm i

To run app locally run next command:

npm run dev

To build a production build run next:

npm run build

This command creates production build that contains in dist folder in root of the project.

To preview this production build locally run next:

npm run preview

To run tests:

npm run test

Project overview

---

Home page:

Dark mode manual switching:

Dark mode auto detection:

Voting page:

Breeds page:

Breed page:

Gallery page:

Upload file modal:

Likes page:

Favourites page:

Dislikes page:

Search page:

Tablet navigation menu:

Tablet layout:

Mobile layout:

License

---

Copyright (c) 2023 Denys Lytvynenko. All rights reserved.

Licensed under the MIT license.