A Twitter Clone with React And Firebase.

πŸ”₯ Stack



βœ… Packages

  • [x] React
  • [x] React Router
  • [x] React Hooks
  • [x] Firebase
  • [x] Styled Components

βš™ Features

  • [x] Tweet CRUD
  • [x] Email, Google, Github, Social Authentication
  • [x] File Upload
  • [x] Profile Page
  • [x] Protected Pages
  • [x] API Key Security
  • [x] Deploy

πŸ§‘πŸ»β€πŸ’» Services

  • [x] Firebase
  • [x] Authentication
  • [x] Cloud Firestore
  • [x] Cloud Storage
  • [x] Hosting
  • [x] NoSQL Realtime, Query, Filter

πŸ“Œ μ†Œκ°œ

1. 인증

1-1. λΉ„λ‘œκ·ΈμΈ μ‚¬μš©μžλ„ 읽기 ν—ˆμš©

  • 기쑴에 λ‘œκ·ΈμΈμ„ ν•œ ν›„μ—λ§Œ νŠΈμœ—μ„ 읽기와 μ“°κΈ°κ°€ κ°€λŠ₯ν•œ λ°©μ‹μ—μ„œ λΉ„λ‘œκ·ΈμΈμ‹œμ—λ„ μ½κΈ°κΉŒμ§€λŠ” κ°€λŠ₯ν•˜λ„λ‘ λ³€κ²½ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
  • λ‘œκ·ΈμΈμ„ ν•˜μ§€ μ•Šμ•„λ„ μ‚¬μ΄νŠΈμ— λ“€μ–΄μ™€μ„œ λ°©λ¬Έμžκ°€ κ°„λ‹¨ν•˜κ²Œ 글을 읽고 ν™•μΈν•˜κ³  ꡬ경할 수 μžˆλ„λ‘ ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

1-2. νšŒμ›κ°€μž…, 이메일 둜그인, μ†Œμ…œ 둜그인(ꡬ글, κΉƒν—ˆλΈŒ)

  • μ‚¬μš©μžκ°€ 이메일 λ˜λŠ” 기쑴에 가지고 있던 κ΅¬κΈ€μ΄λ‚˜ κΉƒν—ˆλΈŒ μ†Œμ…œ 계정을 톡해 νšŒμ›κ°€μž…μ„ ν•˜κ³  λ‘œκ·ΈμΈμ„ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
  • νšŒμ›κ°€μž…μ„ ν•  λ•Œ μ‚¬μš©μž 이름을 톡해 초기 κΈ°λ³Έ λ‹‰λ„€μž„μ„ μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

1-3. 이메일 μ£Όμ†Œ 및 λΉ„λ°€λ²ˆν˜Έ λ³€κ²½

  • νšŒμ›κ°€μž… ν›„ ν˜„μž¬ λ‘œκ·ΈμΈν•œ μ‚¬μš©μžκ°€ 이메일 λ³€κ²½ 및 λΉ„λ°€λ²ˆν˜Έ λ³€κ²½ λ²„νŠΌμ„ 눌러 μƒˆλ‘œμš΄ 이메일 μ£Όμ†Œμ™€ λΉ„λ°€λ²ˆν˜Έλ‘œ λ³€κ²½ν•  수 μžˆλ„λ‘ ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
  • 이메일 λ³€κ²½κ³Ό λΉ„λ°€λ²ˆν˜Έ λ³€κ²½ λ²„νŠΌμ€ νŒŒμ΄μ–΄λ² μ΄μŠ€μ˜ Authλ₯Ό 톡해 ν˜„μž¬ λ‘œκ·ΈμΈν•œ μ‚¬μš©μžκ°€ 학인될 λ•Œλ§Œ λ²„νŠΌμ΄ 보여지도둝 ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
  • μƒˆλ‘œμš΄ 이메일 μ£Όμ†Œλ₯Ό λ³€κ²½ν•  λ•Œ, 기쑴에 νšŒμ›κ°€μž…ν–ˆλ˜ 이메일 μ£Όμ†Œλ₯Ό 톡해 인증을 λ°›μ•„μ•Όλ§Œ λ³€κ²½ν•  수 μžˆλŠ” 방법도 μžˆμŠ΅λ‹ˆλ‹€.

