ice0208/x-clone-with-nextjs

X Mini Clone with NextJS

🔗 배포 URL

무엇을 만들었나? (프로젝트 소개)

X(Twitter)의 미니 클론 버전을 만들었습니다.
회원가입, 로그인, 게시글 쓰기, 게시글 좋아요 누르기 기능을 만들었습니다.

왜 만들었나? (제작 목적)

노마드 코더 리액트 스터디 3기 졸업과제를 위해 만들었습니다.

언제 만들었나? (제작 기간)

2023.11.06 ~ 2023.11.13

어떻게 만들었나? (대표 개발 기술)

NextJS, TypeScript, TailwindCSS, Prisma를 이용하여 개발하였습니다.
배포는 Vercel로 하였으며, DB는 Supabase의 postgreSQL를 이용했습니다.

사진들

/	/login	ㅤ/joinㅤ
==============	==============	==============

/join/create	/tweets
==============	==============

/tweets/:id	/tweets/upload
==============	==============

앞으로 추가할 것들

• 본인 글 수정, 삭제 기능
• 댓글 기능
• 본인 닉네임, 비밀번호 변경 기능
• 탈퇴 기능

실행 해보기

• npm install : 당연히 해야하는거죠
• 최상위 경로에 .env.local 파일 생성 후 아래 표 참고해서 채우시죠

KEY	VALUE's description
POSTGRES_PRISMA_URL	your sql url (maybe postgreSQL)
COOKIE_NAME	your cookie name
COOKIE_PASSWORD	your cookie password

• npm run prismaDevPush : Prisma 모델을 데이터베이스에 적용하여 개발 환경을 업데이트합니다. (모델을 변경했으면 실행해줍시다.)
• npx prisma generate : Prisma 모델을 기반으로 코드를 자동 생성하여 개발 생산성을 향상시킵니다. (schema.prisma 파일을 변경하면 실행해줍시다.)
• npm run prismaStudio : Prisma Studio 도구를 실행하는 명령어로, 데이터베이스 시각화와 효율적인 데이터 조작을 제공하여 개발 및 디버깅을 용이하게 합니다. (Not Required)
• npm run dev : Next.js 애플리케이션을 개발 서버 모드로 실행합니다