Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ubeydeozdmr/react-todo-app

A simple to-do app built using React and tailwindcss.
https://github.com/ubeydeozdmr/react-todo-app

react react18 reactjs tailwind tailwind-css tailwindcss tailwindcss-plugin todo todo-app todo-list todoapp todolist todolist-application

Last synced: 1 day ago
JSON representation

A simple to-do app built using React and tailwindcss.

Awesome Lists containing this project

README

        

# react-todo-app

## IMPORTANT

- The preview of this project is almost exactly the same as [vue-todo-app](https://github.com/ubeydeozdmr/vue-todo-app).

- This project is the to-do application I made with Vue.js below, made with React instead of Vue.js.

- The information you will read from the Crema To-Do title below belongs to the vue-todo-app application. (Except for Development for React To-Do App section)

[Click here to see Vue To-Do App Repo Link](https://github.com/ubeydeozdmr/vue-todo-app)

# Crema To-Do

[![Netlify Status](https://api.netlify.com/api/v1/badges/c77de7fb-32f0-462b-a8f4-f915b69861d5/deploy-status)](https://app.netlify.com/sites/crematodo/deploys)

A simple to-do app built using [Vue.js](https://vuejs.org) and [tailwindcss](https://tailwindcss.com).

In this to-do app, you can add new todos, edit them or delete them.

## What's new in v1.3?

- Now, you can input your first name to show up top of the page (Instead of Crema To-Do title).

- To activate this feature, go to Preferences > First name.

- Search todo feature added (Now, you can input keywords to find todo which you want)

- If you don't want a search bar top of todolist, you can hide search bar from preferences ("Hide search bar" feature added)

- Show completed todos feature added

- Hide completed todos feature (boolean) removed; instead, added three option called "Show all todos", "Show active todos" and "Show completed todos".

[See full changelog](./changelog.md)

## Development for React To-Do App

### Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run start
```

### Compiles and minifies for production

```
npm run build
```

## Screenshots

![v1.3 overview with light theme](https://raw.githubusercontent.com/ubeydeozdmr/vue-todo-app/main/screenshots/v1.3-overview-light.png)
![v1.3 preferences with light theme](https://raw.githubusercontent.com/ubeydeozdmr/vue-todo-app/main/screenshots/v1.3-preferences-light.png)
![v1.3 overview with dark theme](https://raw.githubusercontent.com/ubeydeozdmr/vue-todo-app/main/screenshots/v1.3-overview-dark.png)
![v1.3 preferences with light theme](https://raw.githubusercontent.com/ubeydeozdmr/vue-todo-app/main/screenshots/v1.3-preferences-dark.png)