├── .babelrc ├── .eslintrc.json ├── .github └── workflows │ └── linters.yml ├── .gitignore ├── .stylelintrc.json ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html └── robots.txt └── src ├── App.css ├── App.js ├── index.css └── index.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-react" 4 | ], 5 | "plugins": ["@babel/plugin-syntax-jsx"] 6 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest": true 6 | }, 7 | "parser": "@babel/eslint-parser", 8 | "parserOptions": { 9 | "ecmaFeatures": { 10 | "jsx": true 11 | }, 12 | "ecmaVersion": 2018, 13 | "sourceType": "module" 14 | }, 15 | "extends": ["airbnb", "plugin:react/recommended", "plugin:react-hooks/recommended"], 16 | "plugins": ["react"], 17 | "rules": { 18 | "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }], 19 | "react/react-in-jsx-scope": "off", 20 | "import/no-unresolved": "off", 21 | "no-shadow": "off", 22 | "import/no-extraneous-dependencies": ["error", { 23 | "devDependencies": ["**/*.test.js", "**/*.spec.js", "**/setupTests.js", "src/**/*"], 24 | "optionalDependencies": false, 25 | "peerDependencies": false 26 | }] 27 | }, 28 | "overrides": [ 29 | { 30 | "files": ["src/**/*Slice.js"], 31 | "rules": { "no-param-reassign": ["error", { "props": false }] } 32 | } 33 | ], 34 | "ignorePatterns": [ 35 | "dist/", 36 | "build/" 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | eslint: 10 | name: ESLint 11 | runs-on: ubuntu-22.04 12 | steps: 13 | - uses: actions/checkout@v3 14 | - uses: actions/setup-node@v3 15 | with: 16 | node-version: "18.x" 17 | - name: Setup ESLint 18 | run: | 19 | npm install --save-dev eslint@7.x eslint-config-airbnb@18.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@4.x @babel/eslint-parser@7.x @babel/core@7.x @babel/plugin-syntax-jsx@7.x @babel/preset-env@7.x @babel/preset-react@7.x 20 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.eslintrc.json 21 | [ -f .babelrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.babelrc 22 | - name: ESLint Report 23 | run: npx eslint "**/*.{js,jsx}" 24 | stylelint: 25 | name: Stylelint 26 | runs-on: ubuntu-22.04 27 | steps: 28 | - uses: actions/checkout@v3 29 | - uses: actions/setup-node@v3 30 | with: 31 | node-version: "18.x" 32 | - name: Setup Stylelint 33 | run: | 34 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 35 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.stylelintrc.json 36 | - name: Stylelint Report 37 | run: npx stylelint "**/*.{css,scss}" 38 | nodechecker: 39 | name: node_modules checker 40 | runs-on: ubuntu-22.04 41 | steps: 42 | - uses: actions/checkout@v3 43 | - name: Check node_modules existence 44 | run: | 45 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/# 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 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 25 | 26 | # dependencies 27 | /node_modules 28 | /.pnp 29 | .pnp.js 30 | 31 | # testing 32 | /coverage 33 | 34 | # production 35 | /build 36 | 37 | # misc 38 | .DS_Store 39 | .env.local 40 | .env.development.local 41 | .env.test.local 42 | .env.production.local 43 | 44 | npm-debug.log* 45 | yarn-debug.log* 46 | yarn-error.log* 47 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": [ 6 | true, 7 | { 8 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 9 | } 10 | ], 11 | "scss/at-rule-no-unknown": [ 12 | true, 13 | { 14 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 15 | } 16 | ], 17 | "csstree/validator": true 18 | }, 19 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"] 20 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | ## Copyright 2023, [Julio Quezada] 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this React.js to-do list and associated documentation files, to deal in the React.js to-do list without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the React.js to-do list, and to permit persons to whom the React.js to-do list is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the React.js to-do list. 6 | 7 | THE REACT.JS TO-DO LIST 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 REACT.JS TO-DO LIST OR THE USE OR OTHER DEALINGS IN THE REACT.JS TO-DO LIST. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React.js to-do list 2 | 3 | 4 | 5 |
6 | logo 7 |
8 |

