國立臺灣大學網路服務程式設計課程（2025 Fall）作業專案集。
A collection of six web development projects completed for NTU's Web Programming course. The coursework covers a progressive journey from static websites to full-stack applications, including interactive games, real-time social platforms, and AI-powered chatbots. All projects were developed in collaboration with Cursor AI.
- A static personal website with modern design and responsive layout.
- Tech Stack: HTML5 / CSS3 / JavaScript (ES6+)
- Features: Scroll-based page transitions, smooth animations, social links integration, CV download
- Pages: Home, About, Portfolio, Blog, Contact
-
A web-based puzzle game built with React, featuring stunning visual effects.
- Tech Stack: React 18 / TypeScript / Vite
- Features: 8x8 game grid, smart drag-and-drop system, row/column clearing mechanics, combo animations
- Play Online: deholay.github.io/block-blast
-
NTU course search and enrollment preview system.
- Tech Stack: React 18 / TypeScript / Vite / Material UI
- Features: Keyword search, time filtering, department filtering, course bookmarking, schedule management, conflict detection, PDF export
- State Management: React Context API
-
Real-time city mutual aid and skill exchange platform with map visualization and smart matching system.
- Frontend: React 18 / TypeScript / Material UI / Google Maps API
- Backend: Express.js / TypeScript / SQLite3 / JWT Authentication
- Features: Task posting & management, smart matching algorithm, route planning, real-time location
-
An X (Twitter) clone social media application with real-time interactions.
- Tech Stack: Next.js 16 / TypeScript / MongoDB Atlas / Tailwind CSS
- Real-time: Pusher (live sync for likes and comments)
- Media: Cloudinary image/video uploads
- Auth: NextAuth.js (Google / GitHub OAuth)
- Live Demo: eks-iota.vercel.app
-
A finance chatbot integrated with LINE Messaging API, combining AI conversation with admin dashboard.
- Tech Stack: Next.js 15 / TypeScript / MongoDB / Prisma
- AI: Google Gemini 2.0 Flash Lite
- Features: Expense tracking, stock trading records, statistics queries, Rich Menu
- Dashboard: Real-time conversation monitoring, statistics charts, filtering
- Live Demo: wealthai-kappa.vercel.app/dashboard
- LINE Bot: Add Friend
| Category | Technologies |
|---|---|
| Frontend Frameworks | React, Next.js |
| Languages | TypeScript, JavaScript |
| UI Frameworks | Material UI, Tailwind CSS, Shadcn/UI |
| Backend Frameworks | Express.js, Next.js API Routes |
| Databases | MongoDB Atlas, SQLite |
| ORM | Prisma, Mongoose |
| Authentication | JWT, NextAuth.js |
| Real-time | Pusher |
| External APIs | Google Maps, LINE Messaging, Google Gemini |
| Cloud Services | Vercel, Cloudinary |
FU-CHIEN TSOU
Dept. of ESOE
National Taiwan University