https://github.com/signor1/filterablegallery
A filterable Gallery built with ReactJs(tsx), Vite and tailwindcss
https://github.com/signor1/filterablegallery
Last synced: about 1 year ago
JSON representation
A filterable Gallery built with ReactJs(tsx), Vite and tailwindcss
- Host: GitHub
- URL: https://github.com/signor1/filterablegallery
- Owner: Signor1
- Created: 2023-09-18T05:25:02.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-18T05:41:31.000Z (over 2 years ago)
- Last Synced: 2025-04-02T01:51:28.642Z (about 1 year ago)
- Language: TypeScript
- Size: 2.32 MB
- Stars: 7
- Watchers: 1
- Forks: 14
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Filterable Gallery with React.js, Vite, and Tailwind CSS
This is a simple filterable gallery application built using React.js with TypeScript, Vite for development, and Tailwind CSS for styling. The application allows users to filter and view images based on predefined categories.
## Features
- Filter images by category.
- Responsive design.
- Clean and minimalistic user interface.
- Fast development with Vite and TypeScript.
- Stylish UI components with Tailwind CSS.
## Getting Started
These instructions will help you set up and run the project on your local machine.
### Prerequisites
Make sure you have Node.js and npm (Node Package Manager) installed on your system.
### Installation
1. Clone the repository:
```bash
git clone https://github.com/Signor1/filterableGallery.git
```
2. Navigate to the project directory:
```bash
cd your-gallery-project
```
3. Install dependencies:
```bash
npm install
```
### Running the Development Server
Start the Vite development server:
```bash
npm run dev
```
The application should now be running locally at `http://localhost:5173`. Open this URL in your web browser to access the gallery.
### Building for Production
To build the project for production, run:
```bash
npm run build
```
This will generate a production-ready build in the `dist` directory.
## Usage
1. Open the gallery in your web browser.
2. Browse through the images.
3. Use the filter buttons to filter images by category.
## Contributing
Contributions are welcome! If you'd like to contribute to this project, please follow these guidelines:
1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them with descriptive commit messages.
4. Push your changes to your fork.
5. Create a pull request to the `main` branch of the original repository.
## Acknowledgments
- [React](https://reactjs.org/)
- [Vite](https://vitejs.dev/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Pexels](https://www.pexels.com/) for providing sample images.
## Contact
If you have any questions or feedback, feel free to contact me.