modified: README.md

README.md

@@ -1,73 +1,142 @@
-# TODO-APP
+# TODO-APP README
 
 ## Description
 
-This is a simple todo app that allows you to add, edit, and delete Projects. You can also add, edit, and delete tasks to each project. You can also mark tasks as queued, progress, or completed.
+Welcome to the TODO App, a simple yet powerful task management application that enables you to efficiently organize your projects and tasks. With this app, you can seamlessly add, edit, and delete projects, create, modify, and remove tasks within those projects, and track task progress by marking them as queued, in progress, or completed.
 
-## Library Directory 📙
+## Technology Stack 📙
 
-- React
-- Redux
-- React-Redux
-- Redux-presist
-- React-Router
-- React-Icons
-- React-dropzone
-- TinyMCE
+This app leverages several technologies to provide a smooth user experience:
 
-
-### Why these libraries
-
-- **React**: to create a seamless SPA experience.
-- **Redux**: to manage the state of the app.
-- **React-Redux**: to connect the app to the redux store.
-- **Redux-persist**: to persist the redux store in the local storage. This is to ensure that the data is not lost when the user refreshes the page. `Note: this would be removed and replaced with a database and a backend in a real world app.`
-- **React-Router**: to handle the routing.
-- **React-Icons**: to add icons to the app.
-- **React-dropzone**: file upload functionality.
-- **TinyMCE**: to add a rich text editor to the app.
+- **React**: The core library for building a Single Page Application (SPA).
+- **Redux**: A state management library for efficiently handling app data.
+- **React-Redux**: Connects the app to the Redux store for data management.
+- **Redux-persist**: Persists the Redux store in local storage to prevent data loss on page refresh (Note: This would be replaced with a database and backend in a real-world app).
+- **React-Router**: Manages routing within the application.
+- **React-Icons**: Adds visually appealing icons to enhance the user interface.
+- **React-dropzone**: Facilitates file uploads.
+- **TinyMCE**: Incorporates a rich text editor for enhanced task descriptions.
 
 ## Live Demo 🎥
 
