Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 5 hours 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 (5 days ago)
- Default Branch: main
- Last Pushed: 2024-11-19T08:11:16.000Z (about 15 hours ago)
- Last Synced: 2024-11-19T08:35:15.174Z (about 15 hours 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: 129 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/)