Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kingsleyibe/react-todos-app
"Todo List App" is a modern website that keeps track of tasks. The user can add, mark/unmark complete, edit, delete and save todo items. Items get stored in the browser's localstorage and get update each time the user adds or deletes an item. The application was built using React, SASS and JavaScript.
https://github.com/kingsleyibe/react-todos-app
browser css hooks javascript jest linter localstorage npm reactjs sass todolist virtual-dom webpack
Last synced: 4 days ago
JSON representation
"Todo List App" is a modern website that keeps track of tasks. The user can add, mark/unmark complete, edit, delete and save todo items. Items get stored in the browser's localstorage and get update each time the user adds or deletes an item. The application was built using React, SASS and JavaScript.
- Host: GitHub
- URL: https://github.com/kingsleyibe/react-todos-app
- Owner: KingsleyIbe
- Created: 2022-01-13T09:42:27.000Z (about 3 years ago)
- Default Branch: dev
- Last Pushed: 2023-07-25T18:36:47.000Z (over 1 year ago)
- Last Synced: 2024-10-18T09:14:34.977Z (4 months ago)
- Topics: browser, css, hooks, javascript, jest, linter, localstorage, npm, reactjs, sass, todolist, virtual-dom, webpack
- Language: JavaScript
- Homepage: https://github.com/KingsleyIbe/react-todos-app
- Size: 3.44 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Todo List Application
> "Todo List Application" helps keep track of your pending and completed task. The application allows users to do perform the following functions:
- Add new todo item.
- Edit existing item(s).
- Mark/Unmark item as completed.
- Delete completed items.
- Save item.
The application was built using Javascript, React, SASS.
## Project Screenshot
## Live Video Demo
## Other Important Information
## Built With
- Basic Language - JavaScript
- Framework - React
- Other technologies/tools:
``` create-react-app
> create-react-app
> webpack for bundling files
> Babel for code transpiling
> Git for version control
> Eslint for JavaScript linting
> Stylelint for style linting
> Jest for testing
```
## Live Demo
- [Live Demo Link](https://kingsleyibe.github.io/react-todos-app/)
## Getting Started
To get a local copy up and running follow these simple example steps.
### Prerequisites
- You should have basic knowledge of HTML.
- You should have basic knowledge of JavaScript.
- You should have basic knowledge of CSS.
- You should have basic knowledge of webpack.
- Also, a basic knowledge of git and github.
- A code editor: I used VScode for this project but you can use any code editor of your choice.
### Setup
- follow steps on this link to set up VScode code editor: [setup vscode](https://www.freecodecamp.org/news/how-to-set-up-vs-code-for-web-development/)
### Install
- [download](https://code.visualstudio.com/download) VScode.
[Watch this video](https://www.youtube.com/watch?v=MlIzFUI1QGA) on how to install VScode on windows.
- [Git]()
- [Node]()
### Usage
Clone project, run in your terminal:
```$ git clone https://github.com/KingsleyIbe/react-todos-app.git ```
Open the cloned project in your code editor and run:
``` $ cd react-todos-app ```
Install npm packages, run:
``` $ npm i or npm install ```
Then run the server:
``` $ npm start ```
## Author
### 👨🏾⚕️ Kingsley Ibe
- [Github](https://github.com/kingsleyibe)
- [Twiter](https://twitter.com/ibekingsley2)
- [LinkedIn](https://www.linkedin.com/in/kingsley-ibe-5669a5134)
## 🤝 Contributing
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](../../issues/).
## Show your support
Give a ⭐️ if you like this project!
## Acknowledgment
- Microverse
## 📝 License
This project is [MIT](./MIT.md) licensed.