Build Full Stack E-Learning Coding Platform using NextJs, React, Neon, CodeRabbit
- Next.js, React, Neon, CodeRabbit을 활용하여 혁신적인 풀스택 코딩 학습 플랫폼 '코드박스'를 구축합니다. 🚀
- 픽셀 스타일의 애니메이션 UI, 이메일/Gmail 인증, 사용자 맞춤형 대시보드, 보상 시스템 등 풍부한 기능을 제공합니다. ✨
- 코스 등록, 진행 상황 추적, 무료 및 유료 콘텐츠 구분, XP 획득을 통한 게이미피케이션 요소를 포함합니다. 🎮
- 이론 설명, 과제, 힌트, 통합 코드 에디터 및 실시간 브라우저 출력을 갖춘 대화형 코딩 플레이그라운드를 제공하여 몰입감 있는 학습 경험을 선사합니다. 💻
- 주요 기술 스택은 Next.js (React 프레임워크), Neon PostgreSQL (데이터베이스), Clerk (인증 및 결제), CodeRabbit AI (코드 리뷰), Shadcn UI (컴포넌트 라이브러리)입니다. 🛠️
- Next.js 앱 생성, TypeScript, Tailwind CSS, App Router 설정, Shadcn UI 통합 및 커스터마이징, VS Code 확장 프로그램 설치, Google Fonts 적용 등 초기 개발 환경 설정을 상세히 다룹니다. ⚙️
- 챕터별 코드 리뷰를 위한 CodeRabbit AI 활용과 IT 표준 구현, 그리고 최종 클라우드 배포를 통해 실제 서비스 가능한 애플리케이션을 완성합니다. ☁️
- 구독 기반의 무제한 플랜을 통해 모든 유료 코스에 접근할 수 있는 수익 모델을 구축하며, 결제 게이트웨이 통합 방법을 설명합니다. 💰
데브허브 | DEVHUB | Build Full Stack E-Learning Coding Platform using NextJs, React, Neon, CodeRabbit