PhotoGallery

-Photo gallery created using React and Express js.

-Screenshot of Uploading and Displaying Images

Features

-Uploading Images

Uploads image in add icon's onChange event.It will Upload images to the backend and stores in images folder inside the public folder. While uploading the image name will be displayed under the add icon.

-Display Images in the Gallery

If the images folder is not empty. Image names will be feteched from the backend using GET api and send as an array to the frontend and attach with the api in img src.

-Progress Bar

Once the image starts uploading the progress bar will shows the transition from 0 t0 100. And also a success message will displays once it completed the uploading.

-Modals

OnClick of any images in the gallery, it will show the image in a modal with exact size of the image.

-Responsive UI

Technologies Used

-Multer

Multer middleware is used to handle file upload(image upload).

-Express.static()

Express.static, builtin middleware of express js is used to serve the static files (images) to the client.

-Axios

Axios is a popular javascript library for making HTTp request from the client side.(promise-based HTTP client for browser and node js).

-Plain CSS

UI styled using plain css.

-Vite

for bundling and serving app.

How to Run?

• Install Dependencies
• Run npm install to install the app's dependencies.

-Start the App

• Run npm run dev to start the app