2. μœ μ €

2-1. μ‚¬μš©μž 정보 확인

  • ν”„λ‘œν•„ νŽ˜μ΄μ§€μ—μ„œ μ‚¬μš©μžκ°€ κ°€μž…ν•œ 이메일 μ£Όμ†Œμ™€ 계정 생성일, λ§ˆμ§€λ§‰ 둜그인 λ‚ μ§œλ₯Ό 확인할 수 μžˆλ„λ‘ ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
  • λ˜ν•œ μ‚¬μš©μžκ°€ κ°€μž…ν•œ 이메일이 인증된 이메일인지도 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

2-2. μ‚¬μš©μž 이름 λ³€κ²½ 및 ν”„λ‘œν•„ 사진 λ³€κ²½

  • ν”„λ‘œν•„ νŽ˜μ΄μ§€μ—μ„œ μ‚¬μš©μž 이름과 ν”„λ‘œν•„ 사진을 λ³€κ²½ν•˜κ³  μ—…λ‘œλ“œν•  수 μžˆμŠ΅λ‹ˆλ‹€.

2-3. μ‚¬μš©μžκ°€ μž‘μ„±ν•œ νŠΈμœ— λͺ©λ‘

  • ν”„λ‘œν•„ νŽ˜μ΄μ§€μ—μ„œ μ‚¬μš©μžκ°€ μž‘μ„±ν•œ νŠΈμœ— λͺ©λ‘μ„ ν•œ λˆˆμ— λͺ¨μ•„λ³Ό 수 μžˆλ„λ‘ ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
  • μ‚¬μš©μžλŠ” μžμ‹ μ΄ μž‘μ„±ν•œ νŠΈμœ— 정보와 μž‘μ„±ν•œ νŠΈμœ—μ˜ 수λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

3. νŠΈμœ—

3-1. νŠΈμœ— μž‘μ„±, μˆ˜μ •, μ‚­μ œ

  • κΈ€, 이미지, 움지 등을 λ„£μ–΄ νŠΈμœ—μ„ μž‘μ„±ν•  수 μžˆλ„λ‘ ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
  • μ‚¬μš©μžλŠ” μžμ‹ μ΄ μž‘μ„±ν•œ νŠΈμœ—μ„ ν΄λ¦­ν•΄μ„œ μˆ˜μ •ν•˜κ³  μ‚­μ œν•  수 μžˆμŠ΅λ‹ˆλ‹€.

3-2. 이λͺ¨μ§€ μΆ”κ°€

  • μ‚¬μš©μžκ°€ 이λͺ¨μ§€λ₯Ό μΆ”κ°€ν•  λ•Œ 단좕킀λ₯Ό μ‚¬μš©ν•˜μ§€ μ•Šκ³  μ•„μ΄μ½˜μ„ ν΄λ¦­ν•΄μ„œ μ›ν•˜λŠ” 이λͺ¨μ§€λ₯Ό 선택해 μΆ”κ°€ν•  수 μžˆλ„λ‘ ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

3-3. μ’‹μ•„μš”β€οΈ

  • μ‚¬μš©μžλŠ” μžμ‹ μ΄ μž‘μ„±ν•œ κΈ€κ³Ό λ‹€λ₯Έ μ‚¬λžŒμ΄ μž‘μ„±ν•œ 글에 μ’‹μ•„μš”β€οΈ λ₯Ό λˆ„λ₯Ό 수 μžˆμŠ΅λ‹ˆλ‹€.
  • μ’‹μ•„μš”λ₯Ό ν•œλ²ˆ λˆ„λ₯΄λ©΄ ν•˜νŠΈκ°€ μ±„μ›Œμ§€κ³  λ‹€μ‹œ λˆ„λ₯΄λ©΄ μ’‹μ•„μš”κ°€ μ·¨μ†Œλ˜λ„λ‘ ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

