React and Material-UI Landing Page/Template Starter Kit — Kanban Taskboard WebApp

Are you looking for a good/responsive React landing/Template to bootstrap your app?. You are in the right place. This article will help you to get your web app up and running quickly. Ideal for any hackathon or innovation project!.

Github: https://g…


This content originally appeared on DEV Community and was authored by Muthu Pandian

Are you looking for a good/responsive React landing/Template to bootstrap your app?. You are in the right place. This article will help you to get your web app up and running quickly. Ideal for any hackathon or innovation project!.

image

Github: https://github.com/hellomuthu23/react-material-ui-template

Live site: https://react-material-ui-template.web.app/

The ready-to-go template comes with the most essential tech-stack of React, Typescript, React Router, Material-UI, Lint, Prettier, and Cool Landing Page to bootstrap your web app. The app also has below basic features of creating a Taskboard and managing tasks using Kanban board.

  1. Create a new Taskboard
  2. Open a Task Board
  3. Add Task
  4. Move Task across the different stage using the drag and drop feature
  5. Delete Task

The Landing page is responsive as well, built using material-ui grids.

image

Landing Page

The Template has a home page with Toolbar for main navigation, the main content area for displaying page content, and a footer. It also offers a smooth transition/animation effect while loading the content on the page.
image

Kanban Taskboard Page

The Taskboard page displays all the tasks in a kanban style format, task can be moved across to different stages using Drag and Drop feature. Along with this you can Add and Delete tasks. All data is stored in local storage.
image

How to use/run the app locally?

You can run the app locally and see how it performs. Follow the below steps to run the app locally.

  1. Clone the repo git clone https://github.com/hellomuthu23/react-material-ui-template.git
  2. Run yarn command to install the required npm package.
  3. Run yarn start to start the app.
  4. Access the app at http://localhost:3000.

Hope you like this cool template and is of use to you!.
Good luck!.

Links:

Github: https://github.com/hellomuthu23/react-material-ui-template
Live site: https://react-material-ui-template.web.app/


This content originally appeared on DEV Community and was authored by Muthu Pandian


Print Share Comment Cite Upload Translate Updates
APA

Muthu Pandian | Sciencx (2021-06-23T21:51:59+00:00) React and Material-UI Landing Page/Template Starter Kit — Kanban Taskboard WebApp. Retrieved from https://www.scien.cx/2021/06/23/react-and-material-ui-landing-page-template-starter-kit-kanban-taskboard-webapp/

MLA
" » React and Material-UI Landing Page/Template Starter Kit — Kanban Taskboard WebApp." Muthu Pandian | Sciencx - Wednesday June 23, 2021, https://www.scien.cx/2021/06/23/react-and-material-ui-landing-page-template-starter-kit-kanban-taskboard-webapp/
HARVARD
Muthu Pandian | Sciencx Wednesday June 23, 2021 » React and Material-UI Landing Page/Template Starter Kit — Kanban Taskboard WebApp., viewed ,<https://www.scien.cx/2021/06/23/react-and-material-ui-landing-page-template-starter-kit-kanban-taskboard-webapp/>
VANCOUVER
Muthu Pandian | Sciencx - » React and Material-UI Landing Page/Template Starter Kit — Kanban Taskboard WebApp. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/23/react-and-material-ui-landing-page-template-starter-kit-kanban-taskboard-webapp/
CHICAGO
" » React and Material-UI Landing Page/Template Starter Kit — Kanban Taskboard WebApp." Muthu Pandian | Sciencx - Accessed . https://www.scien.cx/2021/06/23/react-and-material-ui-landing-page-template-starter-kit-kanban-taskboard-webapp/
IEEE
" » React and Material-UI Landing Page/Template Starter Kit — Kanban Taskboard WebApp." Muthu Pandian | Sciencx [Online]. Available: https://www.scien.cx/2021/06/23/react-and-material-ui-landing-page-template-starter-kit-kanban-taskboard-webapp/. [Accessed: ]
rf:citation
» React and Material-UI Landing Page/Template Starter Kit — Kanban Taskboard WebApp | Muthu Pandian | Sciencx | https://www.scien.cx/2021/06/23/react-and-material-ui-landing-page-template-starter-kit-kanban-taskboard-webapp/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.