Skip to content

Commit 5a05054

Browse files
pphatdevpphatdev
committed
feat: add CDN API project details and demo images, update project card styling
1 parent 4ce8d95 commit 5a05054

4 files changed

Lines changed: 290 additions & 3 deletions

File tree

‎content/projects/cdn-api-stackdev/index.mdx‎

Lines changed: 285 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,285 @@
1+
---
2+
title: "CDN API - StackDev"
3+
slug: "cdn-api-stackdev"
4+
description: "A high-performance CDN API service for image optimization, file management, and asset delivery with JWT authentication, database migrations, and a modern web dashboard."
5+
image: "https://pphat.me/assets/projects/cdn.api.pphat.stackdev.cloud/cover.webp"
6+
tags: ["File Management"]
7+
languages: ["Express.js", "TypeScript", "SQLite", "Tailwind CSS"]
8+
source:
9+
-
10+
name: "source"
11+
type: "source"
12+
url: "https://github.com/pphatdev/cdn.api.pphat.stackdev.cloud"
13+
-
14+
name: "demo"
15+
type: "demo"
16+
url: "https://cdn.api.pphat.stackdev.cloud"
17+
18+
authors:
19+
-
20+
name: "PPhat Dev"
21+
profile: "https://github.com/pphatdev.png"
22+
url: "https://github.com/pphatdev"
23+
24+
published: true
25+
createdAt: "2026-03-15T10:00:00.000Z"
26+
---
27+
28+
29+
<div class="blog-gallery" data-layout="snap" data-captions="true">
30+
<img src="https://pphat.me/assets/projects/cdn.api.pphat.stackdev.cloud/demo-1.webp" alt="1. Demo Image Project" className=""/>
31+
<img src="https://pphat.me/assets/projects/cdn.api.pphat.stackdev.cloud/demo-2.webp" alt="2. Demo Image Project" className=""/>
32+
<img src="https://pphat.me/assets/projects/cdn.api.pphat.stackdev.cloud/demo-3.webp" alt="3. Demo Image Project" className=""/>
33+
<img src="https://pphat.me/assets/projects/cdn.api.pphat.stackdev.cloud/demo-4.webp" alt="4. Demo Image Project" className=""/>
34+
<img src="https://pphat.me/assets/projects/cdn.api.pphat.stackdev.cloud/demo-5.webp" alt="5. Demo Image Project" className=""/>
35+
<img src="https://pphat.me/assets/projects/cdn.api.pphat.stackdev.cloud/demo-6.webp" alt="6. Demo Image Project" className=""/>
36+
<img src="https://pphat.me/assets/projects/cdn.api.pphat.stackdev.cloud/demo-7.webp" alt="7. Demo Image Project" className=""/>
37+
<img src="https://pphat.me/assets/projects/cdn.api.pphat.stackdev.cloud/demo-8.webp" alt="8. Demo Image Project" className=""/>
38+
</div>
39+
40+
<br/>
41+
42+
---
43+
44+
# ✨ **About Project**
45+
46+
CDN API is a production-ready content delivery network service that provides intelligent image optimization, secure file storage, and efficient asset management. Built with modern web technologies, it offers both a RESTful API and a web-based dashboard for managing your digital assets.
47+
48+
This comprehensive service features JWT-based authentication with role-based access control, database migrations using Drizzle ORM with SQLite, high-performance image processing with Sharp, and a beautiful web interface built with EJS and Tailwind CSS. The system includes rate limiting, CORS protection, session management, and complete audit logging for security compliance.
49+
50+
# 🛠️ **Project Tech Stack**
51+
52+
- **Backend:**
53+
- Express.js `v5.x` with TypeScript
54+
- Drizzle ORM with SQLite (Better-SQLite3)
55+
- JWT Authentication with bcrypt
56+
- TypeScript `v5.x`
57+
58+
- **Image & Document Processing:**
59+
- Sharp (High-performance image optimization)
60+
- Puppeteer (PDF generation & document previews)
61+
- TIFF.js (TIFF image handling)
62+
- Multer (File upload handling)
63+
64+
- **Security & Performance:**
65+
- Express Rate Limiting
66+
- CORS Protection
67+
- Session Management
68+
- Security Audit Logging
69+
- IPv6 Support
70+
71+
- **Frontend & UI:**
72+
- EJS Templating
73+
- Tailwind CSS `v4.x`
74+
- Modern Responsive Design
75+
- File Browser Interface
76+
77+
- **Database:**
78+
- SQLite Database
79+
- Drizzle ORM
80+
- Migration System
81+
- Seed Data Support
82+
- Drizzle Studio
83+
84+
- **Development:**
85+
- ts-node with hot reload
86+
- PostCSS
87+
- ESLint
88+
- Docker Support
89+
- PM2 Process Manager
90+
91+
# 🌈 **Project Features**
92+
93+
## 🖼️ Image Management
94+
- Intelligent Optimization with automatic compression
95+
- Multi-format Support (JPEG, PNG, WebP, AVIF, GIF, TIFF)
96+
- Responsive Images generation
97+
- Built-in image caching
98+
- EXIF metadata extraction
99+
100+
## 📁 File Management
101+
- Secure validated uploads
102+
- Hierarchical folder structure
103+
- File operations (move, delete, rename, search)
104+
- Document preview generation
105+
- Complete upload tracking with audit trail
106+
- Metadata storage in database
107+
108+
## 🔐 Authentication & Security
109+
- JWT-based authentication
110+
- Role-based access (Admin, User, Viewer)
111+
- Session tracking with refresh tokens
112+
- Account lockout after failed attempts
113+
- Complete authentication audit trail
114+
- Password security with bcrypt
115+
116+
## 💾 Database Features
117+
- SQLite with Drizzle ORM
118+
- Type-safe queries with TypeScript
119+
- Timestamp-based migration tracking
120+
- Database seeding for demo data
121+
- Built-in Drizzle Studio
122+
- Schema export for documentation
123+
124+
## 🎨 Web Dashboard
125+
- Authentication login page
126+
- Storage usage overview
127+
- Visual file browser with breadcrumb navigation
128+
- Starred files and recent items
129+
- User-friendly upload interface with progress
130+
- Upload history tracking
131+
- User management (Admin interface)
132+
- Powerful search capabilities
133+
- Fully responsive mobile-friendly design
134+
135+
## 📊 Monitoring & Analytics
136+
- Real-time storage statistics
137+
- File type analysis breakdown
138+
- Largest files tracking
139+
- Performance metrics monitoring
140+
141+
## 🔒 Security & Performance
142+
- Configurable rate limiting for all endpoints
143+
- CORS protection with pattern-based access
144+
- Full IPv4/IPv6 compatibility
145+
- Comprehensive request validation
146+
147+
# 💻 **API Endpoints**
148+
149+
### Authentication Endpoints
150+
- `POST /api/auth/login` - User login (rate limited)
151+
- `POST /api/auth/logout` - Logout current session
152+
- `POST /api/auth/logout-all` - Logout all sessions
153+
- `GET /api/auth/me` - Get current user info
154+
- `POST /api/auth/me/avatar` - Upload user avatar
155+
156+
### Image Endpoints
157+
- `POST /api/image/upload` - Upload images (rate limited)
158+
- `GET /api/image/assets/:filename` - Retrieve optimized images with query parameters (format, quality, width, height, fit)
159+
160+
### File Endpoints
161+
- `POST /api/file/upload` - Upload files (rate limited)
162+
- `GET /api/file/search` - Search files by name
163+
- `PUT /api/file/move` - Move files/folders
164+
- `DELETE /api/file/delete` - Delete files
165+
- `GET /api/file/download/*` - Download files
166+
- `GET /api/file/preview/*` - Preview documents
167+
168+
### Storage & Database
169+
- `GET /api/storage` - Full storage statistics
170+
- `GET /api/storage/summary` - Quick storage summary
171+
- `GET /api/database/files` - Get files database
172+
- `GET /api/database/stats` - Database statistics
173+
- `GET /api/database/search` - Search database
174+
- `POST /api/database/backup` - Backup database
175+
176+
### User Management (Admin)
177+
- `GET /api/auth/users` - List all users
178+
- `POST /api/auth/users` - Create new user
179+
- `PUT /api/auth/users/:id` - Update user
180+
- `DELETE /api/auth/users/:id` - Delete user
181+
182+
# 🚀 **Installation & Setup**
183+
184+
```bash
185+
# Clone the repository
186+
git clone https://github.com/pphatdev/cdn.api.pphat.stackdev.cloud
187+
cd cdn.api.pphat.stackdev.cloud
188+
189+
# Install dependencies
190+
npm install
191+
192+
# Configure environment
193+
cp env.json.example env.json
194+
# Edit env.json with your configuration
195+
196+
# Initialize database
197+
npm run migrate:up
198+
199+
# (Optional) Seed demo data
200+
npm run seed
201+
202+
# Run in development mode
203+
npm run dev
204+
```
205+
206+
### Default Admin Credentials
207+
- **Username**: `admin`
208+
- **Password**: `admin123`
209+
- **Email**: `admin@stackdev.cloud`
210+
211+
⚠️ **Important**: Change the admin password immediately after first login!
212+
213+
# 📦 **Available Scripts**
214+
215+
```bash
216+
# Development server with hot reload
217+
npm run dev
218+
219+
# Production server
220+
npm start
221+
222+
# Build TypeScript
223+
npm run build
224+
225+
# Database migrations
226+
npm run migrate:up # Run all pending migrations
227+
npm run migrate:down # Rollback last migration
228+
npm run migrate:status # Check migration status
229+
npm run migrate:create "name" # Create new migration
230+
231+
# Database seeds
232+
npm run seed # Run all seed files
233+
npm run seed:create "name" # Create new seed file
234+
235+
# Drizzle Studio
236+
npm run db:studio # Open Drizzle Studio
237+
238+
# CSS Build
239+
npm run build:css # Build Tailwind CSS
240+
npm run css # Watch CSS changes
241+
```
242+
243+
# 🚢 **Deployment**
244+
245+
### Production Build
246+
```bash
247+
npm ci --production=false
248+
npm run build
249+
npm start
250+
```
251+
252+
### Docker Deployment
253+
```bash
254+
docker build -t cdn-api .
255+
docker run -d -p 3000:3000 -v $(pwd)/storage:/app/storage -v $(pwd)/env.json:/app/env.json --name cdn-api cdn-api
256+
```
257+
258+
### PM2 Process Manager
259+
```bash
260+
pm2 start dist/app.js --name cdn-api
261+
pm2 startup
262+
pm2 save
263+
```
264+
265+
# 💡 **Key Highlights**
266+
267+
- **High Performance**: Built with Express.js 5.x and Sharp for lightning-fast image processing
268+
- **Type Safety**: Full TypeScript support throughout the codebase
269+
- **Modern Database**: Drizzle ORM with SQLite for type-safe queries and migrations
270+
- **Production Ready**: Includes authentication, authorization, rate limiting, and audit logging
271+
- **Developer Friendly**: Hot reload, Drizzle Studio, comprehensive API documentation
272+
- **Secure by Default**: JWT authentication, bcrypt password hashing, session management
273+
- **Fully Featured Dashboard**: Beautiful web interface for managing all assets
274+
- **API First**: RESTful API design with comprehensive endpoint coverage
275+
276+
# 📚 **Documentation**
277+
278+
The project includes comprehensive documentation:
279+
- API endpoint documentation in `docs/how-to-use/`
280+
- Postman collection in `docs/collections/`
281+
- Migration guide for database management
282+
- Complete README with setup instructions
283+
284+
---
285+

‎package-lock.json‎

Lines changed: 3 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@
119119
"globals": "^16.0.0",
120120
"open-next": "^0.0.1",
121121
"postcss": "^8.5.3",
122+
"sharp": "^0.34.5",
122123
"turbo": "^2.8.17",
123124
"typescript": "^5",
124125
"typescript-eslint": "^8.30.1"

‎src/components/cards/project-card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const ProjectCard = React.memo(({ project }: { project: Project }) => {
4040
href={`/projects/${projectSlug}`}
4141
aria-label={'Project details'}
4242
title={'Project details'}
43-
className="flex rounded-full p-2 hover:ring ring-foreground/20 hover:bg-background/10 dark:hover:bg-foreground/10 transition-all items-center justify-center">
43+
className="flex rounded-full p-2 bg-accent/10 hover:ring ring-foreground/20 hover:bg-background/10 dark:hover:bg-foreground/10 transition-all items-center justify-center">
4444
<ExternalLinkIcon className="size-4" />
4545
</Link>
4646
</div>

0 commit comments

Comments
 (0)