Welcome to the Quick Picture, an image browser! This web application lets you dive into a sea of stunning images from Unsplash using various prompts. It's like a treasure hunt for visuals (but without the pirates... unless you want them! 🏴☠️).
/meme1.png)
I built this app to mix coding with beautiful images. It has an easy-to-use interface that lets you explore and find great pictures while I improve my skills in React, API integration, and user experience. As I built the app over the course of a week, I got more and more ideas, which led me to create this final version. Just a heads up: this app took away my sanity, but I’m relieved to say it’s finally done!
/meme2.png)
The app uses the Unsplash API to fetch images based on user input. You can search by keyword, get random images, or even stalk a photographer’s portfolio (just kidding... kind of!). It preloads images for a smoother experience, because who likes waiting? Yeah, not me either! 🚀
/meme3.png)
I’ve also added small UI/UX enhancements for an even smoother user experience. Plus, I've made it accessible for keyboard navigation! You can explore the app using only your keyboard, although some features will still require mouse events. Overall, you’ll find it to be a seamless experience! 👌🏻
- React: Perfect for building reusable UI components without losing my mind.
- TypeScript: Adds type safety, so my code behaves itself.
- Tailwind CSS: Makes styling super easy—no more boring custom CSS!
- Vite: Fast development that keeps me in the zone.
/meme4.png)
Here's a quick look at the project structure:
src
├── assets
│ ├── download.png
│ └── favicon.png
├── App.tsx
├── Button.tsx
├── Form.tsx
├── Images.tsx
├── index.css
├── index.tsx
└── Users.tsx
.gitignore
index.html
package.json
tailwind.config.js
vite.config.ts
Notice I didn’t include the .env file? That's intentional! 😏 You’ll need to create your own to get things up and running. 😉
Check out the live demo of the app here: Quick Picture.
/meme5.gif)
-
Clone the repository:
git clone https://github.com/https-sharif/quick-picture.git
-
Navigate to the project directory:
cd quick-picture/ -
Install the dependencies:
npm install
-
Create a
.envfile in the root directory and add your Unsplash API url and keys:VITE_UNSPLASH_API_URL=https://api.unsplash.com VITE_UNSPLASH_ACCESS_KEY=your_access_key VITE_UNSPLASH_SECRET_KEY=your_secret_key- To get these keys, sign up at Unsplash Developers, create a new app, and grab the Access Key and Secret Key from your dashboard.
-
Run the development server:
npm run dev
-
Open your browser and go to
http://localhost:3000(or whatever port your terminal says). Time to see my hard work in action! -
Start exploring the images! 🎉
/meme7.png)
This project is licensed under the MIT License. Use it, modify it, share it—whatever floats your boat!
I’m all ears for contributions! If you have cool ideas, suggestions, or improvements, feel free to create a pull request or open an issue. Let’s make this app even more epic together! 🚀
/meme6.png)