A clone of Google Keep with its original Material Design aesthetics

Overview

Logo A Clone of Google Keep

A minimal Clone of Google Keep written in ReactJS with Material UI Components, themed to look exactly like Google Keep, with complex features like sharing, archiving, reminders etc. shoved away. The backend is a GraphQL server written in Golang, with data persisted in SQLite DB file, via GORM. The server implementation is complete with Cookie based Authentication, implemented using Authboss.

Docker Image CI

Light and Dark theme demo
Light and Dark theme

Features

  • 🔐 Login & 🔏 Register for creating a new user

  • 🌈 Colors, 📐 Sizes, ❮❯ Margins, ❯❮ Paddings etc., matches exactly that of Google Keep's Web App

  • 📲 Responsive Design - Adapts all screen sizes from mobile screens up to 4k displays

  • 🌚 Dark Mode - Dynamically change light/dark theme

  • 📝 Notes - Create, Update, Copy, Delete items on the fly. Dynamically change between these 2 modes

    • 🗒 Simple Notes - Update/delete text in a simple text mode

    • ☑️ Todos with Checkboxes - Mark items complete/incomplete using the checkbox

  • 🚥 Colors - Assign colors to Notes & adapts to dark/light theme

  • 📜 Display Mode - Notes can appear in the canvas in 2 different modes

    • List - Displays notes as one item per row

    • Tile - Displays notes as tiles, and spread across the canvas

  • 🏷 Labels - Label your notes, assign/unassign labels dynamically and filter notes by selecting labels in Sidebar

  • 🔗 Subscriptions - When notes are created/deleted in different browser tabs, the updates are pushed from server to client

Preview Button

Mobile demo
Toggling themes, adding notes and assigning color and label. Later marking it as complete

Libraries Used

Frontend

Backend

Deployment

  • Docker - Multistage build - See Dockerfile

    • Builds a deployable Docker image in 3 stages

      • Stage 1 - Builds runtime binary for Golang server

      • Stage 2 - Builds Production-ready ReactJS artifacts

      • Stage 3 - Assembles the artifacts from Stage 1 & Stage 2, and builds a container image

  • Heroku - Container Deployment - See heroku.yml

    • Builds and deploys the Docker image, with a git push

Design

Architecture

This diagram explains the high-level architecture design of this project. This stack is a Monolith, with frontend-backend-database all packed into one single container deployment. Frontend is a ReactJS stack.

The Frontend is built with ReactJS using Material UI React components. The state management is through React's Hooks for State, Context & Reducer (see store.js). The main application is available at root /, which on load tries to load the noteitems.

Since the user will not authenticated by this time, the Router navigates the user to /login where the user can enter email & password to login. To register for a new user, the user clicks on the 'Register' link to navigate to /register route. The user may enter any name, email (no email verification in place) and password. All Login & Registration HTTP calls are REST and are made via Axios React Hooks API.

