Image uploader allows users to upload images to firebase hosted storage. The app is built using React.js and Firebase with state stored in Redux. Offers a clean design and a user-friendly interface. Also with dark mode. Styling with TailwindCSS with dark mode following Material Design Principles.
The project was a challenge from Image-Uploader. In this simple-looking project, I had to incorporate React, Redux, and Firebase together to create an image uploader that can serve as a cornerstone for future projects.
Create an Image Uploader application. Use any front-end libraries of your choice. Create your API. Don’t look at the existing solution. Fulfill user stories below:
- I can drag and drop an image to upload it
- I can choose to select an image from my folder
- I can see a loader when uploading
- When the image is uploaded, I can see the image and copy it
- I can choose to copy to the clipboard
imageUploader.mp4
- Semantic HTML5 markup
- Flexbox
- CSS Grid
- Mobile-first workflow
- React
- Redux
- Firebase
- Tailwind CSS
This was my first project using Firebase and Redux. It allowed to me grasp those concepts in a simple but effective way. Also, another solid step in my Frontend React and TailwindCSS skills.
- Website - Chris Pantak
- Again used beautiful CSS spinner from Loading.io
- This is a solution to the Image-Uploader.