🪟 Picaso

Picaso is an image gallery app that fetches images from the Unsplash API. I built this side project for learning purposes and to also help beginners on their coding journey. I have used the latest technologies for this project.

📦 Technologies

• Vite
• React.js
• TailwindCSS
• Unsplash API

👩🏽‍🍳 The Process

I started this project because I wanted to learn more about React V18 and React Router V6. Initially, I thought of using the NextJS because that is what is now recommended by React documentation. But still, many people use the setup react boilerplate so decided to use that for this project. Moving forward I will only use NextJS. I did set up this project using the Vite boilerplate. I have installed TailwindCSS because I love using that and resonates with my development workflow.

I wanted to create the masonry grid for the image gallery so I used a plugin for that. Initially, I used BrowserRouter but discovered that GitHub pages do not allow that so switched to HashRouter just for deployment purposes.

📚 What I Learned

During this project, I've picked up important skills and a better understanding of React router v6 and React. Used TailwindCSS for styling the elements.

🧠 useNaviagate Hook:

🎣 React Hooks and Rendering:

💭 How can it be improved?

• Use different Unsplash APIs to create a collection of pictures.

🚦 Running the Project

To run the project in your local environment, follow these steps:

1. Clone the repository to your local machine.
2. Generate an API key from Unsplash and rename .env.sample to .env and put it over there.
3. Run yarn install or npm i in the project directory to install the required dependencies.
4. Run yarn dev or npm dev to get the project started.
5. Open http://localhost:5173/picaso/#/gallery/mountains in your web browser to view the app.

🍿 Video

Picaso.mp4