Skip to content

Commit 67db9cc

Browse files
SalnikaSalnika
committed
fix: readme
1 parent 8fe208d commit 67db9cc

25 files changed

Lines changed: 2179 additions & 2 deletions

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<td><a href="https://hub.docker.com/r/salnika/phantom-api.dev"><img src="https://img.shields.io/docker/v/salnika/phantom-api.dev?sort=semver&label=backend" alt="Docker image version"></a></td>
1010
</tr>
1111
<tr>
12-
<td><a href="https://hub.docker.com/r/salnika/phantom-api.dev"><img src="https://img.shields.io/badge/Docket-you_like-blue" alt="Docker"></a></td>
12+
<td><a href="https://hub.docker.com/r/salnika/phantom-api.dev"><img src="https://img.shields.io/badge/Docker-image-blue" alt="Docker"></a></td>
1313
<td colspan="3"><a href="https://github.com/salnika/phantom-api.dev/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-MIT-blue" alt="License"></a></td>
1414
</tr>
1515
</table>

‎examples/todolist-phantom-api/.env.example‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
JWT_SECRET=your_jwt_secret
2+
API_BASE_URL=http://localhost:3000

‎examples/todolist-phantom-api/README.md‎

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
# TodoList - Phantom API
2+
3+
A complete TodoList application built with React, TypeScript and Phantom API. This application demonstrates the usage of the `phantom-api` package to create a dynamic interface with table relationship management.
4+
5+
## Features
6+
7+
✅ **Complete task management**
8+
- Create, edit, delete tasks
9+
- Mark tasks as completed
10+
- Priority system (low, medium, high)
11+
- Due dates with overdue alerts
12+
13+
✅ **Advanced tag system**
14+
- Dynamic tag creation
15+
- Customizable colored tags
16+
- Multiple tag filtering
17+
- Tag search functionality
18+
19+
✅ **Category management**
20+
- Organization by categories
21+
- Colored categories
22+
- Category filtering
23+
24+
✅ **Modern user interface**
25+
- Responsive design with Tailwind CSS
26+
- Lucide React icons
27+
- Smooth animations
28+
- Intuitive interface
29+
30+
✅ **Filters and search**
31+
- Filter by status (in progress, completed)
32+
- Filter by priority
33+
- Text search
34+
- Combinable filters
35+
36+
## Architecture
37+
38+
### Project structure
39+
40+
```
41+
src/
42+
├── components/ # React components
43+
│ ├── TodoForm.tsx # Creation form
44+
│ ├── TodoList.tsx # Task list
45+
│ ├── TodoItem.tsx # Individual item
46+
│ └── FilterBar.tsx # Filter bar
47+
├── services/ # API services
48+
│ ├── api.ts # API configuration
49+
│ ├── todoService.ts # Task service
50+
│ └── tagService.ts # Tag/category service
51+
├── hooks/ # Custom hooks
52+
│ └── useTodos.ts # Main hook
53+
├── types/ # TypeScript types
54+
│ └── index.ts # Interfaces and types
55+
└── App.tsx # Main component
56+
```
57+
58+
### Phantom API usage
59+
60+
The project uses Phantom API v1.0.5 `resource()` pattern:
61+
62+
```typescript
63+
// Resource configuration
64+
const TodoResource = resource('Todo');
65+
const TagResource = resource('Tag');
66+
const CategoryResource = resource('Category');
67+
68+
// Safe creation
69+
const response = await TodoResource.safeCreate(data);
70+
71+
// Safe update
72+
const response = await TodoResource.safeUpdate(id, data);
73+
74+
// Retrieval with relations
75+
const response = await TodoResource.read({
76+
include: {
77+
tags: true,
78+
category: true
79+
}
80+
});
81+
```
82+
83+
## Installation and startup
84+
85+
1. **Install dependencies**
86+
```bash
87+
npm install
88+
```
89+
90+
2. **Configure the API**
91+
Make sure your Phantom API backend is running on `http://localhost:3000`
92+
93+
3. **Start the development server**
94+
```bash
95+
npm run dev
96+
```
97+
98+
4. **Access the application**
99+
Open `http://localhost:5176` in your browser
100+
101+
## Configuration
102+
103+
### Phantom API Backend
104+
105+
Make sure you have a Phantom API backend running with:
106+
- Port 3000 (default)
107+
- CORS enabled for `http://localhost:5176`
108+
- Dynamic tables enabled
109+
110+
### Environment variables
111+
112+
Create a `.env` file if needed:
113+
```
114+
VITE_API_URL=http://localhost:3000
115+
VITE_API_KEY=your-api-key-here
116+
```
117+
118+
## Data models
119+
120+
### Todo
121+
```typescript
122+
interface Todo {
123+
id?: string;
124+
title: string;
125+
description?: string;
126+
completed: boolean;
127+
priority: 'low' | 'medium' | 'high';
128+
dueDate?: string;
129+
categoryId?: string;
130+
tagIds?: string[];
131+
createdAt?: string;
132+
updatedAt?: string;
133+
}
134+
```
135+
136+
### Tag
137+
```typescript
138+
interface Tag {
139+
id?: string;
140+
name: string;
141+
color: string;
142+
createdAt?: string;
143+
updatedAt?: string;
144+
}
145+
```
146+
147+
### Category
148+
```typescript
149+
interface Category {
150+
id?: string;
151+
name: string;
152+
color: string;
153+
description?: string;
154+
createdAt?: string;
155+
updatedAt?: string;
156+
}
157+
```
158+
159+
## Technical features
160+
161+
### Relationship management
162+
- Many-to-Many relationships between Todos and Tags
163+
- One-to-Many relationships between Categories and Todos
164+
- Automatic relationship loading
165+
166+
### State management
167+
- Custom `useTodos` hook
168+
- Local state with useState
169+
- Centralized error handling
170+
171+
### Advanced filtering
172+
- Combinable filters
173+
- Text search
174+
- Automatic sorting by priority and date
175+
176+
### Responsive interface
177+
- Mobile-first design
178+
- Adaptive components
179+
- Consistent icons
180+
181+
## Available scripts
182+
183+
- `npm run dev` - Development server
184+
- `npm run build` - Production build
185+
- `npm run preview` - Build preview
186+
- `npm run lint` - Code linting
187+
188+
## Technologies used
189+
190+
- **React 18** - UI framework
191+
- **TypeScript** - Static typing
192+
- **Vite** - Build tool
193+
- **Tailwind CSS** - CSS framework
194+
- **Lucide React** - Icons
195+
- **phantom-api** - Dynamic API
196+
197+
## Customization
198+
199+
### Adding new fields
200+
1. Extend interfaces in `src/types/index.ts`
201+
2. Modify services in `src/services/`
202+
3. Update components
203+
204+
### Modifying colors
205+
Colors are defined in `src/App.css` with Tailwind CSS.
206+
207+
### Adding new features
208+
Follow the existing architecture:
209+
1. Create service in `src/services/`
210+
2. Add types in `src/types/`
211+
3. Create components in `src/components/`
212+
4. Integrate in `src/App.tsx`
213+
214+
## Deployment
215+
216+
### Production build
217+
```bash
218+
npm run build
219+
```
220+
221+
### Static server
222+
```bash
223+
npm run preview
224+
```
225+
226+
Build files will be in the `dist/` folder.
227+
228+
## Support
229+
230+
For questions or issues:
231+
1. Check that the Phantom API backend is working
232+
2. Check browser logs
233+
3. Verify CORS configuration
234+
4. Consult Phantom API documentation
235+
236+
## License
237+
238+
MIT - See LICENSE file for more details.

