├── .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 |
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 |
--------------------------------------------------------------------------------