https://github.com/manitapaudel/tasbir
A fully responsive Gallery, brought to you by "Tasbir Studios"!
https://github.com/manitapaudel/tasbir
canva error-boundary heroicons picsum-api react-skeleton-loading reactjs responsive-design tailwindcss tanstack-react-query typescript
Last synced: 3 months ago
JSON representation
A fully responsive Gallery, brought to you by "Tasbir Studios"!
- Host: GitHub
- URL: https://github.com/manitapaudel/tasbir
- Owner: manitapaudel
- Created: 2024-11-14T14:03:59.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-23T14:09:20.000Z (over 1 year ago)
- Last Synced: 2026-01-03T08:52:09.771Z (6 months ago)
- Topics: canva, error-boundary, heroicons, picsum-api, react-skeleton-loading, reactjs, responsive-design, tailwindcss, tanstack-react-query, typescript
- Language: TypeScript
- Homepage: https://tasbir-studios.vercel.app
- Size: 137 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Tasbir Studios 📸
## Introduction
A fully responsive Image Gallery with the images from [PicSum API](https://picsum.photos/#list-images).
## Installation
1. Clone the repository:
```bash
git clone https://github.com/manitapaudel/tasbir.git
```
2. Navigate to the project directory
```bash
cd tasbir
```
3. Install the dependencies:
```bash
npm install
```
4. Run the development server:
```bash
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
- Icons from [Heroicons](https://heroicons.com/)
- Logos created with [Canva](https://www.canva.com/)
- Illustration from [unDraw](https://undraw.co/)
- Design Inspiration [A Museum/Gallery App by Desire Creative Agency on Dribbble](https://dribbble.com/shots/22940414-A-Museum-Gallery-App)