Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mehmet-github06/react-todo-app
react todo app project
https://github.com/mehmet-github06/react-todo-app
localest map-filter props react react-boo react-ic useeffect-hook usestate-hook
Last synced: about 5 hours ago
JSON representation
react todo app project
- Host: GitHub
- URL: https://github.com/mehmet-github06/react-todo-app
- Owner: Mehmet-github06
- Created: 2023-12-17T09:58:21.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2023-12-17T12:13:19.000Z (11 months ago)
- Last Synced: 2023-12-18T12:37:14.694Z (11 months ago)
- Topics: localest, map-filter, props, react, react-boo, react-ic, useeffect-hook, usestate-hook
- Language: JavaScript
- Homepage: https://react-todo-list-appe.netlify.app/
- Size: 3.15 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Todo App
## Description
Project aims to create a Todo App.
## Project Skeleton
```
001 - Todo App(folder)
|
|----readme.md # Given to the students (Definition of the project)
SOLUTION
├── public
│ └── index.html
├── src
│ ├── components
│ │ ├── Header.jsx
│ │ │
│ │ ├── TodoList.jsx
│ ├── App.js
│ ├── index.js
│ └── index.css
├── package.json
└── yarn.lock
```## Expected Outcome
![Project 003 Snapshot](./public/Animation.gif)
### At the end of the project, following topics are to be covered;
- HTML
- CSS
- JS
- ReactJS
### At the end of the project, students will be able to;
- improve coding skills within HTML & CSS & JS & ReactJS.
- use git commands (push, pull, commit, add etc.) and Github as Version Control System.
## Steps to Solution
- Step 1: Create React App using `npx create-react-app todo-app`
- Step 2 : Install [`uuid`](https://www.npmjs.com/package/uuid) package to your `package.json` for id.
- Step 3: Build Todo App.
- Step 4: You can use CSS frameworks like Bootstrap, React Bootstrap, TailwindCss or Native Css, Sass, Module Css.
- Step 5: You can use local storage to store data.
- Step 6: Push your application into your own public repo on Github
- Step 7: Add project gif to your project and README.md file.
## Demo
[Todo App Live](https://react-todo-list-appe.netlify.app/)
## Notes- You can add additional functionalities to your app.
**
☺ Happy Coding ✍
**