In this project, you will find a Task Management App, a tool that allows users to add, view, and delete tasks. Each task has a title, due date, and category. This project is built using React and TypeScript and demonstrates concepts such as handling form inputs, maintaining application state, and implementing UI components.
Check out the live demo here.
- Open your terminal and navigate to the folder where you want to create your project.
- Type the following command to create a new project folder with a React and TypeScript template using Vite:
npx create-vite task-manager --template react-ts- Navigate into your new project folder with:
cd task-manager- Install the necessary dependencies for this project:
npm install react-hook-form zod @hookform/resolvers zod- Install the library/framework used for styling the components (e.g., bootstrap, Tailwind CSS, Styled-components).
-
Define the Task Model: Define a TypeScript interface for a task in your App component file. Each task will have fields like id, title, dueDate, and category. This interface will be used for type-checking tasks.
-
File Structure: Create a file structure as described in the project instructions.
-
Implementing Components: Follow the steps to implement the TaskForm, TaskList, and TaskFilter components as outlined in the project instructions.
-
App Component: Implement the App component and use the TaskForm and TaskList components to create a fully functioning Task Management App.
-
Bonus: Store and Retrieve tasks from localStorage: Optionally, you can implement local storage to store and retrieve tasks between sessions.
- Open Visual Studio Code.
- Open your project folder (via File > Open Folder).
- Click on the Source Control icon in the Activity Bar.
- Click on "Publish to GitHub" and choose whether the repository should be public or private.
- Select the files you want to include in the GitHub repository and click OK.
- When you add new features or make changes, go to the Source Control tab, click "Stage All" (the + icon), add a commit message, and then click the dropdown arrow next to Commit. Select "Commit and Push." Confirm the successful push by checking your GitHub account.
- Screenshots or Video Include screenshots or a video demonstration of your Task Management App here.
Ken Ho
This project is licensed under the MIT License.
- Mention any libraries, tutorials, or resources you used or were inspired by during the development of this project. Happy coding!