Once logged in, a session cookie will be set in the browser. Now, the GraphQL API is available at /query and URQL client loads all the Notes, Labels & User information, in a single query (However, has to be optimised, as URQL's caching mechanism, makes involuntary calls, whenever any of the mutation happens). UI displays the items. User may create, update, delete note items, and may also create & assign/unassign labels to note items. The labels may be added, but update/delete hasn't be implemented now. User can sign out, by clicking the 'Profile' icon and then 'Sign Out' button.

The Backend is built with Golang and no server framework is used, except Gorilla Mux, which provides utils for routing. The router consists for 3 major routes:

  • / - handles UI resources

  • /query - handles GraphQL requests and will be delegated to gqlgen generated GraphQL handlers. Throws NotAuthenticated error, if user is unauthenticated. Also, understands user information, via session cookie.

  • /auth - handles all authentication related requests and will be delegated to AuthBoss framework. The /auth/register, /auth/login & /auth/logout routes handle Registration, Login & Logout respectively.

The DB is a SQLite DB and the persistence is a file based API. GORM allows quick and easy Database modelling. The database tables are generated as per the modelling defined as Go Structs (see models_gen.go). The database modelling is done as per this ER Diagram

ER Diagram

Both gqlgen & AuthBoss has resolvers. gqlgen's resolvers (see resolver.go) helps in resolving Notes related data from database. While AuthBoss's resolvers (see storer.go) help in resolving user related information.

The Deployment is through a muti-stage Docker build, which facilitates building Go binary and ReactJS artifacts in one single command. The Docker image generated is a Monolith, which can be deployed & run, without any other external setup.

How to Setup and Build

Method 1: Docker

  1. Clone the Git repository
git clone https://github.com/anselm94/googlekeepclone.git
  1. CD into the folder
cd googlekeepclone
  1. Build a docker image containing all the web resources and server executable
docker build -t anselm94/googlekeepclone .
  1. Run the Docker image as a container
docker run -p 8080:8080 -e PORT=8080 anselm94/googlekeepclone:latest
  1. Open the URL in browser - https://localhost:8080

Method 2: Manual

  1. Clone the Git repository
git clone https://github.com/anselm94/googlekeepclone.git
  1. CD into the Web folder
cd googlekeepclone/web
  1. Install Node dependencies (Install NodeJS in prior) and build the resources into /build folder
EXPORT REACT_APP_WEBSOCKET_ENDPOINT=ws://localhost:8080/query
npm install
npm run build
  1. Run the Golang server (Install golang in prior)
cd ..
EXPORT PORT=8080
EXPORT STATIC_DIR=/web/build
EXPORT DB_FILE=keepclone.db
EXPORT COOKIE_STORE_KEY=$(uuidgen | base64)
EXPORT SESSION_STORE_KEY=$(uuidgen | base64)
go run server/main.go
  1. Open the URL in browser - https://localhost:8080

Development

  1. Clone the Git repository
git clone https://github.com/anselm94/googlekeepclone.git
  1. Download and Install Visual Studio Code

  2. Start the Go server in Debug mode. See launch.json

    • Go to 'Run' -> 'Launch Go API server'
  3. Start the React Dev Server task. See tasks.json

    • Press 'Ctrl + Shift + P' -> 'Tasks: Run tasks' -> Select 'Start React server'
  4. Launches https://localhost:3000 in the browser

License

MIT License

Copyright (c) 2020 Merbin J Anselm

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Issues
  • Possible JWT auth?

    Possible JWT auth?

    Is is possible to add jwt for react-native alongside Authboss?

    opened by kockok 1
  • Are the gorm model tags added manually?

    Are the gorm model tags added manually?

    Been reading through the code and saw the models_gen.go has gorm tags. Were these added to the generated code manually? I don't see what would add these in the repo, but figured I'd ask since there is also some effort for this kind of feature in other places:

    And thanks for the nice project; definitely helped me learn a few things.

    opened by jacobblock 1
  • Unable to launch it in Dubug mode

    Unable to launch it in Dubug mode

    Start the Go server in Debug mode. See launch.json Go to 'Run' -> 'Launch Go API server'

    Results in:

    go: github.com/matoous/[email protected]: parsing go.mod: go.mod:1: invalid go version '1.12.3': must match format 1.23
    exit status 1
    Process exiting with code: 1
    
    bug 
    opened by dragonblood 1
  • Heroku demo not working

    Heroku demo not working

    opened by harsh183 1
  • main.go not found

    main.go not found

    Hi. In the step 4 from the manual method I can't seem to make it work. The readme says

    cd .. EXPORT PORT=8080 EXPORT STATIC_DIR=/web/build EXPORT DB_FILE=keepclone.db EXPORT COOKIE_STORE_KEY=$(uuidgen | base64) EXPORT SESSION_STORE_KEY=$(uuidgen | base64) go run server/main.go

    But when I type go run server/main.go, it says that there's no main.go in the server folder. I've tested it on an Arch Linux machine and even on Windows 10, no luck. Also tried to build and install multiple times, and still no main.go.

    Could it be some dependency, even though it builds without any error besides out of date packages?

    documentation 
    opened by rc-ops 1
  • Bump axios from 0.19.2 to 0.21.1 in /web

    Bump axios from 0.19.2 to 0.21.1 in /web

    Bumps axios from 0.19.2 to 0.21.1.

    Release notes

    Sourced from axios's releases.

    v0.21.1

    0.21.1 (December 21, 2020)

    Fixes and Functionality:

    • Hotfix: Prevent SSRF (#3410)
    • Protocol not parsed when setting proxy config from env vars (#3070)
    • Updating axios in types to be lower case (#2797)
    • Adding a type guard for AxiosError (#2949)

    Internal and Tests:

    • Remove the skipping of the socket http test (#3364)
    • Use different socket for Win32 test (#3375)

    Huge thanks to everyone who contributed to this release via code (authors listed below) or via reviews and triaging on GitHub:

    v0.21.0

    0.21.0 (October 23, 2020)

    Fixes and Functionality:

    • Fixing requestHeaders.Authorization (#3287)
    • Fixing node types (#3237)
    • Fixing axios.delete ignores config.data (#3282)
    • Revert "Fixing overwrite Blob/File type as Content-Type in browser. (#1773)" (#3289)
    • Fixing an issue that type 'null' and 'undefined' is not assignable to validateStatus when typescript strict option is enabled (#3200)

    Internal and Tests:

    • Lock travis to not use node v15 (#3361)

    Documentation:

    • Fixing simple typo, existant -> existent (#3252)
    • Fixing typos (#3309)

    Huge thanks to everyone who contributed to this release via code (authors listed below) or via reviews and triaging on GitHub:

    ... (truncated)

    Changelog

    Sourced from axios's changelog.

    0.21.1 (December 21, 2020)

    Fixes and Functionality:

    • Hotfix: Prevent SSRF (#3410)
    • Protocol not parsed when setting proxy config from env vars (#3070)
    • Updating axios in types to be lower case (#2797)
    • Adding a type guard for AxiosError (#2949)

    Internal and Tests:

    • Remove the skipping of the socket http test (#3364)
    • Use different socket for Win32 test (#3375)

    Huge thanks to everyone who contributed to this release via code (authors listed below) or via reviews and triaging on GitHub:

    0.21.0 (October 23, 2020)

    Fixes and Functionality:

    • Fixing requestHeaders.Authorization (#3287)
    • Fixing node types (#3237)
    • Fixing axios.delete ignores config.data (#3282)
    • Revert "Fixing overwrite Blob/File type as Content-Type in browser. (#1773)" (#3289)
    • Fixing an issue that type 'null' and 'undefined' is not assignable to validateStatus when typescript strict option is enabled (#3200)

    Internal and Tests:

    • Lock travis to not use node v15 (#3361)

    Documentation:

    • Fixing simple typo, existant -> existent (#3252)
    • Fixing typos (#3309)

    Huge thanks to everyone who contributed to this release via code (authors listed below) or via reviews and triaging on GitHub:

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Pin notes

    Pin notes

    The only thing missing to make me move over from Google Keep is the ability to pin notes to the top. It is surprisingly a very important feature that is my only hangup. Otherwise, I really like the project.

    enhancement 
    opened by jbardi 2
Releases(v1.1)
🎵 The frontend of Oud, an online music streaming service that is a high quality clone of Spotify with all its functionalities built using ReactJS, React-Router, Bootstrap.

Oud Front-End Table of Contents About the Project Build with Getting Started Installation Running Screenshots Videos File Structure Unit Testing Runni

Ahmed Ashraf 40 Aug 16, 2021
This is not the real NETFLIX, its a clone. Built with REACT JS, authenticated and deployed with firebase.

NETFLIX-CLONE This is not the real NETFLIX, its a clone. Built with REACT JS and authenticated with firebase. click here to view the finished page I u

Kevv_in 4 Nov 16, 2021
A Spotify Clone which built with ReactJS. 3rd party API integration, user authentication, spotify API, responsive design, material-ui, react context api are used to built it.

Spotify Clone with ReactJS In this Spotify Clone application you can log in to the application with your spotify account and see your own playlist. Sp

Mert Çankaya 9 Nov 24, 2021
A React & react-router-powered implementation of Hacker News using its Firebase API.

react-hn A React & react-router-powered implementation of Hacker News using its Firebase API.

Jonny Buchanan 2.2k Nov 25, 2021
A junction between the application of the knowledge acquired throughout the study of ReactJs and a brief minimalist redesign of the Whatsapp application in its desktop version.

Whatsapp Clone Tecnologias | Projeto | Use ?? Tecnologias Esta aplicação foi desenvolvida com as seguintes tecnologias: HTML 5 CSS 3 JavaScript React

Ernane Ferreira 6 Nov 3, 2021
Node.js and mongoDB Google Drive Clone

MyDrive MyDrive is an Open Source cloud file storage server (Similar To Google Drive). Host myDrive on your own server or trusted platform and then ac

null 2.6k Nov 23, 2021
A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

Özge Coşkun Gürsucu 24 Nov 2, 2021
A Facebook Clone which built with reactJS. You can sign in with your Google Account and send realtime posts. Click demo to try it by yourself!

Facebook Clone with ReactJS A Facebook Clone that you can sign in with your Google Account and send realtime posts. Click demo to try it by yourself!

Özge Coşkun Gürsucu 18 Oct 9, 2021
A Google Clone which built with ReactJS. You can search whatever you want.

A React app which is Google Web Clone that you can simply search whatever you want.

Mert Çankaya 10 Nov 24, 2021
A Whatsapp Clone which built with reactJS. You can sign in with your Google Account and you can chat in real time.

Whatsapp Clone with ReactJS In this app you can create a simple chat room and send messages to each other using our google accounts in the room. Whats

Mert Çankaya 9 Nov 24, 2021
A Facebook Clone which built with reactJS. You can sign in with your Google Account and send realtime posts.

Facebook Clone with ReactJS A Facebook Clone application that you can sign in with your Google Account and send realtime posts. Facebook Clone Demo Li

Mert Çankaya 17 Nov 24, 2021
A Slack Clone which built with ReactJS. You can sign in with your Google Account and send realtime posts. Click demo to try it by yourself!

A Slack Clone that you can sign in with your Google Account, add new channels and send realtime messages to them.

Özge Coşkun Gürsucu 16 Oct 27, 2021
A Disney+ Clone which build with ReactJS & Redux. You can sign in with your Google Account.

Disney+ Clone with ReactJS A Disney+ Clone that you can sign in with your Google Account. Click demo to try it by yourself! Disney+ Clone Demo Link Yo

Özge Coşkun Gürsucu 16 Nov 25, 2021
Google Docs Clone created with Next.JS, Firebase, Tailwind CSS

Google Docs Clone created with Next.JS, Firebase, Tailwind CSS

Martin Velkov 6 Nov 29, 2021
Google Clone App powered by RapidAPI

Google Clone App powered by RapidAPI

Adrian Hajdin - JavaScript Mastery 97 Dec 1, 2021
Giggle ⚡ (Google Search Clone) using React and Tailwind CSS

Search for up-to-date results, news, images,and videos.Built a fully responsive modern UI with integrated Dark mode using React and Tailwind CSS. Implemented Dynamic Routing using react-router-dom. Used useDebounce hook for debouncing fast changing search value. Deployed on Netlify.

Sudhanshu Kumar 2 Nov 21, 2021
İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

İnstagram Clone.You can sign in, sign up, upload image, make comment ?? Used ReactJS, Material UI, Firebase, Firestore Database

null 20 Oct 31, 2021
Netflix Clone. Search and find your favorite movie with coming from TMDB API. Also you can watch the trailers 📽️ 🍿 Used ReactJS, Material UI, Firebase, Firestore Database

Netflix Clone. Search and find your favorite movie with coming from TMDB API. Also you can watch the trailers ??️ ?? Used ReactJS, Material UI, Firebase, Firestore Database

null 9 Jun 22, 2021
İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

?? instagram-clone This is a instagram clone. You can sign in, sign up, upload image, make comment ?? ⚡ LIVE To check out the live demo of this app AB

null 14 Jun 6, 2021