TickEvent: 이벤트 공유 및 티켓 판매 웹 앱 개발 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 초보 개발자 및 중급 개발자
• Next.js, Prisma, Stripe 기술 습득을 목표로 하는 자
• 이벤트 플랫폼 개발에 관심 있는 프론트엔드/백엔드 개발자
• 난이도: 중간 (Next.js 및 TypeScript 기초 지식 필요)

핵심 요약

• 핵심 기술 스택: Next.js, Prisma ORM, BetterAuth, ShadCN/UI, Stripe
• 주요 기능: 이벤트 생성, 이미지 업로드, Stripe를 통한 결제, 사용자 대시보드 관리
• 프로젝트 구조: TypeScript 기반, Tailwind CSS와 ShadCN/UI로 구성된 반응형 디자인

섹션별 세부 요약

1. 프로젝트 개요

• TickEvent은 이벤트 공유 및 티켓 판매 기능을 제공하는 minimal한 웹 앱
• Next.js 기반의 서버 구성, Prisma ORM으로 데이터베이스 관리
• BetterAuth를 통한 사용자 인증, ShadCN/UI로 UI 디자인 구현

2. 주요 기능

• 이벤트 생성: 제목, 이미지, 가격, 티켓 수량 입력 가능
• Stripe 결제: Stripe Checkout을 통해 결제 처리 가능
• 이미지 업로드: ImageKit을 사용한 이미지 관리 기능 포함
• 대시보드: 사용자가 등록한 이벤트 및 주문 내역 확인 가능

3. 기술 스택

• 프론트엔드: Next.js, Tailwind CSS, ShadCN/UI, TypeScript
• 백엔드: Prisma ORM, BetterAuth, Stripe
• 이미지 처리: ImageKit API 활용

4. 프로젝트 실행 방법

• git clone을 통해 코드 다운로드 후 .env 파일 생성
• 환경 변수 설정: DATABASE_URL, BETTER_AUTH_SECRET, STRIPE_SECRET_KEY 등
• npm install 설치 후 npm run dev로 개발 서버 실행

5. 기여 방법

• Fork 후 새로운 브랜치 생성
• Pull Request 제출을 통해 기여 가능
• 오픈소스 프로젝트로 커뮤니티 참여 유도

결론

• TickEvent은 Next.js 기반의 실전 프로젝트로, 이벤트 플랫폼 개발 및 결제 시스템 구현을 학습할 수 있음
• Stripe 및 Prisma ORM 사용 시 환경 변수 설정이 필수적이며, ShadCN/UI를 통한 디자인 최적화가 중요
• 기여 시 Pull Request 전에 .env 파일의 보안 설정을 철저히 검토해야 함