├── .firebaserc ├── public ├── favicon.ico ├── manifest.json └── index.html ├── src ├── images │ ├── pin1.png │ ├── font │ │ ├── fontello.eot │ │ ├── fontello.ttf │ │ ├── fontello.woff │ │ ├── fontello.woff2 │ │ └── fontello.svg │ ├── pin-outline.png │ ├── pin-in-diagonal-position.png │ └── fontello.css ├── components │ ├── index.js │ ├── TagWidget │ │ ├── scrollbar.css │ │ ├── AvaiableTags.js │ │ ├── widget-elements.js │ │ └── TagWidget.js │ ├── AuthForm │ │ ├── AuthForm.js │ │ ├── SocialsAuth.js │ │ ├── common-elements.js │ │ ├── LogInForm.js │ │ └── RegisterForm.js │ ├── Footer │ │ └── Footer.js │ ├── NotesList │ │ ├── Checkbox.js │ │ ├── NotesListMobile.js │ │ ├── Column.js │ │ ├── notes-list-elements.js │ │ ├── NotesList.js │ │ ├── Note.js │ │ └── NoteDraggable.js │ ├── NoteForm │ │ ├── NotesFormFooter.js │ │ ├── NoteFormElements.js │ │ └── NoteForm.js │ ├── ColorPicker │ │ ├── ColorPickerElements.js │ │ └── ColorPicker.js │ ├── TagList │ │ └── TagList.js │ ├── EditNoteModal │ │ └── EditNoteModal.js │ ├── Navigation │ │ ├── navigation-elements.js │ │ └── Navigation.js │ └── FormNoteList │ │ └── FormNoteList.js ├── containers │ ├── index.js │ ├── Home │ │ └── Home.js │ ├── About │ │ └── About.js │ └── Notes │ │ └── Notes.js ├── index.css ├── index.js ├── App.test.js ├── firebase │ ├── firebaseConfig.js │ ├── firebaseAuth.js │ └── firebaseAPI.js ├── redux │ ├── storeConfig.js │ ├── auth.js │ └── notes.js ├── UI │ └── theme.js ├── App.js └── utils.js ├── firebase.json ├── .gitignore ├── package.json ├── README.md ├── .firebase └── hosting.YnVpbGQ.cache └── index.html /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "keep-clone-app" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simon125/google-keep-clone/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/images/pin1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simon125/google-keep-clone/HEAD/src/images/pin1.png -------------------------------------------------------------------------------- /src/images/font/fontello.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simon125/google-keep-clone/HEAD/src/images/font/fontello.eot -------------------------------------------------------------------------------- /src/images/font/fontello.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simon125/google-keep-clone/HEAD/src/images/font/fontello.ttf -------------------------------------------------------------------------------- /src/images/pin-outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simon125/google-keep-clone/HEAD/src/images/pin-outline.png -------------------------------------------------------------------------------- /src/images/font/fontello.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simon125/google-keep-clone/HEAD/src/images/font/fontello.woff -------------------------------------------------------------------------------- /src/images/font/fontello.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simon125/google-keep-clone/HEAD/src/images/font/fontello.woff2 -------------------------------------------------------------------------------- /src/images/pin-in-diagonal-position.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simon125/google-keep-clone/HEAD/src/images/pin-in-diagonal-position.png -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import Navigation from './Navigation/Navigation'; 2 | import Footer from './Footer/Footer'; 3 | 4 | export { Navigation, Footer }; 5 | -------------------------------------------------------------------------------- /src/containers/index.js: -------------------------------------------------------------------------------- 1 | import Notes from './Notes/Notes'; 2 | import Home from './Home/Home'; 3 | import About from './About/About'; 4 | 5 | export { Notes, Home, About }; 6 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Nunito+Sans&display=swap"); 2 | 3 | *, 4 | body { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | font-family: "Nunito Sans", sans-serif; 9 | } 10 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./App"; 4 | import "normalize.css"; 5 | import "./index.css"; 6 | import "./images/fontello.css"; 7 | 8 | ReactDOM.render(, document.getElementById("root")); 9 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "build", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ], 9 | "rewrites": [ 10 | { 11 | "source": "**", 12 | "destination": "/index.html" 13 | } 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/components/TagWidget/scrollbar.css: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar { 2 | width: 10px; 3 | } 4 | 5 | /* Track */ 6 | ::-webkit-scrollbar-track { 7 | background: #f1f1f1; 8 | } 9 | 10 | /* Handle */ 11 | ::-webkit-scrollbar-thumb { 12 | background: #aaa; 13 | } 14 | 15 | /* Handle on hover */ 16 | ::-webkit-scrollbar-thumb:hover { 17 | background: #888; 18 | } 19 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | .env 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /src/components/AuthForm/AuthForm.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import LogInForm from "./LogInForm"; 3 | import RegisterForm from "./RegisterForm"; 4 | import SocialsAuth from "./SocialsAuth"; 5 | import { AuthContainer } from "./common-elements"; 6 | 7 | function AuthForm() { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | 17 | export default AuthForm; 18 | -------------------------------------------------------------------------------- /src/firebase/firebaseConfig.js: -------------------------------------------------------------------------------- 1 | import * as firebase from 'firebase/app'; 2 | 3 | const firebaseConfig = { 4 | apiKey: 'AIzaSyDkwiqR5UIPumMbcAFjUEXqY1gTHjA3_kQ', 5 | authDomain: 'keep-clone-app.firebaseapp.com', 6 | databaseURL: 'https://keep-clone-app.firebaseio.com', 7 | projectId: 'keep-clone-app', 8 | storageBucket: '', 9 | messagingSenderId: '324619407062', 10 | appId: '1:324619407062:web:c66d15ae773c4655' 11 | }; 12 | 13 | export const app = firebase.initializeApp(firebaseConfig); 14 | -------------------------------------------------------------------------------- /src/redux/storeConfig.js: -------------------------------------------------------------------------------- 1 | import { createStore, combineReducers, compose, applyMiddleware } from 'redux'; 2 | import ReduxThunk from 'redux-thunk'; 3 | import { auth } from './auth'; 4 | import { notes } from './notes'; 5 | 6 | const combinedReducers = combineReducers({ auth, notes }); 7 | 8 | export const store = createStore( 9 | combinedReducers, 10 | compose( 11 | applyMiddleware(ReduxThunk) 12 | // window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 13 | ) 14 | ); 15 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | const FooterContainer = styled.footer` 5 | height: 8vh; 6 | text-align: center; 7 | background: #f4b400; 8 | line-height: 70px; 9 | color: #fff; 10 | font-size: 20px; 11 | letter-spacing: 0.4px; 12 | @media (max-width: 959px) { 13 | height: 50px; 14 | line-height: 50px; 15 | } 16 | `; 17 | 18 | function Footer() { 19 | return Google Keep Clone; 20 | } 21 | 22 | export default Footer; 23 | -------------------------------------------------------------------------------- /src/containers/Home/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import AuthForm from '../../components/AuthForm/AuthForm'; 3 | import styled from 'styled-components'; 4 | 5 | const HomeContainer = styled.div` 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | min-height: 84vh; 10 | box-sizing: border-box; 11 | @media (max-width: 959px) { 12 | min-height: calc(100vh - 100px); 13 | } 14 | `; 15 | 16 | function Home() { 17 | return ( 18 | 19 | 20 | 21 | ); 22 | } 23 | 24 | export default Home; 25 | -------------------------------------------------------------------------------- /src/UI/theme.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | export const AppContainer = styled.div` 3 | min-height: 100%; 4 | background-color: #fcfcfc; 5 | `; 6 | export const Card = styled.div` 7 | padding: 15px; 8 | margin: 5px; 9 | border-radius: 3px; 10 | box-sizing: border-box; 11 | box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 12 | 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); 13 | background-color: #fff; 14 | @media (max-width: 500px) { 15 | margin: 5px 0; 16 | } 17 | `; 18 | export const Icon = styled.span` 19 | color: ${(props) => (props.color ? props.color : '#fff')}; 20 | `; 21 | -------------------------------------------------------------------------------- /src/components/NotesList/Checkbox.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | const CheckBoxContainer = styled.label` 5 | margin-right: 8px; 6 | cursor: pointer; 7 | `; 8 | 9 | export default function Checkbox({ handleCheck, listItem }) { 10 | return ( 11 | 12 | 16 | handleCheck(listItem)} 18 | style={{ display: 'none' }} 19 | type="checkbox" 20 | /> 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /src/components/NotesList/NotesListMobile.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { connect } from 'react-redux'; 3 | import Note from './Note'; 4 | 5 | const NotesListMobile = ({ notes }) => { 6 | return ( 7 |
15 | {Object.values(notes).map((note, index) => ( 16 | 17 | ))} 18 |
19 | ); 20 | }; 21 | const mapStateToProps = (state) => { 22 | return { 23 | notes: state.notes.notes 24 | }; 25 | }; 26 | 27 | export default connect(mapStateToProps, {})(NotesListMobile); 28 | -------------------------------------------------------------------------------- /src/redux/auth.js: -------------------------------------------------------------------------------- 1 | const LOG_IN = "LOG_IN"; 2 | const LOG_OUT = "LOG_OUT"; 3 | 4 | export const logIn = user => { 5 | return { 6 | type: LOG_IN, 7 | isLoggedIn: true, 8 | payload: user 9 | }; 10 | }; 11 | export const logOut = () => { 12 | return { 13 | type: LOG_OUT, 14 | payload: null 15 | }; 16 | }; 17 | 18 | const initialState = { 19 | isLoggedIn: false, 20 | user: null 21 | }; 22 | 23 | export const auth = (state = initialState, action) => { 24 | switch (action.type) { 25 | case "LOG_IN": 26 | return { 27 | ...state, 28 | isLoggedIn: true, 29 | user: action.payload 30 | }; 31 | case "LOG_OUT": 32 | return { 33 | ...state, 34 | isLoggedIn: false, 35 | user: null 36 | }; 37 | default: 38 | return { ...state }; 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Navigation, Footer } from './components'; 3 | import { Home, Notes, About } from './containers'; 4 | import { AppContainer } from './UI/theme'; 5 | import { Provider } from 'react-redux'; 6 | import { store } from './redux/storeConfig'; 7 | import { Route, BrowserRouter as Router, Switch } from 'react-router-dom'; 8 | function App() { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |