https://github.com/umutplvn/todo_list_client

Todo App
https://github.com/umutplvn/todo_list_client

react react-bootstrap useeffect-hook usestate-hook uuid

Last synced: 16 days ago
JSON representation

Todo App

• Host: GitHub
• URL: https://github.com/umutplvn/todo_list_client
• Owner: Umutplvn
• Created: 2023-07-17T00:23:02.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-08T22:21:31.000Z (about 1 year ago)
• Last Synced: 2024-12-09T19:13:28.433Z (24 days ago)
• Topics: react, react-bootstrap, useeffect-hook, usestate-hook, uuid
• Language: JavaScript
• Homepage: https://todolist-umut.netlify.app/
• Size: 519 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Todo App (RP-03)

## Live at: https://todolist-umut.netlify.app/

## Description

Project aims to create a Todo App.

## Problem Statement

- We are adding a new project to our portfolios. So you and your colleagues have started to work on the project.

## Project Skeleton

```

003 - 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](todoapp-uuid.gif)

## Objective

Build a Todo App using ReactJS.

### 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.

  

## Notes

- You can add additional functionalities to your app.

**
☺ Happy Coding ✍
**