readme is done!

13-WeekThirteen/react-toDo-app/README.md

@@ -1,8 +1,129 @@
-# React + Vite
+<div align="center">
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+  <h1 align="center">React Todo App</h1>
 
-Currently, two official plugins are available:
+  <p align="center">
+    A responsive todo list application built with React
+    <br />
+    <a href="https://emre-react-todo.netlify.app/" target="_blank">
+      <img src="https://img.shields.io/badge/LIVE%20DEMO-Click%20Here-brightgreen?style=for-the-badge&logo=netlify" alt="Live Demo" height="50">
+    </a>
+    <br />
+    <br />
+    <a href="https://github.com/emrekoyuncuu/Front-End-Web-Development-Bootcamp/issues">Report Bug</a>
+    ·
+    <a href="https://github.com/emrekoyuncuu/Front-End-Web-Development-Bootcamp/issues">Request Feature</a>
+  </p>
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+  <div align="center">
+    <img src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB" alt="React">
+    <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black" alt="JavaScript">
+    <img src="https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white" alt="CSS3">
+  </div>
+</div>
+
+<br />
+
+## 📋 Table of Contents
+
+- [📋 Table of Contents](#-table-of-contents)
+- [🚀 About The Project](#-about-the-project)
+  - [Key Features](#key-features)
+  - [Screenshots](#screenshots)
+- [🛠️ Built With](#️-built-with)
+- [🏁 Getting Started](#-getting-started)
+  - [Prerequisites](#prerequisites)
+  - [Installation](#installation)
+- [💻 Usage](#-usage)
+- [🗺️ Roadmap](#️-roadmap)
+- [🤝 Contributing](#-contributing)
+- [📧 Contact](#-contact)
+
+## 🚀 About The Project
+
+React Todo App is a responsive web application built with React, designed to help users manage their tasks efficiently. The app offers a clean and intuitive interface for creating, editing, and organizing todo items.
+
+### Key Features
+
+- ✅ **Task Management**: Add, edit, and delete todo items
+- 🔍 **Task Filtering**: Filter tasks by all, active, or completed
+- 💾 **Local Storage**: Persist todos across browser sessions
+- 📱 **Responsive Design**: Optimized for both desktop and mobile devices
+- 🎨 **Modern UI**: Clean and intuitive user interface
+
+### Screenshots
+
+<div align="center">
+  <img src="https://github.com/emrekoyuncuu/Front-End-Web-Development-Bootcamp/raw/main/13-WeekThirteen/react-toDo-app/public/screenshot1.png" alt="Desktop View" width="800" style="max-width: 100%; height: auto; margin-bottom: 20px;">
+  <p><em>App View</em></p>
+</div>
+
+## 🛠️ Built With
+
+This project is created using these technologies:
+
+- [React](https://reactjs.org/)
+- [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+- [CSS3](https://developer.mozilla.org/en-US/docs/Web/CSS)
+
+## 🏁 Getting Started
+
+To get a local copy up and running, follow these simple steps:
+
+### Prerequisites
+
+- npm
+  ```sh
+  npm install npm@latest -g
+  ```
+
+### Installation
+
+1. Clone the repository
+   ```sh
+   git clone https://github.com/emrekoyuncuu/Front-End-Web-Development-Bootcamp.git
+   ```
+2. Navigate to the project directory
+   ```sh
+   cd Front-End-Web-Development-Bootcamp/13-WeekThirteen/react-toDo-app
+   ```
+3. Install NPM packages
+   ```sh
+   npm install
+   ```
+4. Start the development server
+   ```sh
+   npm start
+   ```
+
+## 💻 Usage
+
+1. Start the application
+2. Add new todo items using the input field
+3. Click on a todo to mark it as completed
+4. Use the filter buttons to view all, active, or completed todos
+5. Edit or delete todos as needed
+
+## 🗺️ Roadmap
+
+See the [open issues](https://github.com/emrekoyuncuu/Front-End-Web-Development-Bootcamp/issues) for a list of proposed features and known issues.
+
+## 🤝 Contributing
+
+Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## 📧 Contact
+
+Emre Koyuncu - [LinkedIn](https://www.linkedin.com/in/emrekoyuncuu/) - emrekoyuncujob@gmail.com
+
+Project Link: [https://github.com/emrekoyuncuu/Front-End-Web-Development-Bootcamp/tree/main/13-WeekThirteen/react-toDo-app](https://github.com/emrekoyuncuu/Front-End-Web-Development-Bootcamp/tree/main/13-WeekThirteen/react-toDo-app)
+
+<div align="center">
+  Made with ❤️ by <a href="https://github.com/emrekoyuncuu">Emre Koyuncu</a>
+</div>