데브허브 | DEVHUB | Build & Deploy an AI Online Learning Platform Using NextJs, React, Clerk, Neon, Drizzle ORMBuild & Deploy an AI Online Learning Platform Using NextJs, React, Clerk, Neon, Drizzle ORM
- Next.js, React, Tailwind CSS, Clerk, Neon, Drizzle ORM 등 최신 기술 스택을 활용하여 AI 기반의 풀스택 온라인 학습 플랫폼을 구축하는 프로젝트입니다. 🚀
- Google Gemini AI LLM 모델을 통합하여 사용자가 원하는 주제로 코스 내용, 레이아웃, 배너, 챕터 및 토픽을 자동으로 생성합니다. 🧠
- AI가 생성한 코스를 학습하고, 대시보드에서 진행 상황을 추적하며, 각 챕터 완료 시 진행률이 업데이트되는 등 체계적인 학습 경험을 제공합니다. 📈
- Clerk를 통해 사용자 인증을 처리하고, 최근 추가된 Clerk의 구독 결제 모델 기능을 활용하여 복잡한 결제 게이트웨이를 쉽게 통합하고 구독을 관리합니다. 💳
- uuxmokup.com으로 UI/UX 목업을 생성하고, Shadcn UI 라이브러리를 사용하여 미리 정의된 컴포넌트로 UI 개발 속도를 높입니다. 🎨
- Neon PostgreSQL 데이터베이스와 Drizzle ORM을 사용하여 빠르고 효율적인 데이터 관리를 구현하며, Next.js의 API 엔드포인트 기능을 활용합니다. 💾
- 프론트엔드부터 백엔드, 데이터베이스 관리, 인증, AI 통합 등 풀스택 개발에 필요한 모든 기술을 배울 수 있는 실용적인 프로젝트입니다. 🧑💻
- Google Gemini AI 등 무료 도구를 사용하여 비용 없이 강력한 AI 기능을 구현하며, 프로젝트 전체를 처음부터 구축합니다. 🆓
npx create next app을 통한 Next.js 프로젝트 생성, app 라우터, layout.js, page.js 등 Next.js의 핵심 파일 구조와 개발 환경 설정을 상세히 설명합니다. ⚙️
- Shadcn UI 설치 및 컴포넌트 추가 방법, Tailwind CSS 버전 4와의 호환성 문제(서버 재시작,
tw-animate-css 제거) 해결 팁을 제공합니다. 🛠️