[트위터 클론코딩 최종]🔥제 트위터의 이름은 "오퍼시티 0.35" 입니다🚀💫

• ***크롬 기준 화면 배율 90%를 권장합니다.

• 최종 배포 URL : https://twitter-clone-b91f7.web.app/

• 깃허브 링크 : https://github.com/Kimbyul88/nwitter-reloaded

안녕하세요!

제 트위터의 이름은 오퍼시티 0.35 입니다.

이름의 이유는 밑에 메인화면 설명에도 쓰여있는데,

Wrapper의 투명도를 0.35로 통일했기 때문입니다.

개발 기술 & 스택

1. 파이어베이스 인증을 통한 회원가입, 로그인 서비스

2. 트윗 게시, 타임라인, 수정, 삭제 기능

3. 글쓰기 할때 사진 미리보기 기능, 사진 삭제 기능

4. 트윗 좋아요 기능

5. 트윗 올린 시간 표시

6. 전체 유저 모아보기 기능

7. 프로필 페이지 - 로그인 된 유저의 트윗 모아보기

8. 기타 CSS, JS

스크린샷 & 세부 설명

1. 로그인 화면

   • 먼저 로그인 화면입니다 ! 저는 깃허브 로그인과 이메일 로그인을 사용했습니다.

2. 메인 화면

   • 이것이 저의 메인화면 입니다.

   뒤에 색깔을 무슨 색으로 할까 한참 고민하다가 그냥 랜덤으로 생성되게 만들어 버렸습니다.😅

   메인화면에서 제 제목의 의미를 알 수 있는데

   트윗과 우측 메뉴의 Wrapper들의 Opacity가 모두 0.35라서 이렇게 제목을 지었습니다.

2-1. 오늘의 기분을 골라보세요!

• CSS, 자바스크립트 공부를 할 수 있었던 '오늘의 기분을 골라보세요! ' 입니다.

로고가 들어가야 할 부분에 저는 이모지를 선택할 수 있게 만들어 보았습니다.

지금은 3개의 기분 밖에 없지만! 후에 더 추가해 보도록 하겠습니다.

2-2. 글쓰기 - 사진 미리보기, 지우기

• 글쓰기 박스에 첨부한 사진 미리보기를 구현해보았습니다.

X 버튼을 누르면 지울 수도 있습니다.

2-3. 포스트 수정, 삭제

• 포스트 수정, 삭제 기능입니다.

2-4. 트윗 좋아요 누르기

• 각 트윗에 좋아요를 누를 수 있습니다.

하트를 누르면 숫자가 올라가고, 다시 누르면 숫자가 원상복구 됩니다.

2-5. 등록된 유저들

• 우측 상단에는 등록된 유저들을 모아놨습니다. 프로필 사진을 바꾼다면 적용이 되고,

호버 시 팔로우 버튼으로 바뀝니다.

3. 프로필 화면

• 프로필 페이지 입니다. 로그인 된 유저가 쓴 트윗의 리스트를 모두 볼 수 있습니다.

프로필 사진을 누르면 변경이 가능합니다.

이번 컨테스트를 진행하며 느낀 점 & 다른 트위터 클론코딩 하시는 분들을 위한 TIP

이번 컨테스트를 하며 .. 파이어베이스의 편리함을 다시 한번 알게됐고..

개발이 얼마나 재미있는지를 또 알게됐고, 2주 전에 포기하지 않길 정말 잘했다는 생각이 들었습니다. 사실 컨테스트 신청해놓고 안하려고 했었거든요

다른 분들을 위한 팁이라면, 포기하지 않고 2주동안 하루에 조금씩만 하면 완주하실 수 있을거라고 생각합니다.

컨테스트를 만들어주신 노마드 코더에게 감사드립니다!