https://github.com/sohamsshah/pixelshash
📷 pixels turned into life.
https://github.com/sohamsshah/pixelshash
infinite-scroll lazy-loading nextjs react tailwindcss unsplash-api
Last synced: about 1 year ago
JSON representation
📷 pixels turned into life.
- Host: GitHub
- URL: https://github.com/sohamsshah/pixelshash
- Owner: sohamsshah
- License: mit
- Created: 2021-08-07T05:21:26.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-10-01T05:46:21.000Z (over 4 years ago)
- Last Synced: 2025-04-16T22:08:57.879Z (about 1 year ago)
- Topics: infinite-scroll, lazy-loading, nextjs, react, tailwindcss, unsplash-api
- Language: JavaScript
- Homepage: https://pixels-hash.vercel.app
- Size: 1.62 MB
- Stars: 10
- Watchers: 1
- Forks: 2
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
pixelsHash 📸
pixelsHash
·
Report Bug
·
Request Feature
---
## **Introducing pixelsHash 📸**
The Go-to place for High Quality, Beautiful and Picturesque 3-D matrices of Pixels - hashed perfectly for you to describe your thoughts in high resolution! 🖼⚡ You can view, search and download everything that you want! Powered By [Unsplash](https://unsplash.com/)!
## **🚀 Demo**
### [pixelsHash](https://github.com/sohamsshah/pixelsHash) is LIVE!
## **🧐 Features**
There are multiple features implemented on pixelsHash to make high quality pictures accessible to you easier like never before.
> 🖼 **pixelsHash** has:
- 🔎 **Search from over 2 million free high-resolution images** (powered by [Unsplash API](https://unsplash.com/documentation))
- ♾ **Infinite Scrolling**
- 💾 **Save your search History**
- ⚡ **Blazing Fast on all devices**
- 🔖 **Toggle between different Views**
- 💻 **Fully Responsive**
- ⤵️ **Download Pictures with a click**
- 🙈 **Profanity Filter** (Clean search and content, always)
- 🌘 **Dark mode**
## **⚡Lighthouse Report**
## 🛠️ **Spinning Up Development Environment**
1. Clone the repository
```bash
git clone https://github.com/sohamsshah/pixelsHash.git
```
2. Change the working directory
```bash
cd pixelsHash
```
3. Install dependencies
```bash
yarn
```
4. Create `.env.local` file in root and add your variables
```bash
NEXT_PUBIC_UNSPLASH_API_ACCESS_KEY='your unsplash api key here'
```
5. Run pixelsHash
```bash
yarn run dev
```
You are all set! Open [localhost:3000](http://localhost:3000/) to see the app.
## **💖 We love Contributions**
- **pixelsHash** is truly Open Source. Any sort of contribution to this project are highly appreciated. Create a branch, add commits, and [open a pull request](https://github.com/sohamsshah/pixelsHash/compare).
- Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md), and the process for submitting pull requests to **pixelsHash**.
## **💻 Built with**
- [Next JS](https://nextjs.org/)
- [Next Image](https://nextjs.org/docs/api-reference/next/image): for lazy loading images and optimized Images
- [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API): for smooth infinite scrolling
- [React Loading Skeleton](https://www.npmjs.com/package/react-loading-skeleton): for effective skeleton loading
- [Bad Words](https://www.npmjs.com/package/naughty-words): for Profanity Check 🙏
- [React Select](https://www.npmjs.com/package/react-select): for interactive search box
- [Vercel](http://vercel.com/): for hosting
- [Tailwind CSS](https://tailwindcss.com/): for beautiful UI styling
## **🌈Upcoming Features**
A lot of features are in the pipeline for pixelsHash. Some of them are
- 🥁 **Share Images**
- 👀 **Visual Search**
- 🎙 **Audio Search**
- 💖 **Favourites**
Have a feature in mind? Please create an issue [here](https://github.com/sohamsshah/pixelsHash/issues). Let's talk!
## 🛡️ License
This project is licensed under the MIT License - see the [`LICENSE`](LICENSE) file for details.
## 🦄 Deploy
---
## **👨💻 Author**
### 👤 Soham Shah
- Twitter: [@sohamsshah\_](https://twitter.com/sohamsshah_)
- Github: [@sohamsshah](https://github.com/sohamsshah)
- Hashnode: [@sohamsshah](https://hashnode.com/@sohamsshah)
- LinkedIN: [@sohamshah456](https://www.linkedin.com/in/sohamshah456/)
---
Liked pixelsHash📸?
O Stargazer✨! Can you ⭐️ this too?