All Projects → mani-barathi → Google-Photos-Clone

mani-barathi / Google-Photos-Clone

Licence: MIT License
Google Photos Clone Built with React🚀 and Firebase🔥

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to Google-Photos-Clone

Express React Boilerplate
Express, MySQL, React/Redux, NodeJs Application Boilerplate
Stars: ✭ 179 (+952.94%)
Mutual labels:  react-router, material-ui
keep-graph
Keep Graph is a open source clone of Google Keep. It's built on top of React and GraphQL.
Stars: ✭ 29 (+70.59%)
Mutual labels:  react-router, material-ui
Wanna
💡✔ Wanna is an implementation of a 21st-century to-do list app.
Stars: ✭ 189 (+1011.76%)
Mutual labels:  react-router, material-ui
Web
⚡️ Supercharged version of Create React App with all the bells and whistles.
Stars: ✭ 594 (+3394.12%)
Mutual labels:  react-router, material-ui
io-dev
IO Dev is a portfolio website to showcase the work and projects I have created
Stars: ✭ 22 (+29.41%)
Mutual labels:  react-router, material-ui
Starter React Flux
Generate your React PWA project with TypeScript or JavaScript
Stars: ✭ 65 (+282.35%)
Mutual labels:  react-router, material-ui
Frontend
마음을 잇는 현명한 소비 '잇다'🤝
Stars: ✭ 19 (+11.76%)
Mutual labels:  react-router, material-ui
React Cnodejs.org
Material UI version of cnodejs.org, the biggest Node.js Chinese community.
Stars: ✭ 242 (+1323.53%)
Mutual labels:  react-router, material-ui
cra-flask
Unejected create-react-app ui, flask api with token authentication
Stars: ✭ 20 (+17.65%)
Mutual labels:  react-router, material-ui
material-ui-Link-within-MenuItem
Example for how to use `react-router/Link` within `material-ui/MenuItem`
Stars: ✭ 19 (+11.76%)
Mutual labels:  react-router, material-ui
Create React App Material Typescript Redux
A ready to use boilerplate for starting big react projects
Stars: ✭ 257 (+1411.76%)
Mutual labels:  react-router, material-ui
firefox-health-dashboard
firefox-health-dashboard.netlify.com
Stars: ✭ 26 (+52.94%)
Mutual labels:  react-router, material-ui
tmdb-viewer
A movie browsing/favoriting app
Stars: ✭ 63 (+270.59%)
Mutual labels:  react-router, material-ui
Online Shop
Online shop prototype implemented in React.
Stars: ✭ 168 (+888.24%)
Mutual labels:  react-router, material-ui
backoffice
React GUI-Framework based on Material UI; provides a couple of components for back-office apps (CRUD-based APIs)
Stars: ✭ 17 (+0%)
Mutual labels:  react-router, material-ui
PERN-Advanced-Starter
Advanced PERN stack starter kit (PostgresSQL, Express, React, & Node), complete with ESLint, Webpack 4, Redux, React-Router, and Material-UI kit.
Stars: ✭ 51 (+200%)
Mutual labels:  react-router, material-ui
Google-Clone
A Google Clone which built with ReactJS. When you click Gmail button, you will be directed to my other project, Gmail Clone. You can search whatever you want and send realtime emails by clicking Gmail button!
Stars: ✭ 37 (+117.65%)
Mutual labels:  react-router, material-ui
chatty
A React single-page-application alternative client for the shacknews chatty.
Stars: ✭ 27 (+58.82%)
Mutual labels:  react-router, material-ui
Facebook-Messenger
This is a Facebook Messenger clone.You can comminicate to other at realtime.Used ReactJS, Material UI, Firebase, Firestore Database
Stars: ✭ 18 (+5.88%)
Mutual labels:  material-ui
react-douban
A React project
Stars: ✭ 21 (+23.53%)
Mutual labels:  react-router

Google Photos Clone

A Google Photos Clone built with ReactJs🚀 and Firebase🔥

Click Here to View the Website

Features

  • Google Login
  • Upload multiple Photos at once
  • Create new Album
  • Delete Photos and Albums
  • Download Photos

Preview

Technology Used

  • React (FrontEnd)
    • Material-UI
    • react-router-dom
    • Redux
  • Firebase - Baas (Backend as a Service)
    • Firestore
    • Authentication (Google Authentication)
    • Cloud Storage

To run this on Local machine

  • Clone the repo, and cd into it
  • Install all the dependcies from package.json
  • Create a firebase project and enable Google login
  • Create a file src/firebase.js and place firebase project Keys inside as shown in src/firebase.example.js
  • Run app by typing npm start in command line
  • Make sure to read the Note section below

Note

  • All the functions which does the database transactions are created in a custom hook and imported into components. Check src\hooks\useFirestore.js
  • You will have to create Indexes in firestore, as HomePage, AlbumPage uses Nested Queries to fetch data from Firestore. While running the application for first time there will be an error in console stating you to create an Index in Firestore. That Error will provide a link to create an Index in Firestore , you can click on the link and create an Index. (This Error will be solved after that particular Index is created)
  • To Download Photo diretly from firebase storage in javacript as a Blob type, you have to change CORS policy in google cloud console, to know more check the below links
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].