├── .gitattributes
├── public
    ├── notes.png
    ├── robots.txt
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── craco.config.js
├── src
    ├── index.js
    ├── index.css
    ├── components
    │   ├── NotesList.js
    │   ├── Header.js
    │   ├── NoteView.js
    │   ├── Note.js
    │   ├── Tag.js
    │   ├── Search.js
    │   └── NoteForm.js
    └── App.js
├── tailwind.config.js
├── .gitignore
├── package.json
└── README.md


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/public/notes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hellodeborahuk/coding-notebook/HEAD/public/notes.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hellodeborahuk/coding-notebook/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/craco.config.js:
--------------------------------------------------------------------------------
1 | // craco.config.js
2 | module.exports = {
3 |   style: {
4 |     postcss: {
5 |       plugins: [require("tailwindcss"), require("autoprefixer")],
6 |     },
7 |   },
8 | };
9 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | 
 6 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 |   document.getElementById('root')
11 | );
12 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
 3 |   darkMode: false, // or 'media' or 'class'
 4 |   theme: {
 5 |     extend: {},
 6 |   },
 7 |   variants: {
 8 |     extend: {},
 9 |   },
10 |   plugins: [],
11 | };
12 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | /* ./src/index.css */
 2 | @tailwind base;
 3 | @tailwind components;
 4 | @tailwind utilities;
 5 | 
 6 | 
 7 | .Note {
 8 |     min-height: 170px;
 9 | }
