Build a Tinder Clone With NextJS, React, Supabase and Stream | With Realtime Chat and Video Calling
- NextJS, React, Supabase, Stream을 사용하여 풀 스택 데이팅 웹사이트 구축 방법을 다룹니다. 💻
- 사용자는 계정 생성, 프로필 설정, 파트너 선택, 채팅, 영상 통화 기능을 사용할 수 있습니다. 📱
- 최신 기술 스택(Next.js, Tailwind CSS, ReactJS, Supabase, Stream)을 활용하여 이력서에 추가할 만한 프로젝트를 만듭니다. 🚀
- Superbase는 PostgreSQL 데이터베이스 및 인증 제공자 역할을 합니다. 🔑
- Superbase 클라이언트는 클라이언트 컴포넌트와 서버 컴포넌트에서 사용하기 위해 분리되어 설정됩니다. 🌐
- 인증 기능 구현을 위해 Superbase를 사용하여 사용자의 로그인/가입 기능을 구현합니다. ✅
- UI 스타일링은 프로젝트의 핵심이 아니므로 빠르게 진행하며, 필요한 경우 코드 설명을 참고합니다. 🎨
- isSignUp 상태를 사용하여 로그인 및 가입 UI를 전환합니다. 🔄
- 이메일, 비밀번호, 로딩 상태, 오류 메시지를 위한 상태 변수를 관리합니다. 🧰
- 폼 제출 시 로딩 상태를 관리하여 중복 클릭을 방지하고, 오류 메시지를 표시합니다. ⏳
- 로그인/가입 전환 버튼을 통해 사용자가 쉽게 모드를 변경할 수 있도록 합니다. 🖱️