‎examples/todolist-phantom-api/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="fr">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="icon" href="/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>TodoList - Phantom API</title>
9+
</head>
10+
11+
<body>
12+
<div id="root"></div>
13+
<script type="module" src="/src/main.tsx"></script>
14+
</body>
15+
16+
</html>

‎examples/todolist-phantom-api/knip.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"entry": "src/main.tsx",
3+
"ignoreBinaries": [
4+
"knip",
5+
"oxlint",
6+
"tsc",
7+
"vite"
8+
],
9+
"ignoreDependencies": [
10+
"oxlint"
11+
]
12+
}

‎examples/todolist-phantom-api/package.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "todolist-phantom-api-example",
3+
"version": "0.0.0",
4+
"dependencies": {
5+
"@tailwindcss/postcss": "^4.1.11",
6+
"lucide-react": "^0.525.0",
7+
"phantom-api-client": "^0.2.0-alpha",
8+
"react": "^19.1.0",
9+
"react-dom": "^19.1.0"
10+
},
11+
"devDependencies": {
12+
"@types/react": "^19.1.8",
13+
"@types/react-dom": "^19.1.6",
14+
"@vitejs/plugin-react": "4.6.0",
15+
"autoprefixer": "^10.4.21",
16+
"knip": "^5.61.3",
17+
"oxlint": "^1.0.0",
18+
"postcss": "^8.5.6",
19+
"tailwindcss": "^4.1.11",
20+
"typescript": "^5.8.3",
21+
"vite": "^7.0.0"
22+
},
23+
"private": true,
24+
"license": "MIT",
25+
"projectConfig": {
26+
"type": "example",
27+
"artifactName": "example-todolist-phantom-api"
28+
},
29+
"scripts": {
30+
"build": "tsc && vite build",
31+
"dev": "vite",
32+
"knip": "knip --config knip.json",
33+
"lint": "oxlint .",
34+
"preview": "vite preview",
35+
"typecheck": "tsc --noEmit"
36+
},
37+
"type": "module"
38+
}

‎examples/todolist-phantom-api/postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
"@tailwindcss/postcss": {},
4+
autoprefixer: {},
5+
},
6+
}

‎examples/todolist-phantom-api/public/favicon.ico‎

4.19 KB
Binary file not shown.

0 commit comments

Comments
 (0)