Web Frontend Engineer - Sticky Note Web App

├── run.sh ├── src ├── react-app-env.d.ts ├── setupTests.ts ├── App.test.tsx ├── index.css ├── reportWebVitals.ts ├── index.tsx ├── logo.svg ├── App.css └── App.tsx ├── public ├── robots.txt ├── star.png ├── unStar.png ├── favicon.ico ├── logo192.png ├── logo512.png ├── stickyPreview.png ├── manifest.json └── index.html ├── .gitignore ├── tsconfig.json ├── README.md └── package.json /run.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | npm start -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClickHere0521/simple-react-typescript-stickynote/HEAD/public/star.png -------------------------------------------------------------------------------- /public/unStar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClickHere0521/simple-react-typescript-stickynote/HEAD/public/unStar.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClickHere0521/simple-react-typescript-stickynote/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClickHere0521/simple-react-typescript-stickynote/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClickHere0521/simple-react-typescript-stickynote/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/stickyPreview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClickHere0521/simple-react-typescript-stickynote/HEAD/public/stickyPreview.png -------------------------------------------------------------------------------- /src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /.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 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /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 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Sticky Note 2 | 3 | This project is a simple sticky note with typescript and react 4 | 5 | ## Preview 6 | ![Sticky Note Preview](https://github.com/ClickHere0521/React-Typescript-StickyNote/blob/master/public/stickyPreview.png) 7 | ## How to run? 8 | 9 | Make sure that you have executed `npm install` 10 | 11 | In the project directory, you can run: 12 | 13 | ### simply run the shell file `run.sh` 14 | 15 | ### `yarn start` or `npm start` 16 | 17 | Runs the app in the development mode.\ 18 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 19 | 20 | The page will reload if you make edits.\ 21 | You will also see any lint errors in the console. 22 | 23 | ## Enjoy!!! 24 | If you like my work, please don't forget to ⭐ 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web-frontend-engineer-sticky-note-web-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "@types/jest": "^26.0.15", 10 | "@types/node": "^12.0.0", 11 | "@types/react": "^17.0.0", 12 | "@types/react-dom": "^17.0.0", 13 | "re-resizable": "^6.9.0", 14 | "react": "^17.0.2", 15 | "react-dom": "^17.0.2", 16 | "react-scripts": "4.0.3", 17 | "typescript": "^4.1.2", 18 | "web-vitals": "^1.0.1" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Web Frontend Engineer - Sticky Note Web App 28 | 29 | 30 | 31 |