3-4. νŠΈμœ— 정보

  • νŠΈμœ—μ„ μž‘μ„±ν•˜κ²Œ 되면 νŠΈμœ—μ„ μž‘μ„±ν•œ μ‚¬λžŒμ˜ ν”„λ‘œν•„ 사진과 λ‹‰λ„€μž„, 이메일 μ£Όμ†Œ, μž‘μ„±μΌμžλ₯Ό λΆˆλŸ¬μ™€μ„œ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

3-5. 전체 νŠΈμœ— 수, νŠΈμœ„ν„° 검색

  • 쀑앙 μƒλ‹¨μ—μ„œ ν˜„μž¬ μž‘μ„±λœ 전체 νŠΈμœ— 수λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.
  • 전체 νŠΈμœ— μˆ˜λŠ” νŠΈμœ— μΆ”κ°€, μ‚­μ œκ°€ 이루어지면 μ‹€μ‹œκ°„μœΌλ‘œ μˆ«μžκ°€ λ³€κ²½λ©λ‹ˆλ‹€.
  • 검색창에 ν‚€μ›Œλ“œλ₯Ό μž…λ ₯ν•΄ νŠΈμœ„ν„° 검색 κ²°κ³Όλ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

4. 기타

4-1. 닀크λͺ¨λ“œ

  • μƒλ‹¨μ˜ 🌞 와 πŸŒ™ 이λͺ¨ν‹°μ½˜μ„ λˆŒλŸ¬μ„œ 라이트 λͺ¨λ“œμ™€ 닀크 λͺ¨λ“œλ₯Ό μ „ν™˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
  • 라이트 λͺ¨λ“œλŠ” κΉ”λ”ν•œ 흰색과 μ—°ν•œ νšŒμƒ‰μ„ μ‘°ν•©ν•΄μ„œ λ§Œλ“€μ—ˆκ³ , 닀크 λͺ¨λ“œλŠ” μ–΄λ‘μš΄ νšŒμƒ‰κ³Ό 남색을 μ‘°ν•©ν•΄μ„œ λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€.
  • λ²„νŠΌμ„ ν΄λ¦­ν–ˆμ„ λ•Œ state값에 λ³€ν™”λ₯Ό μ€˜μ„œ κ·Έ state값을 μ΄μš©ν•΄μ„œ 라이트/닀크λͺ¨λ“œλ₯Ό μ „ν™˜ν•  수 μžˆλ„λ‘ ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
  • μŠ€νƒ€μΌ μ»΄ν¬λ„ŒνŠΈλ₯Ό μ΄μš©ν•΄μ„œ propsλ₯Ό λ°›μ•„ 쑰건에 맞게 배경색과 μ£Όλ³€ 색상에 μžμ—°μŠ€λŸ¬μš΄ λ³€ν™”λ₯Ό μ£Όμ—ˆμŠ΅λ‹ˆλ‹€.

4-2. ν”Œλž˜μ‹œ 메세지

  • μ‚¬μš©μžκ°€ 둜그인, λ‘œκ·Έμ•„μ›ƒ, νšŒμ›κ°€μž…, νŠΈμœ— μž‘μ„±, μˆ˜μ •, μ‚­μ œ, ν”„λ‘œν•„ μ—…λ°μ΄νŠΈ λ“±λ“±μ˜ λ™μž‘μ„ ν•  λ•Œ 였λ₯Έμͺ½ 상단에 μž‘μ€ ν”Œλž˜μ‹œ 메세지λ₯Ό λ„μ›Œ μƒνƒœ 확인을 ν•  수 μžˆλ„λ‘ ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
  • ν”Œλž˜μ‹œ λ©”μ„Έμ§€λŠ” alert(μ•Œλ¦Ό)μ°½κ³Ό λ‹€λ₯΄κ²Œ ν΄λ¦­ν•˜μ§€ μ•Šμ•„λ„ 일정 μ‹œκ°„μ΄ μ§€λ‚˜λ©΄ μžλ™μœΌλ‘œ μ‚¬λΌμ§‘λ‹ˆλ‹€.