miguellamas/react-todo

React CRUD To Do App

Modern ToDo CRUD App (Vite + React)

I created this React ToDo app that saves and loads to local storage. The React App includes full CRUD functionality: create, read, update, and delete. It's also customised with Light/Dark Mode and a Color Theme switcher.

Main Learning Points:

• Building Components in React.
• Passing Props between Components.
• Creating your own Custom Hooks to read and write data to your local storage.
• How to deal with State locally and pass it between Components.
• Working with Heroicons (Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS).
• Accessibility (aria-label, color theme switcher).
• Working with Vite JS, for a faster and smoother development workflow. It immediately updates your changes in the browser.
• Customised App by adding Light/Dark Mode.
• Customised App by adding color theme switcher.

Built with:

• React.js
• JavaScript
• Node.js
• Vite JS
• HTML
• CSS
• Heroicons

Deployed with:

• Deployed using Netlify

Project Setup & Running:

• Prerequisites

  • None

• Clone Repo https://github.com/MiguelLamas/react-todo.git

• Before starting the project, follow these steps to create project, install Vite JS and get your server up and running:

  • npm create vite@latest
  • add <your-project-name>
  • select a framework
  • select a variant
  • cd <your-project-name>
  • npm install
  • npm run dev

• To make your dev experience easier, download these VS code extensions:

  • ES7 React/Redux/GraphQL/React-Native snippets
  • ESLint

Developer:

• Miguel Lamas - GitHub

License:

Copyright (c) 2023 Miguel Lamas - https://github.com/MiguelLamas