Taskmanager website

Designed by Kyle Peeler

Overview

My third coding project: A task management website designed using React that allows users to create tasks and display them on a tasks page.

Used to learn and display knowledge of React, React-Router, and Object-oriented programming.

Details

• Contains a navbar using React-Router to allow quickly switching between pages.
• A home page using dropdown menus to display informational text.
• A Tasks page to allow creation and displaying of tasks and task related info.
• A completion system to mark tasks as complete when finished.
• A filter system to only display completed content, only display not completed content, or display all content.
• A contact form that handles data recieved from the form and displays it in the console log in the absense of a back-end server.
• Modular system using reusable components following the react fundamentals and principles of development.

Usage

Source code hosted at https://github.com/Kpeeler51/Task-Manager-Website

Github Pages website hosted at https://kpeeler51.github.io/Task-Manager-Website/

• Enter the tasks page and enter a task name and description.
• Hit the "add task" button and it will be displayed in the list.
• Click on the task and its description will be displayed in the window to the right.
• Click on the checkbox to the left and the task title will be crossed out and marked as complete.
• Click the red trash can icon and a task will be removed from the list.
• Click on one of the three "active" "complete" or "all" buttons to filter content.

Technologies Used

HTML5, CSS3, React, React-Router, Vite, Typescript.

Future Improvements

• A system to allow saving of list content so it is not cleared on refresh.

• A better system for the contact page than console-logging the info.

• A system to edit already added tasks.