Character Gallery Viewer

The Character Gallery Viewer is a Vue-based application designed to showcase characters from the Rick and Morty show. It fetches data from the open API provided by Rick and Morty API and showcases each character's thumbnail, name, status, creation time, and location. Additionally, the gallery also implements an infinite scrolling feature, loading more characters as the user scrolls down.

Structure

The application consists of three main components:

• App.vue
• CharacterGallery.vue
• CharacterCard.vue

App.vue

• Components Used: CharacterGallery
• Template Structure: The main page container wrapping the CharacterGallery component.

CharacterGallery.vue

• Components Used: CharacterCard

• Data Properties:

  • characters: An array to hold the fetched characters.
  • currentPage: A number denoting the current page of data being fetched.
  • totalPages: The total number of pages available from the API.

• Methods:

  • getCharacters(): Fetches characters based on the current page.
  • onScroll(): Checks the scroll position and triggers more data loading if needed.
  • loadMore(): Increments the current page and fetches more characters.

• Lifecycle Hooks:

  • created(): Invoked when the component is created. Fetches the initial set of characters and adds a scroll event listener.
  • beforeDestroy(): Removes the scroll event listener before the component is destroyed.

CharacterCard.vue

• Props:

  • character: An object containing details of the character.

• Template Structure: A card layout displaying the character's image, name, status, creation date, and location.

Styling

The styling for the application is achieved using a mix of pure CSS and SCSS. Responsiveness is ensured across various screen sizes by adjusting the column count for the gallery based on the viewport width.

Requirements Check

• Utilize Vue, preferably version 3 "vue": "^3.3.4"
• Ensure it's responsive to various screen sizes: contains media queries that adjust the gallery's column count based on screen width.
• Styling using Tailwind CSS, pure CSS, SCSS, or SASS: The code leverages pure CSS and SCSS.
• Use the open API provided by Rick and Morty API: Data is fetched from this API.
• Each gallery item displays thumbnail, name, status, creation time, and location.

Possible additions

• Search and filter by characters, episodes, locations, statuses etc.
• Pagination
• Detailed character view
• More social interactivity: account system, likes, fav selection etc.
• Futher optimization tweaks

Installation Guide

Prerequisites

Before starting the installation process, make sure you have the following tools installed:

• Node.js
• npm (comes bundled with Node.js)

Steps

1. Clone the Repository

   git clone https://github.com/madwizz/rick-and-morty-gallery.git
   

2. Navigate to the project directory:

   cd rick-and-morty-gallery
   

3. nstall dependencies:

   npm install
   

4. Run the Project Locally.

   npm run dev