3Witter

3Witter

여러 강의를 참고하여 데이터베이스를 이용해 만들어본 Twitter clone
설계없이 생각나는 대로 구현을 하느라 코드가 깔끔하지 못하고, 완성도가 부족하다. 또 데이터 베이스를 이용한게 처음이라 데이터를 어떻게 저장하여야 효율적인지 몰랐다. 설계의 중요성을 깨달았으니 다음번엔 이보다 좀 더 완성도 있게 만들어 봐야겠다.

Setup

• axios
• dayjs
• firebase
• sweetalert2
• @fortawesome

Authentication, 이미지, 데이터 저장

• firebase / Authentication, 데이터 저장
• Cloudinary / 이미지 저장

사용

로그인화면

firebase로 로그인 기능을 만들었다. e-mail 기능은 미완성

메인화면

메인화면에선 모든 사용자의 트윗을 확인할 수 있으며, 하트를 누르면 해당 트윗을 좋아요 페이지에서 따로 확인할 수 있게 된다.

트윗하기

이미지 업로드 버튼을 클릭하면 이미지 또한 트윗할 수 있다.

트윗 삭제

반응형 디자인

반응형 디자인을 구현해 화면이 작아지면 왼쪽의 서비스 태그들이 상단으로 이동하게 하였다.
프로필 페이지로 이동하면 프로필을 수정할 수 있다.