React.js to-do list

9 | 10 |
11 | 12 | 13 | 14 | # 📗 Table of Contents 15 | 16 | - [React.js to-do list](#reactjs-to-do-list) 17 | - [📗 Table of Contents](#-table-of-contents) 18 | - [📖React.js to-do list ](#reactjs-to-do-list-) 19 | - [🛠 Built With ](#-built-with-) 20 | - [Tech Stack ](#tech-stack-) 21 | - [Key Features ](#key-features-) 22 | - [🚀 Live Demo ](#-live-demo-) 23 | - [💻 Getting Started ](#-getting-started-) 24 | - [Prerequisites](#prerequisites) 25 | - [Setup](#setup) 26 | - [Install](#install) 27 | - [Usage](#usage) 28 | - [Run tests](#run-tests) 29 | - [Deployment ](#deployment-) 30 | - [👥 Author ](#-author-) 31 | - [🔭 Future Features ](#-future-features-) 32 | - [🤝 Contributing ](#-contributing-) 33 | - [⭐️ Show your support ](#️-show-your-support-) 34 | - [🙏 Acknowledgments ](#-acknowledgments-) 35 | - [❓ FAQ ](#-faq-) 36 | - [📝 License ](#-license-) 37 | 38 | 39 | 40 | # 📖React.js to-do list 41 | 42 | 43 | 44 | A simple and intuitive to-do list application built with React, designed to help you efficiently manage and organize your daily tasks. This user-friendly app allows you to stay focused and enhance your productivity. 45 | 46 | ## 🛠 Built With 47 | HTML, 48 | CSS, 49 | JavaScript, 50 | React.js 51 | 52 | ### Tech Stack 53 | 54 |
55 | Client 56 | 62 |
63 | 64 |
65 | Package Manager 66 | 69 |
70 |
71 | Linters 72 | 76 |
77 | 78 | 79 | 80 | ### Key Features 81 | 82 | - **Keep track of multiple tasks.** 83 | - **Edit your tasks** 84 | - **Create new tasks** 85 | 86 |

(back to top)

87 | 88 | 89 | 90 | ## 🚀 Live Demo 91 | It will be available soon! 92 | - [Live Demo Link]() 93 | 94 |

(back to top)

95 | 96 | 97 | 98 | ## 💻 Getting Started 99 | 100 | 101 | To get a local copy up and running, follow these steps. 102 | 103 | ### Prerequisites 104 | 105 | In order to run this project you need: 106 | 107 | - A web browser to view output e.g [Google Chrome](https://www.google.com/chrome/). 108 | - An IDE e.g [Visual studio code](https://code.visualstudio.com/). 109 | - `node` should be installed in your local machine, [node website](https://nodejs.org/en/download/). 110 | - Install the `npm` package manager use this [to install both node and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). 111 | - [A terminal](https://code.visualstudio.com/docs/terminal/basics). 112 | 113 | ### Setup 114 | 115 | Clone this repository to your desired folder or download the Zip folder: 116 | 117 | ``` 118 | https://github.com/Alejandroq12/react-todo.git 119 | ``` 120 | 121 | - Navigate to the location of the folder in your machine: 122 | 123 | **``you@your-Pc-name:~$ cd react-todo``** 124 | 125 | ### Install 126 | 127 | To install all dependencies, run: 128 | 129 | ``` 130 | npm install 131 | ``` 132 | 133 | ### Usage 134 | 135 | To run the project, follow these instructions: 136 | 137 | - After Cloning this repo to your local machine. 138 | - You can also use `npm start` command in terminal to run this at the localhost. 139 | 140 | ### Run tests 141 | 142 | To run tests, run the following command: 143 | 144 | - Track CSS linter errors run: 145 | ``` 146 | npx stylelint "**/*.{css,scss}" 147 | ``` 148 | - Track JavaScript linter errors run: 149 | ``` 150 | npx eslint "**/*.{js,jsx}" 151 | ``` 152 | 153 | ### Deployment 154 | 155 | You can deploy this project using: GitHub Pages, 156 | - I used GitHub Pages to deploy my website. 157 | - For more information about publishing sources, see "[About GitHub pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#publishing-sources-for-github-pages-sites)". 158 | 159 |

