in

A Twitter Clone with React And Firebase


Twitter-Clone

A Twitter Clone with React And Firebase.

πŸ”₯ Stack

Front-end


Back-end

βœ… 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. νšŒμ›κ°€μž…, 이메일 둜그인, μ†Œμ…œ 둜그인(ꡬ글, κΉƒν—ˆλΈŒ)

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

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

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

2. μœ μ €

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

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

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

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

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

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

3. νŠΈμœ—

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

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

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

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

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

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

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

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

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

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

4. 기타

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

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

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

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


Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

Tata Sky Binge Service Now Comes With Two More OTT Platforms

A New Banking Trojan Targeting Latin American Users