10 | 
11 | .dark-mode {
12 |     background-color: #14532D;
13 |     
14 | }
15 | 
16 | .dark-mode h1 {
17 |     color: 
18 | #F0FDF4;
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 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/components/NotesList.js:
--------------------------------------------------------------------------------
 1 | import Note from "./Note";
 2 | import NoteForm from "./NoteForm";
 3 | 
 4 | const NotesList = ({ notes, handleAddNote, handleDeleteNote, handleEditNote }) => {
 5 |   return (
 6 |     <div className="NotesList lg:grid grid-cols-3 gap-6 space-y-8 lg:space-y-0">
 7 |       <NoteForm handleAddNote={handleAddNote} />
 8 |       {notes.map((note) => (
 9 |         <Note note={note} handleDeleteNote={handleDeleteNote} handleEditNote={handleEditNote} />
10 |       ))}
11 |     </div>
12 |   );
13 | };
14 | 
15 | export default NotesList;
16 | 


--------------------------------------------------------------------------------
/src/components/Header.js:
--------------------------------------------------------------------------------
 1 | import { FaMoon, FaSun } from "react-icons/fa";
 2 | 
 3 | const Header = ({handleToggleDarkMode, darkMode}) => {
 4 | 
 5 |     const icon = darkMode? <FaSun />:<FaMoon />;
 6 | 
 7 |     return (
 8 |       <div className="container mx-auto flex items-center justify-between">
 9 |         <h1 className="text-5xl font-bold text-green-900 py-6">Notes</h1>
10 |         <button
11 |           className="toggle my-6 p-2 text-xl rounded-full bg-green-600 hover:bg-green-900 transition duration-500 text-green-50"
12 |           onClick={() =>
13 |             handleToggleDarkMode((previousDarkMode) => !previousDarkMode)
14 |           }
15 |         >
16 |           {icon}
17 |         </button>
18 |       </div>
19 |     );
20 | }
21 | 
22 | export default Header;


--------------------------------------------------------------------------------
/src/components/NoteView.js:
--------------------------------------------------------------------------------
 1 | 
 2 | function NoteView({note}) {
 3 | 
 4 | return (
 5 |   <>
 6 |     <div className="p-4 flex items-center justify-between relative border-b border-green-700">
 7 |       <h3 className="font-bold text-green-900">{note.title}</h3>
 8 |       <div className="flex space-x-2">
 9 |         <div className="w-3 h-3 rounded-full bg-red-500"></div>
10 |         <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
11 |         <div className="w-3 h-3 rounded-full bg-green-500"></div>
12 |       </div>
13 |     </div>
14 | 
15 |     <div className="p-4 flex-grow flex-col">
16 |       <p className="mb-3 text-green-800">{note.text}</p>
17 |       <div className="flex flex-wrap">
18 |         {note.tags.map((tag, index) => {
19 |           return (
20 |             <div
21 |               key={index}
22 |               className="bg-green-600 text-green-50 py-1 px-2 mr-1 mb-2  rounded-lg"
23 |             >
24 |               {tag}
25 |             </div>
26 |           );
27 |         })}
28 |       </div>
29 |     </div>
30 |   </>
31 | );
32 | }
33 | 
34 | export default NoteView;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "coding-notebook",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@craco/craco": "^6.2.0",
 7 |     "@testing-library/jest-dom": "^5.14.1",
 8 |     "@testing-library/react": "^11.2.7",
 9 |     "@testing-library/user-event": "^12.8.3",
10 |     "react": "^17.0.2",
11 |     "react-dom": "^17.0.2",
12 |     "react-icons": "^4.2.0",
13 |     "react-scripts": "4.0.3",
14 |     "web-vitals": "^1.1.2"
15 |   },
16 |   "scripts": {
17 |     "start": "craco start",
18 |     "build": "craco build",
19 |     "test": "craco test",
20 |     "eject": "react-scripts eject"
21 |   },
22 |   "eslintConfig": {
23 |     "extends": [
24 |       "react-app",
25 |       "react-app/jest"
26 |     ]
27 |   },
28 |   "browserslist": {
29 |     "production": [
30 |       ">0.2%",
31 |       "not dead",
32 |       "not op_mini all"
33 |     ],
34 |     "development": [
35 |       "last 1 chrome version",
36 |       "last 1 firefox version",
37 |       "last 1 safari version"
38 |     ]
39 |   },
40 |   "devDependencies": {
41 |     "autoprefixer": "^9.8.6",
42 |     "postcss": "^7.0.36",
43 |     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7"
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/components/Note.js:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import { MdDeleteForever } from "react-icons/md";
 3 | import { MdEdit } from "react-icons/md";
 4 | import NoteView from "./NoteView";
 5 | import NoteForm from "./NoteForm";
 6 | 
 7 | const Note = ({ note, handleDeleteNote, handleEditNote }) => {
 8 |   const [editing, setEditing] = useState(false);
 9 | 
10 |   const editHandler = (data) => {
11 |     handleEditNote(data);
12 |     setEditing(false);
13 |   };
14 | 
15 |   const footer = editing ? (
16 |     ""
17 |   ) : (
18 |     <div className="flex items-center justify-between p-4 note-footer">
19 |       <small className="text-green-900">{note.date}</small>
20 |       <div className="flex space-x-2">
21 |         <MdEdit
22 |           className="edit-icon text-green-900
23 |               hover:text-green-600 cursor-pointer"
24 |           size="1.3em"
25 |           onClick={() => setEditing(true)}
26 |         />
27 |         <MdDeleteForever
28 |           onClick={() => handleDeleteNote(note.id)}
29 |           className="delete-icon text-green-900 hover:text-green-600 cursor-pointer"
30 |           size="1.3em"
31 |         />
32 |       </div>
33 |     </div>
34 |   );
35 | 
36 |   return (
37 |     <div className="Note flex flex-col justify-between bg-green-50 border border-green-700 rounded-lg shadow-lg">
38 |       {editing ? (
39 |         <NoteForm handleAddNote={editHandler} defaultState={note} />
40 |       ) : (
41 |         <NoteView note={note} />
42 |       )}
43 |       {footer}
44 |     </div>
45 |   );
46 | };
47 | export default Note;
48 | 


--------------------------------------------------------------------------------
/src/components/Tag.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | function Tag({ updateTags, clearTags, defaultTags }) {
 4 |   const [tags, setTags] = useState([]);
 5 | 
 6 |   useEffect(() => {
 7 |     setTags(defaultTags || []);
 8 |     // eslint-disable-next-line
 9 |   }, [clearTags]);
10 | 
11 |   useEffect(() => {
12 |     updateTags(tags);
13 |     // eslint-disable-next-line
14 |   }, [tags]);
15 | 
16 |   const addTag = (event) => {
17 |     if (event.key === "Enter") {
18 |       if (event.target.value.length > 0) {
19 |         setTags([...tags, event.target.value]);
20 | 
21 |         event.target.value = "";
22 |       }
23 |     }
24 |   };
25 |   const removeTag = (removedTag) => {
26 |     const newTags = tags.filter((tag) => tag !== removedTag);
27 |     setTags(newTags);
28 |   };
29 | 
30 |   return (
31 |     <div>
32 |       <div className="flex flex-wrap ">
33 |         {tags.map((tag, index) => {
34 |           return (
35 |             <div
36 |               key={index}
37 |               className="bg-green-600 text-green-50 py-1 px-2 mr-1 rounded-lg"
38 |             >
39 |               {tag}{" "}
40 |               <span
41 |                 className="cursor-pointer font-bold text-yellow-500"
42 |                 onClick={() => removeTag(tag)}
43 |               >
44 |                 x
45 |               </span>
46 |             </div>
47 |           );
48 |         })}
49 |       </div>
50 |       <input
51 |         onKeyDown={addTag}
52 |         placeholder="Add a tag..."
53 |         className="bg-gray-200 mt-2 rounded-lg pl-2 p-1"
54 |       />
55 |     </div>
56 |   );
57 | }
58 | 
59 | export default Tag;
60 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Notes app
 2 | 
 3 | ![Notes app gif](https://user-images.githubusercontent.com/29425781/154816386-2c00b005-a4ec-4bbb-a4f2-5b17047c0db6.gif)
 4 | 
 5 | ## About the project
 6 | 
 7 | I wanted to create an CRUD project that would allow me to track my notes from #100DaysOfCode challenge on Twitter. 
 8 | 
 9 | I followed a [tutorial on YouTube](https://www.youtube.com/watch?v=8KB3DHI-QbM) where I encountered issues as I wanted inputs from two fields. This was also a challenge when it came to searching within the two fields. 
10 | 
11 | I decided to use Tailwind CSS as it's something I've recently been learning and I really liked how simple it was to create the look of the note component, similar to a window. 
12 | 
13 | After the initial setup of the notes and saving them to local storage, I added tagging functionality. I could now add and remove multiple tags from each note. 
14 | 
15 | With the ability to add tags, I thought it would be useful to filter notes by tag so I added a filter button next to the search. 
16 | 
17 | To create the edit functionality I had to refactor my components so that the form stood alone but also was included in the Note. The Note component contains two further components: the form and the note view. This meant went the edit button was clicked it would show the form and when saved it would show the note view.
18 | 
19 | ![coding-notebook-screenshot](https://user-images.githubusercontent.com/29425781/169498167-48b7c92e-77fa-4218-b7e1-fb470a1242b1.png)
20 | 
21 | ## Technologies used
22 | 
23 | * React
24 | * HTML
25 | * Tailwind CCS
26 | 
27 | ## Roadmap
28 | 
29 | 1. Save information to a database.
30 | 2. Ability to login.
31 | 3. Pin notes to the top.
32 | 
33 | ## Contact
34 | 
35 | Debbie Dann @debbie_digital on Twitter
36 | 
37 | Project link: [#100DaysOfCode Notes](https://awesome-lamport-4fcaff.netlify.app/)
38 | 


--------------------------------------------------------------------------------
/src/components/Search.js:
--------------------------------------------------------------------------------
 1 | import { MdSearch } from "react-icons/md";
 2 | import { useState } from "react";
 3 | 
 4 | const Search = ({ notes, handleSearchNote, handleTagFilter }) => {
 5 |   const [showTags, setShowTags] = useState(false);
 6 | 
 7 |   const onClick = () => {
 8 |     setShowTags(!showTags);
 9 |     handleTagFilter(null);
10 |   };
11 | 
12 |   const TagList = () => {
13 |     const tags = notes.reduce((carry, note) => {
14 |       note.tags.forEach((element) => {
15 |         if (!carry.includes(element)) {
16 |           carry.push(element);
17 |         }
18 |       });
19 |       return carry;
20 |     }, []);
21 |     return (
22 |       <div className="flex flex-wrap">
23 |         {tags.map((tag, index) => {
24 |           return (
25 |             <button
26 |               key={index}
27 |               className="bg-green-600 text-green-50 py-1 px-2 mr-1 mb-2  rounded-lg"
28 |               onClick={() => handleTagFilter(tag)}
29 |             >
30 |               {tag}
31 |             </button>
32 |           );
33 |         })}
34 |       </div>
35 |     );
36 |   };
37 | 
38 |   return (
39 |     <div>
40 |       <div className="flex space-x-4 mb-6">
41 |         <div className="container mx-auto flex items-center bg-gray-200 rounded-lg p-2 ">
42 |           <MdSearch className="" size="1.3em" />
43 |           <input
44 |             onChange={(event) => handleSearchNote(event.target.value)}
45 |             type="text"
46 |             placeholder="Type to search..."
47 |             className="bg-gray-200 lg:w-1/2"
48 |           />
49 |         </div>
50 |         <button
51 |           onClick={onClick}
52 |           className="rounded-lg px-5 py-1 bg-green-600 text-green-50"
53 |         >
54 |           Filter
55 |         </button>
56 |       </div>
57 |       <div className="mb-6">{showTags ? <TagList /> : null}</div>
58 |     </div>
59 |   );
60 | };
61 | 
62 | export default Search;
63 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="A CRUD application to store and edit notes using React and Tailwind CSS. You can tag notes, search and filter the results."
11 |     />
12 |    <meta property='og:title' content='Notes App'/>
13 | <meta property='og:description' content='A CRUD application to store and edit notes.'/>
14 | <meta property='og:url' content='https://awesome-lamport-4fcaff.netlify.app/'/>
15 | <meta property="og:image" content="https://user-images.githubusercontent.com/29425781/169498167-48b7c92e-77fa-4218-b7e1-fb470a1242b1.png" />
16 |     <link rel="manifest" href="manifest.json" />
17 |     <!--
18 |       Notice the use of %PUBLIC_URL% in the tags above.
19 |       It will be replaced with the URL of the `public` folder during the build.
20 |       Only files inside the `public` folder can be referenced from the HTML.
21 | 
22 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
23 |       work correctly both with client-side routing and a non-root public URL.
24 |       Learn how to configure a non-root public URL by running `npm run build`.
25 |     -->
26 |     <title>Notes app</title>
27 |   </head>
28 |   <body>
29 |     <noscript>You need to enable JavaScript to run this app.</noscript>
30 |     <div id="root"></div>
31 |     <!--
32 |       This HTML file is a template.
33 |       If you open it directly in the browser, you will see an empty page.
34 | 
35 |       You can add webfonts, meta tags, or analytics to this file.
36 |       The build step will place the bundled scripts into the <body> tag.
37 | 
38 |       To begin the development, run `npm start` or `yarn start`.
39 |       To create a production bundle, use `npm run build` or `yarn build`.
40 |     -->
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/src/components/NoteForm.js:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import Tag from "./Tag";
 3 | 
 4 | const AddNote = ({ handleAddNote, defaultState }) => {
 5 |   const [data, setData] = useState(defaultState || { title: "", text: "", tags: [] });
 6 |   const [saveCounter, setSaveCounter] = useState(0);
 7 | 
 8 |   const handleChange = (event) => {
 9 |     setData({ ...data, [event.target.name]: event.target.value });
10 |   };
11 | 
12 |   const updateTags = (tags) => {
13 |     setData({...data, tags});
14 |   }
15 | 
16 |   const handleSaveClick = () => {
17 |     if (data.title.trim().length > 0 && data.text.trim().length > 0) {
18 |       handleAddNote(data);
19 |       setData({ title: "", text: "", tags: [] }); // reset data to new object
20 |       setSaveCounter(saveCounter +1);
21 |     } 
22 |   };
23 | 
24 |   return (
25 |     <div className="Note flex flex-col flex-grow border bg-white border-green-700 rounded-lg shadow-lg">
26 |       <div className="p-4 flex items-center justify-between relative border-b border-green-700">
27 |         <input
28 |           type="text"
29 |           placeholder="Enter title..."
30 |           className="text-green-900 font-bold"
31 |           name="title"
32 |           value={data.title}
33 |           onChange={handleChange}
34 |         />
35 |         <div className="flex space-x-2">
36 |           <div className="w-3 h-3 rounded-full bg-red-500"></div>
37 |           <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
38 |           <div className="w-3 h-3 rounded-full bg-green-500"></div>
39 |         </div>
40 |       </div>
41 | 
42 |       <div className="p-4 flex-grow flex-col">
43 |         <textarea
44 |           className="w-full text-green-800"
45 |           placeholder="Type to add a note..."
46 |           name="text"
47 |           value={data.text}
48 |           onChange={handleChange}
49 |         ></textarea>
50 |         <div>
51 |           <Tag
52 |             updateTags={updateTags}
53 |             clearTags={saveCounter}
54 |             defaultTags={data.tags}
55 |           />
56 |         </div>
57 |         <div className="flex justify-end note-footer">
58 |           <button
59 |             onClick={handleSaveClick}
60 |             className="rounded-2xl px-3 py-1 bg-green-600 hover:bg-green-900 transition duration-500 text-green-50"
61 |           >
62 |             Save
63 |           </button>
64 |         </div>
65 |       </div>
66 |     </div>
67 |   );
68 | };
69 | 
70 | export default AddNote;
71 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import { nanoid } from "nanoid";
 3 | import NotesList from "./components/NotesList";
 4 | import Search from "./components/Search";
 5 | import Header from "./components/Header";
 6 | 
 7 | const App = () => {
 8 |   const [notes, setNotes] = useState([]);
 9 |   const [searchText, setSearchText] = useState("");
10 |   const [tagFilter, setTagFilter] = useState(null);
11 |   const [darkMode, setDarkMode] = useState(false);
12 | 
13 |   useEffect(() => {
14 |     const savedNotes = JSON.parse(localStorage.getItem("react-notes-app-data"));
15 | 
16 |     if (savedNotes) {
17 |       setNotes(savedNotes);
18 |     }
19 |   }, []); // empty array runs only on first load
20 | 
21 |   useEffect(() => {
22 |     localStorage.setItem("react-notes-app-data", JSON.stringify(notes));
23 |   }, [notes]);
24 | 
25 |   const addNote = (name) => {
26 |     const date = new Date();
27 |     const newNote = {
28 |       id: nanoid(),
29 |       title: name.title,
30 |       text: name.text,
31 |       date: date.toLocaleDateString(),
32 |       tags: name.tags,
33 |     };
34 |     const newNotes = [...notes, newNote];
35 |     setNotes(newNotes);
36 |   };
37 | 
38 | const editNote = (data) => {
39 |   let tmp = [...notes];
40 |   const index = tmp.findIndex((note) => note.id === data.id);
41 |   if (index > -1) {
42 |     tmp.splice(index, 1, data);
43 |     setNotes(tmp);
44 |   }
45 | }
46 | 
47 |   const deleteNote = (id) => {
48 |     const newNotes = notes.filter((note) => note.id !== id);
49 |     setNotes(newNotes);
50 |   };
51 | 
52 |   const searchTagFilter = (note) => {
53 |     if (tagFilter !== null) {
54 |       return note.tags.includes(tagFilter);
55 |     }
56 | 
57 |     return true;
58 |   };
59 | 
60 |   const searchTextFilter = (note) => {
61 |     if (searchText !== "") {
62 |       return (
63 |         note.title.toLowerCase().includes(searchText.toLowerCase()) ||
64 |         note.text.toLowerCase().includes(searchText.toLowerCase())
65 |       );
66 |     }
67 |     return true;
68 |   };
69 | 
70 |   return (
71 |     <div className={`${darkMode && "dark-mode"}`}>
72 |       <div className="container mx-auto max-w-screen-lg min-h-screen p-4 ">
73 |         <Header handleToggleDarkMode={setDarkMode} darkMode={darkMode} />
74 |         <Search
75 |           handleSearchNote={setSearchText}
76 |           handleTagFilter={setTagFilter}
77 |           notes={notes}
78 |         />
79 |         <NotesList
80 |           notes={notes.filter(searchTagFilter).filter(searchTextFilter)}
81 |           handleAddNote={addNote}
82 |           handleDeleteNote={deleteNote}
83 |           handleEditNote={editNote}
84 |         />
85 |       </div>
86 |     </div>
87 |   );
88 | };
89 | 
90 | export default App;
91 | 


--------------------------------------------------------------------------------