개인 sns 프로젝트 'NWITTER' 소개

 

 

 

 

프로젝트 소개

---

Nwitter프로젝트는 우주 배경의 테마로 된 학교 커뮤니트 사이트를 구현하는 것을 목표로 한 개인 프로젝트이다.

다니던 학교에 재학생용 커뮤니티 사이트가 없어서 "우리 학교만의 독특한 사이트가 있다면 어떨까?"라는 생각으로, 항공과 우주를 테마로 한 SNS 사이트를 만들기로 결심했다.

 

많은 학생들이 정보를 공유하고 주고받는 플랫폼을 기획하였고 트위터를 중점으로 참고하여 만들었다. 트위터를 참고한 이유는 많은 사람들이 정보 수집을 위해 트위터를 활용한다는 사실을 알고, 이와 유사한 목적을 가진 커뮤니티를 만들고자 했기 때문이다.하지만 단순한 복제가 아닌 다양한 구성을 만들고 싶어서 인스타그램도 보고 여러가지 sns 웹사이트의 레이아웃을 참고하여 설계를 진행했다.

 

 

약 1년정도 기획부터 디자인, 기능 구현, 배포까지 차근차근 진행했다. 
앞으로 프로젝트를 구현하면서 정리했던 많은 문서들을 차근차근 블로그에 올려볼 생각이다.

 

 

아래는 Nwitter 프로젝트 github 주소이다. 프론트엔드 코드와 백엔드 코드 따로따로 구성되어있다. 

 

 프론트 :  https://github.com/goops2000/My-Nwitter

GitHub - goops2000/My-Nwitter

 백엔드 : https://github.com/goops2000/My-Nwitter-Backend

GitHub - goops2000/My-Nwitter-Backend

 

 

기술 스택

---

프론트엔드 : React, Typescript, Redux, React-Query, SCSS

백엔드 : Node.js, Express.js, JWT, WebSocket

데이터베이스 : MySQL (Sequelize ORM 사용), Redis(채팅서비스)

클라우드 및 배포 : AWS, AWS RDS, Vercel (프론트엔드와 백엔드 코드 배포)

 

 

주요 기능

---

• 회원가입 및 로그인 기능: jwt 토큰과 쿠키 사용 기반의 사용자 계정 생성 및 인증, 로그인 상태에 따른 라우팅 기능
• 게시물 업로드 기능 : formData, multer, mysql, sequelize 기반의 다양한 형식의 콘텐츠 업로드 기능
• 게시물 하단 부가 기능 : 리트윗, 북마크, 좋아요, 댓글 등의 트윗 게시물 하단 버튼 기능
• 북마크와 메모 기능 : 북마크 페이지 생성하여 북마크 데이터와 사용자 메모 연동 기능
• 페이지네이션 및 Explore 기능 : 페이지네이션, 무한스크롤, 최신순/인기순 정렬, 팔로우, SearchBar 검색 기능
• 메세지 채팅 기능 : websocket, redis기반의 사용자 간의 메세지 채팅 기능
• 프로필 관리 및 게시물 수정/삭제 기능 : 사용자 프로필 수정, 트윗 게시물 삭제 기능