A simple image gallery web app built with Firebase realtime, TypeScript, React, Vite, and Tailwind CSS/DaisyUI, and deployed with Netlify.
View Demo
app_screenrecord.mp4
or the video url on the server: https://vlad-image-gallery.netlify.app/app_screenrecord.mp4
This project is a part of a programming task for a job application, which I will treat as a personal project and will extend further. The task was to build a simple image gallery web app with the following requirements:
- It should be able to handle a large amount of images seamlessly, but currently I've built it with less than 20 minutes so I don't exhaust my Firebase usage.
- The app should have CRUD functionality. Showcase for this is adding, deleting and updating images data.
- Design, usability and UX should be well thought-out and executed.
- The app should be responsive and work on mobile devices.
The app currently doesn't have user authentication and validation, so please don't create unneeded users or upload any inappropriate images. I will add user authentication and validation in the future.
You can use the following existing user credentials for the time being:
User1:
username: [email protected]
password: 123123
John:
username: [email protected]
password: 123123
Keep in mind that the API keys and credentials for Firebase will be in an .env file which is not included in the repository. You can create your own Firebase project and add the keys in a .env file in the root directory of the project if you want to locally create this project.Otherwise please use the demo link.
- Install NPM packages
npm install
- Build the project
npm run build
- View the project
npm run preview
Or you can use the dev enviroment with hot reload:
npm run devYou can additionally add -- --host to the npm run dev command to view the project on your local network.
You will get a localhost links in the terminal in all cases.
A list of features that I plan to add to the project in the future when I have more time:
- Add multi-file upload
- Add full image popup
- Add image titles, categories and metadata
- Add automatic photo resize for thumbnails
- Add filter by categories or stars
- Add title search filter
- Add more complex user management - updating credentials
- Add user roles - admin, moderator, user
- Add numbered pagination, next/prev buttons or infinite-scroll
- Add notifications on events
- Remove daisyUI and generally improve the design and UX
Distributed under the MIT License. See LICENSE for more information.
List of resources I found helpful and would like to give credit to.