(back to top)

160 | 161 | 162 | 163 | ## 👥 Author 164 | 165 | 👤 **Julio Quezada** 166 | 167 | - GitHub: [Alejandroq12](https://github.com/Alejandroq12) 168 | - Twitter: [@JulioAle54](https://twitter.com/JulioAle54) 169 | - LinkedIn: [Julio Quezada](https://www.linkedin.com/in/quezadajulio/) 170 | 171 |

(back to top)

172 | 173 | 174 | 175 | ## 🔭 Future Features 176 | 177 | - [ ] **It will allow user to log in and sign up** 178 | 179 |

(back to top)

180 | 181 | 182 | 183 | ## 🤝 Contributing 184 | 185 | Contributions, issues, and feature requests are welcome! 186 | 187 | Feel free to check the [issues page](../../issues/). 188 | 189 |

(back to top)

190 | 191 | 192 | 193 | ## ⭐️ Show your support 194 | 195 | If you like this project give me a star ⭐️ 196 | 197 |

(back to top)

198 | 199 | 200 | 201 | ## 🙏 Acknowledgments 202 | 203 | I want to thank all my colleagues that share knowledge with and inspired to to improve each day. 204 | 205 |

(back to top)

206 | 207 | 208 | 209 | ## ❓ FAQ 210 | 211 | - **DWhat did you learn with this project?** 212 | 213 | - I learned a lot about React.js, components, props, state, and hooks. 214 | 215 |

(back to top)

216 | 217 | 218 | 219 | ## 📝 License 220 | 221 | This project is [LICENSE](./LICENSE) licensed. 222 | 223 |

(back to top)

-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-todo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | }, 38 | "devDependencies": { 39 | "@babel/core": "^7.21.5", 40 | "@babel/eslint-parser": "^7.21.3", 41 | "@babel/plugin-syntax-jsx": "^7.21.4", 42 | "@babel/preset-react": "^7.18.6", 43 | "eslint": "^7.32.0", 44 | "eslint-config-airbnb": "^18.2.1", 45 | "eslint-plugin-import": "^2.27.5", 46 | "eslint-plugin-jsx-a11y": "^6.7.1", 47 | "eslint-plugin-react": "^7.32.2", 48 | "eslint-plugin-react-hooks": "^4.6.0", 49 | "stylelint": "^13.13.1", 50 | "stylelint-config-standard": "^21.0.0", 51 | "stylelint-csstree-validator": "^1.9.0", 52 | "stylelint-scss": "^3.21.0" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alejandroq12/react-todo/1ed7a34e8ea862a4f789022a6fa4abed6cfef0cd/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | React.js to-do list 13 | 14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /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 | 36 | to { 37 | transform: rotate(360deg); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | 3 | function App() { 4 | return ( 5 | <> 6 |

React App

7 | 8 | ); 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | 'Roboto', 8 | 'Oxygen', 9 | 'Ubuntu', 10 | 'Cantarell', 11 | 'Fira Sans', 12 | 'Droid Sans', 13 | 'Helvetica Neue', 14 | sans-serif; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | 19 | code { 20 | font-family: 21 | source-code-pro, 22 | Menlo, 23 | Monaco, 24 | Consolas, 25 | 'Courier New', 26 | monospace; 27 | } 28 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | , 11 | ); 12 | --------------------------------------------------------------------------------