리액트를 이용한 Facebook 클론코딩

Emily Scone·2021년 1월 3일
5

SideProject

목록 보기
1/2
post-thumbnail

Sign In page

리액트 처음 써보는데, facebook support 하기 위해 만들어진 library이니, facebook을 제일 잘 호환할것 같아서 facebook clonning으로 시작....!!

삼일을 꼬박 걸려서 만든 facebook 클론.
JavaScript, Node.js, React를 통해 front end를 구현했고, firebase를 이용해 google authentication(Full Log-in) , realtime database, hosting 하였다.

주소 : https://facebook-clone-1f098.web.app
Github 레포 : https://github.com/emilyoun/Facebook-Clone-with-REACT

👩‍💻 Short Description

Facebook clone with React.

Firebase for Hosting, Google athentication(Full Log-In) and real time Database.

🌺 Build a Facebook Clone with REACT

  • React + React HOOKS
  • React Context API -> REDUX pattern
  • MATERIAL UI (Icons)
    is a library for css. One of the most popular css libraries. brings pristine icons.
    on terminal, install npm install @material-ui/core to your local repository and install npm install @material-ui/icons.
    more icons can be found here
  • FLEXBOX (responsive)
  • firebase's Firestore realtime DB
  • Firebase Hosting
  • Firebase Google Authentication (Full Log-In)
  • React filp move (pops in all smooth)

Why firebase?

firebase lets you host all the data you want
real time database
Google's eco system on the back (firebase, google authentication) and react on the front :ties together

short cut to move file to file

command + b to close explorer
command + p to go back to the previous file, p to move down

📕 Facebook Widgets at

https://developers.facebook.com/docs/plugins/page-plugin/

📗 When updating time

use the following code <p>{new Data(timestamp?.toDate()).toUTCString}</p>

📘 How to study react

  1. Documentation -> learn basics
  2. try build with REACT
  3. check interview questions

📒 Firebase Hosting

  1. firebase init : firebase.json public => build
  2. npm run build
  3. firebase deploy to open a server

📙 Study Timeline

  • Jan 2 2021 23:40 - 5:00 1:21:25
  • Jan 3 2021 15:00 - 04:41 2:28:31
  • Jan 4 2021 08:00 - 16:05 DONE
profile
Hello world

3개의 댓글

comment-user-thumbnail
2021년 1월 4일

Just three days? Good job! I cannot work in that times although I am a senior front-end developer. You need to arrange folders with real web project in development practice, and you try to write a code with semantic tags when typing. Keep coding and have new year!

1개의 답글
comment-user-thumbnail
2022년 6월 23일

뼝아리 개발자입니다 정말 대단하세요... 존경합니다!

답글 달기