Giter VIP home page Giter VIP logo

google-photos-clone's Introduction

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

google-photos-clone's People

Contributors

mani-barathi avatar pushpakb3096 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

google-photos-clone's Issues

adding validation for album name

Problem

Right now there is no validation check for the album name, which means a user can create an album with any number of characters.

Solution

check whether the length of the album name is between 1 and 16 characters.

Idea

Implement an if statement inside src/components/CreateAlbumModal.js before creating an album and check for the length of the album name, if it is more than 16 characters show a warning and not create the album.

Anyone who wants to implement this please let me know by leaving a comment below. I'll assign it to you

Typo in README

There is a typo in README under Technology Used section.
The word Cloud is misspelled as Clourd.

Anybody who is interested in contributing can fix this typo and make a PR.

Preventing user from uploading more than 3 photos in on go

Problem

Right now a user can upload as many images in one go, since this is a simple clone project it's really not required for the user to upload more images than a certain number.

Solution

Prevent the user from uploading more than 3 images in one go.

Idea

Implement an if statement before uploading and check the number of images the user is trying to upload, if it is more than 3 show a warning message and not upload it.

Anyone who wants to implement this please let me know by leaving a comment below. I'll assign it to you

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.