-[Live Demo Link](https://zeyadajamy.github.io/todo/)
+Check out the live demo of the app to see it in action: [Live Demo Link](https://zeyadajamy.github.io/todo/)
 
 ## Screenshots 📷
 
-![Mobile View](./todo-readme/mobile.png)
+Here are some visual representations of the app:
+
+- **Mobile View**: A glimpse of the mobile-friendly interface.
+
+  ![Mobile View](./todo-readme/mobile.png)
+
+- **Create New Project**: How to create a new project.
+
+  ![Create New Project](./todo-readme/todo-create-project.png)
 
-![Create New Project](./todo-readme/todo-create-project.png)
+- **Create New Task**: Adding a task to a project on mobile.
 
-![Create New Task](./todo-readme/todo-mob-create-task.png)
+  ![Create New Task](./todo-readme/todo-mob-create-task.png)
 
-![Mobile View: Projects](./todo-readme/todo-mob-projects.png)
+- **Mobile View - Projects**: Viewing projects on mobile.
 
-![Mobile View: Tasks](./todo-readme/todo-tasks.png)
+  ![Mobile View - Projects](./todo-readme/todo-mob-projects.png)
 
-![Task Unfolded](./todo-readme/task%20unfolded.png)
+- **Mobile View - Tasks**: Exploring tasks on mobile.
+
+  ![Mobile View - Tasks](./todo-readme/todo-tasks.png)
+
+- **Task Unfolded**: A detailed view of an expanded task.
+
+  ![Task Unfolded](./todo-readme/task%20unfolded.png)
 
 ## Getting Started 🚀
 
-To get a local copy up and running follow these simple example steps.
+To run the app locally, follow these simple steps:
 
 ### Prerequisites
 
+Make sure you have the following software installed on your system:
+
 - NodeJS
 - NPM
 - Git
 
 ### Setup
 
-1. Clone the project locally.
-2. Go to the project directory `todo`.
-3. Run `npm install` to install the dependencies, ensure that you are connected to the internet and have NodeJS installed.
-4. Run `npm start` to start the app. The app will open in your default browser.
-5. Go to `http://localhost:3000/#/todo` to see the app in action.
+1. Clone this project to your local machine.
+2. Navigate to the project directory using your terminal.
+3. Run `npm install` to install the required dependencies. Ensure you have an internet connection and NodeJS installed.
+4. Execute `npm start` to launch the app. It will open in your default web browser.
+5. Visit `http://localhost:3000/#/todo` to explore the app locally.
 
 ### Project Structure
 
-- Two main directories: `public`, `src`.
-- `src` contains all the source code (assets, components, store, hooks).
-- `public` contains the `index.html` file and the `favicon.ico` file.
+The app's structure is organized as follows:
+
+Certainly! To provide a more detailed explanation of the project structure for developers who want to contribute to the TODO App, let's delve into each directory and its contents:
+
+### `public` Directory
+
+     This directory contains the public assets of the app, including the main HTML file and the favicon icon. Here's a brief overview of the files:
+
+- `index.html`: The main HTML file that serves as the entry point for the React application.
+- `favicon.ico`: The favicon icon for the app.
+
+### `src` Directory
+
+     This is the heart of the application, where most of the development work takes place. Here's a breakdown of the subdirectories and their contents:
+
+#### `assets` Directory
+
+     This directory contains any static assets used in the app, such as images or fonts.
+
+#### `components` Directory
+
+     This is where the majority of the React components reside. Each component is organized into its own subdirectory, making it easy to locate and work on specific parts of the app. Here's a brief overview of notable components:
+
+- `404`: Handles the page not found (404) error.
+- `file-upload`: Manages file upload functionality.
+- `header`: Represents the header component of the app.
+- `not-found`: Handles not found-related components.
+- `project`: Contains components related to project management, including project creation and listing.
+- `tasks`: Manages tasks within projects, including task creation, editing, and progress tracking.
+- `tinymce`: Integrates the TinyMCE rich text editor.
+- `window-modal`: Provides reusable window modal components.
+- `layout.tsx`: Defines the overall layout of the application.
+
+#### `hooks` Directory
+
+- `useStore.ts`: Custom hook for accessing the Redux store within components.
+
+#### `store` Directory
+
+     This directory manages the application's state using Redux. It's structured as follows:
+
+- `actions`: Contains Redux action creators, such as `projectActions.ts`.
+- `reducers`: Holds Redux reducers, including `projectsReducer.ts`.
+- `store.ts`: Configures and creates the Redux store.
+
+#### `types.ts`
+
+     Defines custom TypeScript types and interfaces used throughout the application.
+
+#### `index.tsx`
+
+     The entry point of the application where React is rendered into the DOM.
+
+#### `package.json` and `package-lock.json`
+
+     These files manage the project's dependencies and scripts.
+
+#### `README.md`
+
+     The project's README file, providing essential information for developers, including setup instructions, project structure, and contributing guidelines.
+
+#### `tsconfig.json`:
+
+     Configuration file for TypeScript settings.
+
+- Here's the complete project structure:
 
 ```
 ├── public
@@ -121,29 +190,31 @@ To get a local copy up and running follow these simple example steps.
 │   └──  tsconfig.json
 ```
 
-## What is missing
+## What's Missing
 
-### Data is not shared between different devices
+Here are some areas where the app can be further improved:
 
-- Since we are using a local storage and redux-persist, the data is not shared between different devices. This can be fixed by using a database and a backend.
-- Also for that we need to add authentication and authorization.
-- Use `redux-query` to handle the async actions.
+### Data Sharing Across Devices: Database and Backend
 
-### Add more features
+- The app currently relies on local storage and Redux-persist, which means that data is not shared between different devices. To address this, consider implementing a database and a backend for synchronized data access.
+- Introducing authentication and authorization would also be necessary for secure data management.
+- The integration of a library like `redux-query` can help handle asynchronous actions efficiently.
 
-- Add project status (active, archived, completed)
-- Add search functionality
+### Additional Features: search and status
 
-### Create the bot script
+- Enhance the app by adding project status options, such as "active," "archived," and "completed," to provide better project management.
+- Implement a search functionality to help users easily locate specific projects or tasks within the app.
 
-- Create a bot script that will create a project and add tasks to it.
+### Bot Script 
+
+To make the app more interactive, consider creating a bot script that can perform tasks like creating projects and adding tasks to demonstrate the app's functionality.
 
-## Author
 
-👤 **Zeyad Ajamy**
 
-- GitHub: [@zeyadajamy](https://github.com/zeyadAjamy)
+## Author
+
+👤 **Zeyad Ajamy** [@zeyadajamy](https://github.com/zeyadAjamy)
 
 ## 🤝 Contributing
 
-Contributions, issues, and feature requests are welcome!
+Contributions, issues, and feature requests are welcome! Feel free to contribute to the improvement of this app