Skip to content

A fully responsive Gallery, brought to you by "Tasbir Studios"!

Notifications You must be signed in to change notification settings

manitapaudel/tasbir

Repository files navigation

Tasbir Studios 📸

Introduction

A fully responsive Image Gallery with the images from PicSum API.

Installation

  1. Clone the repository:
git clone https://github.com/manitapaudel/tasbir.git
  1. Navigate to the project directory
cd tasbir
  1. Install the dependencies:

    npm install
  2. Run the development server:

    npm run dev

Usage

  • Open the app in browser, or you can follow this link: https://tasbir-studios.vercel.app/
  • Navigate through pages using the Previous and Next buttons.
  • Type your keyword and click on the search button on the Searchbar to filter the data by author.
  • You can also clear the search by clicking on the reset button.
  • Click on the image to open a Modal and view its details.
  • On the Modal, you can find the social-media icons; you can click on them to share the image.
  • On the same modal, you can find a button that you can use to add or remove the image to and from the favourites list.
  • You can see the images with red hearts on the homepage, if they are on your favourites list.
  • Your favourites will be stored safely in the localStorage, so you won't have to worry about losing them.

Resources

Tools

  • React.js
  • Tailwindcss
  • TypeScript
  • TanStack Query

Websites