Skip to content

mheerspink75/reactapp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Project 3: Task Management Web App


Name: Matt Heerspink
Contact: mheerspink75@gmail.com
Organization: Texas A&M University Kingsville
Program: Full Stack Web Development Bootcamp
Project: Task Management Web App

Abstract:

The main purpose of this project is to build out a front-end task management app with a fully functional todo list and contact form that use controlled components in React. The full project requirements can be found here.

Workflow Requirements

User Stories:

1. "As a student studying web development, I want a solution with a simple interface that can add, remove and update the completed status of todo list items."
- Daniel

2. "As a user of both mobile and desktop applications, I want a light weight task management application that is available on both platforms as well as cross compatible on mobile devices."
- Mark

3. "As a mobile user, I prefer progressive web apps for smaller applications because they don't need to be installed on my phone."
- Laura

Wireframes:

1. Todo List: Wireframe

2. Contact Form: Wireframe

3. Todo List App: Wireframe


State and Component Planning

FlowChart

Development Phase:

1. Created GitHub repository https://github.com/mheerspink75/reactapp.

2. Added create-react-app, material-ui and gh-pages to the project via npm.

3. Deployed production build to GiHub Pages at url: https://mheerspink75.github.io/reactapp/ via gh-pages by following the process in this video. The production site is hosted on the gh-pages branch of the repository https://github.com/mheerspink75/reactapp/tree/gh-pages.

4. Created Todo list code on Code Sandbox by following tutorials on YouTube, Scotch.io and freeCodeCamp focusing on the React useState Hook.

5. Added Material-UI components to the project and updated the code on CodeSandbox.

6. Added a contact form to the project by following a tutorial video on Youtbe.

7. Updated the conctact form code and integrated the multistep form into a Material-UI Dialog component.

8. Integrated the Todo List and Contact form into a Material-UI responsive layout.

9. Updated the production build on GitHub through a combination of frequent commits to the main repository and using the npm run deploy command, via gh-pages, on the gh-pages branch.


Results:


Desktop View:

DesktopView1 DesktopView2 DesktopView3 DesktopView4 DesktopView5 DesktopView6

Mobile View:

MobileView1 MobileView2 MobileView3 MobileView4


Future Improvements:

1. Server-side form validation was not required in this project. In the future I would like to work on further customization to the front-end and server-side validation.

2. Local storage was not required in this project. I would also like to integrate local storage.

3. In the future I would like to add more functionality to the project by integrating tables with search, pagination and sorting functionality.

About

Project 3: Task Management Web App

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published