https://github.com/rileymanda/todo-react
To Do application built with react
https://github.com/rileymanda/todo-react
Last synced: about 1 month ago
JSON representation
To Do application built with react
- Host: GitHub
- URL: https://github.com/rileymanda/todo-react
- Owner: RileyManda
- Created: 2023-07-17T08:22:00.000Z (about 3 years ago)
- Default Branch: dev
- Last Pushed: 2023-07-18T11:08:08.000Z (about 3 years ago)
- Last Synced: 2025-01-20T19:24:15.687Z (over 1 year ago)
- Language: JavaScript
- Size: 2.45 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Todo
# Table of Contents 📋
- [📖 About the Project](#about-project)
- [🛠 Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [🚀 Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment](#deployment)
- [👥 Authors](#authors)
- [👥 Attribution](#attribution)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [❓ FAQ (OPTIONAL)](#faq)
- [📝 License](#license)
**Todo** Is a simple react application that enables the user to add,edit,remove and delete tasks from the todo list.The application saves all the data to local storage and is built with Es6 syntax modularity rules and utilizes webpack.
Client
-
HTML5 markup to build raw structure of this web page -
CSS3 custom properties, FlexBox, Grid to make the website visually attractive - Javascript
-
Linters for coding convention and coding formating -
Webpack
Javascript runtime environment
-
Node JS as a javascript runtime machine [git], a free and open source distributed version control system
Deployment
- [x] **List Structure**
- [x] **Add items**
- [x] **Remove items**
- [x] **Edit todo item**
- [x] **Cross out completed todo items**
This project is hosted on [GitHub pages](#deployment). The Live application can be found [here](https://rileymanda.github.io/todo-react/dist).
To get a local copy up and running, follow these steps.
In order to run this project you need:
- A Github account
- Node JS
- A web browser to view output e.g [Microsoft Edge](https://www.microsoft.com/en-us/edge).
- An IDE e.g [Visual studio code](https://code.visualstudio.com/).
- [A terminal](https://code.visualstudio.com/docs/terminal/basics).
Clone this repository to your desired folder:
```sh
cd my-folder
git clone https://github.com/RileyManda/todo-react.git
```
- Navigate to the folder
```
cd todo-list
```
- Checkout the branch
```
git checkout main
```
Install all dependencies:
All the dependencies are available in package.json and can be installed locally by running:
```sh
npm install
```
To run the project, in your terminal, execute the following commands:
```sh
npm run build npm start
```
### Run tests 🧪
How should it be tested?
To run tests, run the following command:
- CSS linter errors run:
```
npx stylelint "**/*.{css,scss}" --fix
```
- JavaScript linter errors run:
```
npx eslint . --fix
```
This project was deployed using GitHub Pages. For more information about how to use GitHub pages [read here](https://www.w3schools.com/git/git_remote_pages.asp?remote=github) 🤩. If you want to watch a video about how to use GitHub pages instead of reading [click here](https://www.youtube.com/watch?v=QyFcl_Fba-k&t=251s) ☺️.
👤 **Riley Manda**
- GitHub: [@RileyManda](https://github.com/RileyManda)
- Twitter: [@rilecodez](https://twitter.com/rilecodez)
- LinkedIn: [rileymanda](https://www.linkedin.com/in/rileymanda/)
- [ ]There are no planned future features.
## 👥 Attribution
- ProjectIcon: [Svgrepo](https://www.svgrepo.com/svg/249120/books-book)
If you have suggestions 📝, ideas 🤔, or bug reports 🐛, please feel free to open an [issue](https://github.com/RileyManda/todo-react/issues) on GitHub.
Remember, every contribution, no matter how big or small, makes a difference.
- Star the project ⭐️: Show your appreciation by starring this GitHub repository. It helps increase visibility and lets others know that the project is well-received.
- Fork the project 🍴 🎣: If you're interested in making improvements or adding new features, feel free to fork the project. You can work on your own version and even submit pull requests to suggest changes.
- Share with others 🗺️: Spread the word about this project. Share it on social media, mention it in relevant forums or communities, or recommend it to colleagues and friends who might find it useful.
I would like to express my sincere gratitude to [Microverse](https://github.com/microverseinc), the dedicated reviewers, and collaborators. Your unwavering support, feedback, and collaborative efforts have played an immense role in making this journey a resounding success. I am truly grateful for your contributions and for being an integral part of my achievements. Thank you for your continued support.
- **Question_1**
Do I have to use the vs code specifically?
- Answer_1
You can use any code editor of your choice.
- **Question_2**
Where can I download node JS for installation?
- Answer_2
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
It can be downloaded here: https://nodejs.org/en/download/Node.jsNode.js
This project is [MIT](./LICENSE) licensed.
_NOTE: we recommend using the [MIT license](https://choosealicense.com/licenses/mit/) - you can set it up quickly by [using templates available on GitHub](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository). You can also use [any other license](https://choosealicense.com/licenses/) if you wish._