https://github.com/valeian3/todoapp

React Vite to-do app styled with Tailwind
https://github.com/valeian3/todoapp

react react-context-api tailwindcss typescript vite

Last synced: 3 months ago
JSON representation

React Vite to-do app styled with Tailwind

• Host: GitHub
• URL: https://github.com/valeian3/todoapp
• Owner: valeian3
• Created: 2024-08-21T11:55:00.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2025-02-06T21:59:08.000Z (over 1 year ago)
• Last Synced: 2025-03-13T09:43:03.799Z (over 1 year ago)
• Topics: react, react-context-api, tailwindcss, typescript, vite
• Language: TypeScript
• Homepage:
• Size: 866 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# React Vite Todo application EXAMPLE project

![NodeJS](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)

![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)

![TS](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)

![Tailwind](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)

Here is a live [demo](https://www.todoapp.valerianbahnik.from.hr).

## A fully functional EXAMPLE project written with React, Vite, TypeScript and Tailwind

This project showcases a modern to-do app built with **React**, **Vite**, **TypeScript**, and **Tailwind CSS**. It highlights how to create a scalable and efficient application using these cutting-edge technologies. Ideal for learning and reference, this example demonstrates best practices in web development with a focus on performance and design.

- create your daily todo tasks

- edit tasks

- checkmark when completed

- or simply delete when done

## Visuals of the app

| ![Laptop dark theme](/src//assets//laptop-todoapp-dark.png) | ![Laptop light theme](/src//assets//laptop-todoapp-light.png) |

| :---------------------------------------------------------: | :-----------------------------------------------------------: |

|                      Laptop dark theme                      |                      Laptop light theme                       |

## How to install / setup project

1. clone this project

2. make sure to have **node** and **npm** installed

3. navigate to project root and install dependencies via **npm install**

4. run project locally by **npm run dev**

5. open browser on provided port

## For developers

Coming soon...

## Find a bug?

Instruction on how to follow up with pull request coming soon...

## Known issues (Work in progress)

This project is still ongoing. Project is meant for training and finding best practices for constructing new project.