https://github.com/pintu544/catalogviewers
Implement a catalog viewer for a collection of images. Frontend Tech: React, Typescript, Material UI
https://github.com/pintu544/catalogviewers
material-ui react typescript
Last synced: about 2 months ago
JSON representation
Implement a catalog viewer for a collection of images. Frontend Tech: React, Typescript, Material UI
- Host: GitHub
- URL: https://github.com/pintu544/catalogviewers
- Owner: pintu544
- Created: 2023-04-28T05:56:54.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-28T06:30:53.000Z (about 2 years ago)
- Last Synced: 2025-02-10T09:41:43.136Z (4 months ago)
- Topics: material-ui, react, typescript
- Language: JavaScript
- Homepage: https://catalogviewers.netlify.app/
- Size: 746 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Catalog Viewer
Hosted Urlcatalogviewers
This is a React app that displays a collection of images in a carousel format. The user can navigate between images using previous and next buttons or by clicking on a thumbnail image. There is also a play/pause button that starts or stops the automatic display of images in the carousel.
Technologies Used
- React - A JavaScript library for building user interfaces.
- Typescript - A statically typed superset of JavaScript that adds type annotations to the language.
- Material UI - A popular React UI framework that provides pre-built components and styles.
Getting Started
To run this app on your local machine, follow these steps:
- Clone the repository to your local machine using
git clone https://github.com/pintu544/CatalogViewers.git. - Navigate to the project directory using
cd catalogviewer. - Install the necessary dependencies using
npm install. - Run the app in development mode using
npm start. - Open http://localhost:3000 to view it in the browser.
Usage
When you open the app, it will display the first image in the collection along with its title and description on the right side of the screen. You can navigate between images using the previous and next buttons underneath the image, or by clicking on a thumbnail image below the main image.
If you click on the next button when the last image is showing, it will cycle back to the first image. Similarly, if you click on the previous button when the first image is showing, it will cycle back to the last image.
There is also a play/pause button that alternately starts and stops the automatic display of images in the carousel. When the slideshow is active, images are displayed for a 3 second interval before automatically switching to the next image. If you click on any carousel indicator or the previous or next button while the slideshow is active, it will load the appropriate image and continue the slideshow from that image.
When you click on a thumbnail image, it will display that image along with its title and description on the right side of the screen. The currently selected thumbnail image will be highlighted, and others will be shown in grayscale.
Contributing
If you would like to contribute to this project, please follow these steps:
- Fork the repository to your own GitHub account.
- Clone the repository to your local machine using
git clone https://github.com/pintu544/CatalogViewers.git. - Create a new branch using
git checkout -b feature/your-feature-name. - Make your changes and commit them using
git commit -m "Your commit message". - Push your changes to your forked repository using
git push origin feature/your-feature-name. - Create a Pull Request to merge your changes into the main branch of the original repository.
License
This project is licensed under the MIT License - see the LICENSE.md file for details.
Acknowledgements
- Images used in this app are sourced from Unsplash.
#� �C�a�t�a�l�o�g�V�i�e�w�e�r�
�
