https://github.com/tinawebdev/pintercats

🐱 Pure JavaScript Cats Viewer application using TheCatApi
https://github.com/tinawebdev/pintercats

css-pseudo-elements eslint font-awesome-5 infinite-scroll lazy-loading scss thecatapi vanilla-js webpack

Last synced: 21 days ago
JSON representation

🐱 Pure JavaScript Cats Viewer application using TheCatApi

• Host: GitHub
• URL: https://github.com/tinawebdev/pintercats
• Owner: tinawebdev
• Created: 2022-05-31T14:38:38.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-06-10T08:42:53.000Z (over 2 years ago)
• Last Synced: 2024-11-09T07:15:46.385Z (3 months ago)
• Topics: css-pseudo-elements, eslint, font-awesome-5, infinite-scroll, lazy-loading, scss, thecatapi, vanilla-js, webpack
• Language: JavaScript
• Homepage: https://tinawebdev.github.io/pintercats/
• Size: 2.67 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Pintercats

[![Maintainability](https://api.codeclimate.com/v1/badges/9a45cf7aae882d055a1c/maintainability)](https://codeclimate.com/github/tinawebdev/pintercats/maintainability)

[![ESLint](https://github.com/tinawebdev/pintercats/actions/workflows/eslint.yml/badge.svg?branch=main)](https://github.com/tinawebdev/pintercats/actions/workflows/eslint.yml)

**Cats Viewer app using TheCatApi**

## Features

* Built with Vanilla JS.

* Fething the data in JSON format from the [TheCatApi](https://docs.thecatapi.com/).

* Dynamically inserting the images into the DOM on initial loading.

* When the user scrolls close to the bottom of the page the app makes another GET request to the API and inserts images into the DOM (lazy loading).

* The app stores liked images in LocalStorage.

## Technology Stack

* Module bundler: [Webpack 5](https://webpack.js.org/) - For build a dependency graph of all the files and their dependencies, and bundle all the files.

* Linter: [ESLint](https://eslint.org/) ([eslint-config-google](https://github.com/google/eslint-config-google)) - For improving code quality.

* Icon library and toolkit: [Font Awesome Free v5.15.4](https://fontawesome.com/) - For add icons using CSS Pseudo-elements.

## Live demo

See the live version **[here](https://tinawebdev.github.io/pintercats/)**.



  

    

    

  



## Requirements

You will need [Node.js](https://nodejs.org/en/) and [Git](https://github.com/git-guides/install-git) installed on your machine.

## Installation

To install, run the following commands into a Terminal window:

```bash

git clone [email protected]:tinawebdev/pintercats.git

cd pintercats

npm install

npm run build-dev

```

## Links

* Fonts: [Google Fonts](https://fonts.google.com/)

* Images: [TheCatApi](https://docs.thecatapi.com/)