https://github.com/kielx/image-uploader
Image Uploader featuring - React, Firebase, Redux, TailwindCSS, and Material Design Styling principles.
https://github.com/kielx/image-uploader
firebase firebase-storage material-design react redux redux-toolkit tailwindcss
Last synced: 3 months ago
JSON representation
Image Uploader featuring - React, Firebase, Redux, TailwindCSS, and Material Design Styling principles.
- Host: GitHub
- URL: https://github.com/kielx/image-uploader
- Owner: Kielx
- Created: 2021-08-27T19:29:29.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-09-02T20:23:36.000Z (almost 5 years ago)
- Last Synced: 2025-04-08T08:43:52.401Z (over 1 year ago)
- Topics: firebase, firebase-storage, material-design, react, redux, redux-toolkit, tailwindcss
- Language: CSS
- Homepage: https://image-uploader.pantak.net/
- Size: 1.34 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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.
## Table of contents
- [Table of contents](#table-of-contents)
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Video](#video)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
The project was a challenge from [Image-Uploader](https://devchallenges.io/challenges/O2iGT9yBd6xZBrOcVirx).
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.
### The challenge
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
### Video
https://user-images.githubusercontent.com/51516375/131900661-14bd5abf-1a66-4302-a68d-b842ab3011ac.mp4
### Built with
- Semantic HTML5 markup
- Flexbox
- CSS Grid
- Mobile-first workflow
- [React](https://reactjs.org/)
- [Redux](https://redux.js.org/)
- [Firebase](https://firebase.google.com/)
- [Tailwind CSS](https://tailwindcss.com//)
### What I learned
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.
## Author
- Website - [Chris Pantak](https://pantak.net)
## Acknowledgments
- Again used beautiful CSS spinner from [Loading.io](https://loading.io/css/)
- This is a solution to the [Image-Uploader](https://devchallenges.io/challenges/O2iGT9yBd6xZBrOcVirx).