32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | 40 | .Board { 41 | width: 2000px; 42 | height: 2000px; 43 | border: 1px solid #333; 44 | position: relative; 45 | } 46 | 47 | .AddCard { 48 | cursor: pointer; 49 | padding: 10px 20px; 50 | border-radius: 10px; 51 | font-weight: bold; 52 | z-index: 1000; 53 | background: white; 54 | margin: 60px; 55 | } 56 | 57 | .starredNotes { 58 | cursor: pointer; 59 | padding: 10px 20px; 60 | border-radius: 10px; 61 | font-weight: bold; 62 | background: white; 63 | margin-left: 60px; 64 | 65 | } 66 | 67 | .Card { 68 | border: 1px solid #bdbdbd; 69 | position: absolute!important; 70 | width: 200px; 71 | height: 200px; 72 | min-width: 140px; 73 | min-height: 200px; 74 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 75 | background-color: white; 76 | border-radius: 15px; 77 | transition: 0.07s; 78 | opacity: 0.99; 79 | } 80 | 81 | .DeleteBtn { 82 | position: absolute; 83 | top: 7px; 84 | right: 7px; 85 | opacity: 0.5; 86 | border: none; 87 | background: transparent; 88 | font-size: 20px; 89 | } 90 | 91 | .EditableText { 92 | min-height: 110px; 93 | min-width: 80px; 94 | width: 100%; 95 | height: 100%; 96 | margin-top: 12px; 97 | border: none; 98 | font-size: 0.92rem; 99 | line-height: 1rem; 100 | font-family: "M PLUS Rounded 1c"; 101 | background: transparent; 102 | overflow: hidden; 103 | resize: none; 104 | } 105 | 106 | .Text { 107 | min-height: 110px; 108 | min-width: 80px; 109 | width: 100%; 110 | height: 100%; 111 | margin-top: 12px; 112 | border: none; 113 | font-size: 0.92rem; 114 | line-height: 1rem; 115 | font-family: "M PLUS Rounded 1c"; 116 | background: transparent; 117 | overflow: hidden; 118 | resize: none; 119 | } 120 | 121 | textarea:focus { 122 | outline: 0; 123 | } 124 | 125 | .ColorSelector { 126 | position: absolute; 127 | top: 30px; 128 | right: 9px; 129 | } 130 | 131 | .ColorCircle { 132 | width: 10px; 133 | height: 10px; 134 | margin: 2px; 135 | padding: 2px; 136 | border: solid 1px #dedede; 137 | border-radius: 50%; 138 | } 139 | 140 | .Image { 141 | width: 20px; 142 | height: 20px; 143 | position: absolute; 144 | top: 10px; 145 | } 146 | 147 | .Draggable { 148 | width: 100%; 149 | height: 100%; 150 | } 151 | 152 | .NoteBody { 153 | padding: 40px 40px 20px 20px; 154 | } -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Resizable } from "re-resizable"; 3 | import './App.css'; 4 | 5 | type Item = { text: string, color: number, x: number, y: number, star: boolean }; 6 | type Items = { [key: string]: Item }; 7 | 8 | const CORLORS = ["#F2C079", "#FF7854", "#BD88FF", "#DEFB86", "#50ECFF", "#FFF"]; 9 | 10 | const App: React.FC = () => { 11 | const [items, setItems] = useState({ 12 | '0': { text: "The beginning of the screenless design: UI jobs to be taken over by Solution Architect", color: 5, x: 100, y: 150, star: true }, 13 | '1': { text: "13 Things You Should Give Up If You Want To Be a Successful UX Designer", color: 1, x: 100, y: 450, star: true }, 14 | '2': { text: "The Psychology Principles Every UI/UX Designer Needs to Know", color: 3, x: 400, y: 150, star: false }, 15 | '3': { text: "10 UI & UX Lessons from Designing My Own Product", color: 2, x: 400, y: 450, star: false }, 16 | '4': { text: "52 Research Terms you need to know as a UX Designer", color: 4, x: 700, y: 150, star: false }, 17 | '5': { text: "Text fields & Forms design - UI component series", color: 0, x: 700, y: 450, star: false }, 18 | }); 19 | const [dragging, setDragging] = useState({ key: "", x: 0, y: 0 }); 20 | const [input, setInput] = useState(""); 21 | const [editMode, setEditMode] = useState({ key: "", w: 0, h: 0 }); 22 | const [show, setShow] = useState('all'); 23 | const [cardZIndex, setCardZIndex] = useState('0'); 24 | 25 | const add = () => { 26 | const lastKey:string|undefined = Object.keys(items).pop(); 27 | const newPostKey:number = lastKey? Number(lastKey) + 1 : 0; 28 | setItems({...items, 29 | [newPostKey]: { 30 | ...items[newPostKey], 31 | text: "text here", 32 | color: 5, 33 | x: window.scrollX + Math.floor(Math.random() * (200 - 80) + 80), 34 | y: window.scrollY + Math.floor(Math.random() * (200 - 80) + 80), 35 | }, 36 | }); 37 | }; 38 | 39 | const remove = (key: string) => { 40 | const tempItems = { ...items }; 41 | delete tempItems[key]; 42 | setItems(tempItems); 43 | }; 44 | 45 | const StickyNote = (key: string) => { 46 | return ( 47 | 62 |

65 | setDragging({ 66 | key, 67 | x: e.clientX - items[key].x, 68 | y: e.clientY - items[key].y, 69 | }) 70 | } 71 | onFocus={() => { 72 | setCardZIndex(key); 73 | }} 74 | className="Draggable" 75 | > 76 |

77 | 80 |

setItems({ ...items, [key]: { ...items[key], star: !items[key].star }})} 85 | /> 86 |

87 | {CORLORS.map((c, i) => ( 88 |

{ 92 | setItems({ ...items, [key]: { ...items[key], color: i }}); 93 | }} 94 | style={{ background: c }} 95 | /> 96 | ))} 97 |

98 | {editMode.key === key ? ( 99 | 125 | )} 126 |

127 |

128 | 129 | ); 130 | }; 131 | 132 | const renderButtons = () => { 133 | return ( 134 |

135 | 138 | 141 | 144 | 147 |

148 | ); 149 | } 150 | 151 | return ( 152 |

e.preventDefault()} 155 | onDrop={(e) => { 156 | if (!dragging || !items) return; 157 | setItems({...items, 158 | [dragging.key]: { 159 | ...items[dragging.key], 160 | x: e.clientX - dragging.x, 161 | y: e.clientY - dragging.y, 162 | } 163 | }); 164 | }} 165 | > 166 | {renderButtons()} 167 |

168 | {Object.keys(items).map((key) => { 169 | switch (show) { 170 | case 'all': return StickyNote(key); 171 | case 'star': return items[key].star ? StickyNote(key) : null; 172 | case 'unstar': return items[key].star ? null : StickyNote(key); 173 | default: return StickyNote(key); 174 | } 175 | })} 176 |

177 |

178 | ); 179 | } 180 | 181 | export default App; 182 | --------------------------------------------------------------------------------