Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/usgmathe/to-do-list
To-Do List React + Vite + Tailwindcss + TypeScript + JSON Server
https://github.com/usgmathe/to-do-list
Last synced: 1 day ago
JSON representation
To-Do List React + Vite + Tailwindcss + TypeScript + JSON Server
- Host: GitHub
- URL: https://github.com/usgmathe/to-do-list
- Owner: UsgMathe
- Created: 2024-06-14T02:13:35.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-06-18T03:43:40.000Z (6 months ago)
- Last Synced: 2024-11-05T23:38:54.096Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 60.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React + Vite + Tailwindcss + TypeScript + JSON Server
A simple To-Do List project using React, TypeScript, Vite, and JSON Server.
## Overview
This project is a basic To-Do List application built with modern web development technologies. It includes a React front-end written in TypeScript, powered by Vite, and uses JSON Server to simulate a REST API for managing to-do items.
## Prerequisites
Make sure you have the following software installed on your system:
- [Node.js](https://nodejs.org/) (which includes npm)
- [Git](https://git-scm.com/)
## Getting Started
Follow these steps to set up and run the project locally.
### 1. Clone the repository
```bash
git clone https://github.com/UsgMathe/To-Do-List.git
cd Checklists
```
### 2. Install dependencies
```bash
npm install
```
### 3. Run the development server
Start the Vite development server:
```bash
npm run dev
```
This will start the development server and you can view the application by navigating to `http://localhost:5173` in your browser.
### 4. Run the JSON Server
In a separate terminal, start the JSON Server to simulate a REST API:
```bash
npx json-server db.json
```
The JSON Server will run on `http://localhost:3000`.
## db.json
Here is an example of the structure of the db.json file used by JSON Server:
```json
{
"checklists": [
{
"id": "example-id",
"title": "Example Checklist",
"items": [
{
"id": "item-id-1",
"description": "Example item 1",
"checked": true
},
{
"id": "item-id-2",
"description": "Example item 2",
"checked": false
}
]
}
]
}
```
## Learn More
To learn more about the technologies used in this project, check out the following resources:
- [React](https://react.dev/)
- [TypeScript](https://www.typescriptlang.org/)
- [Vite](https://vitejs.dev/)
- [JSON Server](https://github.com/typicode/json-server/tree/v0)