{"id":25796699,"url":"https://github.com/omar-mazen/todo-app","last_synced_at":"2026-05-08T04:17:10.058Z","repository":{"id":278584586,"uuid":"936111793","full_name":"omar-mazen/todo-app","owner":"omar-mazen","description":"The Todo App is a task management application built using React Native. It enables users to add, track, and manage their tasks efficiently with filtering options for different task statuses.","archived":false,"fork":false,"pushed_at":"2025-02-23T21:37:25.000Z","size":2909,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-23T22:23:33.116Z","etag":null,"topics":["async-storage","context-api","cross-platform","es6","expo","js","react-native","react-navigation"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/omar-mazen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-20T14:49:01.000Z","updated_at":"2025-02-23T21:37:27.000Z","dependencies_parsed_at":"2025-02-23T22:23:34.445Z","dependency_job_id":null,"html_url":"https://github.com/omar-mazen/todo-app","commit_stats":null,"previous_names":["omar-mazen/todo-list-app","omar-mazen/todo-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omar-mazen%2Ftodo-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omar-mazen%2Ftodo-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omar-mazen%2Ftodo-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omar-mazen%2Ftodo-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/omar-mazen","download_url":"https://codeload.github.com/omar-mazen/todo-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241024856,"owners_count":19896312,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["async-storage","context-api","cross-platform","es6","expo","js","react-native","react-navigation"],"created_at":"2025-02-27T14:40:28.909Z","updated_at":"2026-05-08T04:17:05.040Z","avatar_url":"https://github.com/omar-mazen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Todo App - A React Native Todo Application\n\nThis is my first project built with **React Native**. I created this Todo App to implement and showcase the concepts I learned, including state management, navigation, persistent storage, and UI design. The app is a fully functional task manager that lets users add, update, and delete tasks, as well as filter them by status.\n\n---\n\n## Detailed Overview\n\nThis Todo App demonstrates key React Native concepts:\n\n- **State Management with Context API:**  \n  The app uses React's Context API to globally manage todos. A custom hook (`useTodos`) and a `TodosProvider` wrap the app to allow easy access to actions like adding, updating, and deleting tasks.\n\n- **Asynchronous Storage with AsyncStorage:**  \n  Todos are persisted locally using AsyncStorage. This ensures that task data remains available even after the app is closed or restarted.\n\n- **Navigation:**  \n  The project utilizes navigation (e.g., React Navigation) to move between screens. For example, tapping on a task navigates to a detailed view, where you can mark a task as done or delete it.\n\n- **UI Components \u0026 Styling:**  \n  The app is built with several reusable components:\n  - **AddNewTask:** For inputting new tasks.\n  - **Tabs:** To filter tasks by status (All, In-progress, Done).\n  - **Todo \u0026 TodoList:** For displaying and interacting with each task.\n  \n  Icons from the Material Icons library (via `react-native-vector-icons`) enhance the user experience by visually representing actions like marking a task complete or deleting a task.\n\n- **Learning and Experimentation:**  \n  Being my first React Native project, this app is a playground for learning about component-based architecture, hooks like `useState` and `useEffect`, and effective state management using Context API.\n\n---\n\n## Technologies Used\n\n- **React Native:**  \n  A powerful framework for building mobile applications using JavaScript and React. It allows you to create native apps for both iOS and Android with a single codebase.\n\n- **React Navigation:**  \n  Used for navigating between different screens in the app. It simplifies routing and managing the navigation state.\n\n- **AsyncStorage:**  \n  A simple, asynchronous key-value storage system that allows the app to persist data locally on the device.\n\n- **Context API:**  \n  A built-in React feature used to share state (the todos list) across components without having to pass props down manually at every level.\n\n- **Material Icons (react-native-vector-icons):**  \n  Provides a collection of icons that enhance the UI. Icons are used for actions such as marking tasks complete or deleting them.\n\n---\n\n## Project Structure\n\nBelow is the basic folder structure for the project:\n\n```\n📂 todo-app\n├── 📂 components\n│   ├── AddNewTask.js      // Component for adding a new task\n│   ├── Tabs.js            // Component for filtering tasks by status\n│   ├── Todo.js            // Component for displaying a single task\n│   ├── TodoList.js        // Component for listing all tasks\n├── 📂 context\n│   └── TodosContext.js    // Context API provider for todos state management\n├── 📂 screens\n│   ├── HomeScreen.js      // Screen for adding tasks\n│   ├── TodosScreen.js     // Screen for viewing tasks with filters\n│   └── TodoScreen.js      // Screen for detailed view of a single task\n├── 📂 data\n│   └── todosData.js       // Initial sample data for todos\n├── App.js                 // Main app entry point\n└── package.json           // Project metadata and dependencies\n```\n\n---\n\n## Screenshots\n\nHere are the key screens demonstrating how the app works:\n\n1. **Home Page**  \n   ![Home Page](./screenshots/1-home-page.png)  \n   *This is the initial screen where you can add a new task by providing a title and description.*\n\n2. **Type Input Description**  \n   ![Type Input Description](./screenshots/2-type-input-description.PNG)  \n   *Shows the user typing in a task description.*\n\n3. **After Press Add**  \n   ![After Press Add](./screenshots/3-after-press-add.PNG)  \n   *An alert confirms that the new task has been successfully added.*\n\n4. **Tasks Page After Add**  \n   ![Tasks Page After Add](./screenshots/4-tasks-page-after-add-task.PNG)  \n   *The newly added task appears in the task list on the Todos page.*\n\n5. **Tasks Page - Task Checked**  \n   ![Tasks Page Task Checked](./screenshots/5-tasks-page-task-checked.PNG)  \n   *A task is marked as ‘done’ by tapping the checkbox.*\n\n6. **Delete Task**  \n   ![Delete Task](./screenshots/6-delete-task.PNG)  \n   *A confirmation prompt appears before deleting a task.*\n\n7. **Task After Task Deleted**  \n   ![Task After Task Deleted](./screenshots/7-tasks-after-task-deleted.PNG)  \n   *The task is removed from the list after deletion.*\n\n8. **Task Detail Page**  \n   ![Task Detail Page](./screenshots/8-task-detail-page.PNG)  \n   *A detailed view of a task showing its title, description, and creation date/time, with the ability to mark it as done or delete it.*\n\n---\n\n## Installation \u0026 Setup\n\n1. **Clone the Repository:**\n   ```sh\n   git clone https://github.com/your-username/todo-app.git\n   cd todo-app\n   ```\n\n2. **Install Dependencies:**\n   ```sh\n   npm install\n   ```\n   or if using Yarn:\n   ```sh\n   yarn install\n   ```\n\n3. **Start the Development Server:**\n   ```sh\n   npx expo start\n   ```\n   This will start the Expo development server. You can then run the app on an emulator or a physical device using the Expo client.\n\n---\n\n## Usage\n\n- **Add a Task:**  \n  Navigate to the Home screen and use the \"Add new todo\" form. Enter a task title and description, then press the \"ADD\" button.\n\n- **Manage Tasks:**  \n  On the Todos screen, use the tabs to filter tasks by their status:\n  - **All:** View every task.\n  - **In-progress:** View tasks that are not yet completed.\n  - **Done:** View tasks that have been marked complete.\n  \n- **Task Actions:**  \n  In the task list:\n  - **Mark as Done/In-progress:** Toggle the status by clicking on the checkbox icon.\n  - **Delete a Task:** Press the delete icon to remove the task after confirming the action.\n\n- **View Details:**  \n  Tap on any task to navigate to the Todo Details screen, where you can see more information and perform actions like updating the status or deleting the task.\n\n---\n\n## Contributing\n\nIf you'd like to contribute to this project, please follow these steps:\n\n1. **Fork the Repository**\n2. **Create a New Branch:**\n   ```sh\n   git checkout -b feature/your-feature\n   ```\n3. **Commit Your Changes:**\n   ```sh\n   git commit -m \"Add new feature\"\n   ```\n4. **Push to Your Branch:**\n   ```sh\n   git push origin feature/your-feature\n   ```\n5. **Submit a Pull Request**\n\n---\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomar-mazen%2Ftodo-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fomar-mazen%2Ftodo-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomar-mazen%2Ftodo-app/lists"}