├── src
    ├── Widgets.css
    ├── StoryReel.css
    ├── Sidebar.css
    ├── App.css
    ├── Feed.css
    ├── StateProvider.js
    ├── SidebarRow.css
    ├── SidebarRow.js
    ├── Story.js
    ├── reportWebVitals.js
    ├── index.css
    ├── reducer.js
    ├── Login.css
    ├── Story.css
    ├── Widgets.js
    ├── firebase.js
    ├── index.js
    ├── App.js
    ├── Feed.js
    ├── Post.css
    ├── Login.js
    ├── MessageSender.css
    ├── Sidebar.js
    ├── Header.css
    ├── Post.js
    ├── StoryReel.js
    ├── MessageSender.js
    └── Header.js
├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── .firebaserc
├── firebase.json
├── .gitignore
├── README.md
├── package.json
└── .firebase
    └── hosting.YnVpbGQ.cache


/src/Widgets.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/StoryReel.css:
--------------------------------------------------------------------------------
1 | .storyReel {
2 |     display: flex;
3 | }
4 | 
5 | 


--------------------------------------------------------------------------------
/src/Sidebar.css:
--------------------------------------------------------------------------------
1 | .sidebar {
2 |     padding: 25px 10px;
3 |     flex: 0.33;
4 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MertCankaya/Facebook-Clone/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MertCankaya/Facebook-Clone/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MertCankaya/Facebook-Clone/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "facebook-clone-project-17520"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .app {
2 |     background-color: #f1f2f5;
3 | }
4 | 
5 | .app__body {
6 |     display: flex;
7 | }


--------------------------------------------------------------------------------
/src/Feed.css:
--------------------------------------------------------------------------------
1 | .feed {
2 |     flex: 1;
3 |     display: flex;
4 |     padding: 30px 150px;
5 |     flex-direction: column;
6 |     justify-content: center;
7 |     align-items: center;
8 | }


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "hosting": {
 3 |     "public": "build",
 4 |     "ignore": [
 5 |       "firebase.json",
 6 |       "**/.*",
 7 |       "**/node_modules/**"
 8 |     ],
 9 |     "rewrites": [
10 |       {
11 |         "source": "**",
12 |         "destination": "/index.html"
13 |       }
14 |     ]
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/StateProvider.js:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useContext, useReducer } from "react"
 2 | 
 3 | export const StateContext = createContext()
 4 | 
 5 | export const StateProvider = ({ reducer, initialState, children }) => (
 6 |     <StateContext.Provider value={useReducer(reducer, initialState)} >
 7 |         {children}
 8 |     </StateContext.Provider>
 9 | )
10 | 
11 | export const useStateValue =()=> useContext(StateContext)
12 | 


--------------------------------------------------------------------------------
/src/SidebarRow.css:
--------------------------------------------------------------------------------
 1 | .sidebarRow {
 2 |     display: flex;
 3 |     align-items: center;
 4 |     padding: 10px;
 5 |     cursor: pointer;
 6 | }
 7 | 
 8 | .sidebarRow:hover {
 9 |     background-color: lightgray;
10 |     border-radius: 10px;
11 | }
12 | 
13 | .sidebarRow > h4 {
14 |     margin-left: 20px;
15 |     font-weight: 600;
16 | }
17 | 
18 | .sidebarRow > .MuiSvgIcon-root {
19 |     font-size: xx-large;
20 |     color: #2e81f4;
21 | }


--------------------------------------------------------------------------------
/src/SidebarRow.js:
--------------------------------------------------------------------------------
 1 | import { Avatar } from '@material-ui/core'
 2 | import React from 'react'
 3 | import "./SidebarRow.css"
 4 | 
 5 | function SidebarRow({src, Icon, title}) {
 6 |     return (
 7 |         <div className="sidebarRow">
 8 |             {src && <Avatar src={src} />}
 9 |             {Icon && <Icon />}
10 | 
11 | 
12 |             <h4>{title}</h4>
13 |         </div>
14 |     )
15 | }
16 | 
17 | export default SidebarRow
18 | 


--------------------------------------------------------------------------------
/src/Story.js:
--------------------------------------------------------------------------------
 1 | import { Avatar } from '@material-ui/core'
 2 | import React from 'react'
 3 | import "./Story.css"
 4 | 
 5 | function Story({ image, profileSrc, title }) {
 6 |     return (
 7 |         <div style={{backgroundImage: `url(${image})`}} className="story">
 8 |             <Avatar className="story__avatar" src={profileSrc} />
 9 |             <h4>{title}</h4>
10 |         </div>
11 |     )
12 | }
13 | 
14 | export default Story
15 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 | }
 4 | 
 5 | body {
 6 |   margin: 0;
 7 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 8 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 9 |     sans-serif;
10 |   -webkit-font-smoothing: antialiased;
11 |   -moz-osx-font-smoothing: grayscale;
12 | }
13 | 
14 | code {
15 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
16 |     monospace;
17 | }
18 | 


--------------------------------------------------------------------------------
/src/reducer.js:
--------------------------------------------------------------------------------
 1 | export const initialState = {
 2 |     user: null,
 3 | }
 4 | 
 5 | export const actionTypes = {
 6 |     SET_USER: "SET_USER"
 7 | }
 8 | 
 9 | const reducer = (state, action) => {
10 |     switch (action.type) {
11 |         case actionTypes.SET_USER:
12 |             return {
13 |                 ...state,
14 |                 user: action.user,
15 |             }
16 |     
17 |         default:
18 |             return state
19 |     }
20 | }
21 | 
22 | export default reducer;


--------------------------------------------------------------------------------
/src/Login.css:
--------------------------------------------------------------------------------
 1 | .login {
 2 |     display: grid;
 3 |     place-items: center;
 4 |     height: 100vh;
 5 | }
 6 | 
 7 | .login > button {
 8 |     width: 300px;
 9 |     background-color: #2e81f4;
10 |     color: #eff2f5;
11 |     font-weight: 800;
12 | }
13 | 
14 | .login > button:hover {
15 |     background-color: white;
16 |     color: #2e81f4;
17 | }
18 | 
19 | .login > div > img {
20 |     object-fit: contain;
21 |     height: 150px;
22 | }
23 | 
24 | .login > div {
25 |     display: flex;
26 |     flex-direction: column;
27 | }
28 | 
29 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Facebook Clone with ReactJS
 2 | A Facebook Clone application that you can sign in with your Google Account and send realtime posts.
 3 | 
 4 | ## Facebook Clone Demo Link
 5 | <a href="https://facebook-clone-8ea07.web.app/">click me</a> for demo.
 6 | 
 7 | 
 8 | ## Topics
 9 | + Context API(Redux Pattern)
10 | + Material UI
11 | + React Hooks
12 | + Flexbox
13 | + Firebase's Firestore realtime DB
14 | + Firebase Google Authentication
15 | + React Flip Move
16 | + Responsive Design 
17 | + Deploy the App LIVE on Firebase
18 | 
19 | ## Author
20 | Mert Çankaya
21 | 
22 | 
23 | 
24 | 
25 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/Story.css:
--------------------------------------------------------------------------------
 1 | .story {
 2 |     position: relative;
 3 |     background-position: center center;
 4 |     background-size: cover;
 5 |     background-repeat: no-repeat;
 6 |     width: 120px;
 7 |     height: 200px;
 8 |     box-shadow: 0px 5px 17px -7px rgba(0, 0, 0, 0.75);
 9 |     border-radius: 10px;
10 |     margin-right: 10px;
11 |     transition: tranform 100ms ease-in;
12 |     cursor: pointer;
13 | }
14 | 
15 | .story:hover {
16 |     transform: scale(1.07);
17 | }
18 | 
19 | .story__avatar {
20 |     margin: 10px;
21 |     border: 5px solid #2e81f4;
22 | }
23 | 
24 | .story > h4 {
25 |     position: absolute;
26 |     bottom: 20px;
27 |     left: 20px;
28 |     color: white;
29 | }


--------------------------------------------------------------------------------
/src/Widgets.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import "./Widgets.css"
 3 | 
 4 | function Widgets() {
 5 |     return (
 6 |         <div className="widgets">
 7 |            <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fbarackobama&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="100%" style={{border: "none", overflow: "hidden"}} scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Widgets
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/src/firebase.js:
--------------------------------------------------------------------------------
 1 | import firebase from "firebase"
 2 | 
 3 | const firebaseConfig = {
 4 |     apiKey: "AIzaSyAOXzUdrmx84VUHYgKWkhLZzXE8LT3dXl0",
 5 |     authDomain: "facebook-clone-project-17520.firebaseapp.com",
 6 |     projectId: "facebook-clone-project-17520",
 7 |     storageBucket: "facebook-clone-project-17520.appspot.com",
 8 |     messagingSenderId: "422931550720",
 9 |     appId: "1:422931550720:web:106a91f4e3c1c4441efee5",
10 |     measurementId: "G-RMKG0BEWFS"
11 | };
12 |   
13 | const firebaseApp = firebase.initializeApp(firebaseConfig)
14 | const db = firebaseApp.firestore();
15 | const auth = firebase.auth();
16 | const provider = new firebase.auth.GoogleAuthProvider();
17 | 
18 | export { auth, provider };
19 | export default db;
20 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | import { StateProvider } from './StateProvider';
 7 | import reducer, { initialState } from './reducer';
 8 | 
 9 | ReactDOM.render(
10 |   <React.StrictMode>
11 |     <StateProvider initialState={initialState} reducer={reducer}>
12 |       <App />
13 |     </StateProvider>
14 |   </React.StrictMode>,
15 |   document.getElementById('root')
16 | );
17 | 
18 | // If you want to start measuring performance in your app, pass a function
19 | // to log results (for example: reportWebVitals(console.log))
20 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
21 | reportWebVitals();
22 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import './App.css';
 3 | import Feed from "./Feed";
 4 | import Header from "./Header";
 5 | import Sidebar from "./Sidebar";
 6 | import Widgets from "./Widgets"
 7 | import Login from "./Login"
 8 | import { useStateValue } from "./StateProvider";
 9 | 
10 | function App() {
11 | 
12 |   const [{ user }, dispatch] = useStateValue();
13 |   return (
14 |     <div className="app">
15 |       {!user ? (
16 |         <Login />
17 |       ) : (
18 |         <>
19 |           <Header />
20 |           <div className="app__body">
21 |             <Sidebar />
22 |             <Feed />
23 |             <Widgets />
24 | 
25 |           </div>
26 |         </>
27 |       )}
28 | 
29 | 
30 | 
31 | 
32 |     </div>
33 |   );
34 | }
35 | 
36 | export default App;
37 | 


--------------------------------------------------------------------------------
/src/Feed.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react'
 2 | import "./Feed.css"
 3 | import MessageSender from './MessageSender'
 4 | import StoryReel from './StoryReel'
 5 | import Post from "./Post"
 6 | import db from "./firebase"
 7 | 
 8 | function Feed() {
 9 |     const [posts, setPosts] = useState([]);
10 | 
11 |     useEffect(() => {
12 |         db.collection("posts").orderBy("timestamp","desc").onSnapshot(snapshot => (
13 |            setPosts(snapshot.docs.map(doc=>({id: doc.id, data: doc.data()})))
14 |        )) 
15 |     }, [])
16 | 
17 |     return (
18 |         <div className="feed">
19 |             <StoryReel />
20 |             <MessageSender />
21 | 
22 |             {posts.map((post) => (
23 |                 <Post
24 |                     key={post.data.id}
25 |                     profilePic={post.data.profilePic}
26 |                     message={post.data.message}
27 |                     timestamp={post.data.timestamp}
28 |                     username={post.data.username}
29 |                     image={post.data.image}
30 |                 />
31 |             ))}
32 | 
33 |         </div>
34 |     )
35 | }
36 | 
37 | export default Feed
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "facebook-clone",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@material-ui/core": "^4.11.4",
 7 |     "@material-ui/icons": "^4.11.2",
 8 |     "@testing-library/jest-dom": "^5.14.1",
 9 |     "@testing-library/react": "^11.2.7",
10 |     "@testing-library/user-event": "^12.8.3",
11 |     "firebase": "^8.7.0",
12 |     "firebase-tools": "^9.16.0",
13 |     "firestore": "^1.1.6",
14 |     "react": "^17.0.2",
15 |     "react-dom": "^17.0.2",
16 |     "react-scripts": "4.0.3",
17 |     "web-vitals": "^1.1.2"
18 |   },
19 |   "scripts": {
20 |     "start": "react-scripts start",
21 |     "build": "react-scripts build",
22 |     "test": "react-scripts test",
23 |     "eject": "react-scripts eject"
24 |   },
25 |   "eslintConfig": {
26 |     "extends": [
27 |       "react-app",
28 |       "react-app/jest"
29 |     ]
30 |   },
31 |   "browserslist": {
32 |     "production": [
33 |       ">0.2%",
34 |       "not dead",
35 |       "not op_mini all"
36 |     ],
37 |     "development": [
38 |       "last 1 chrome version",
39 |       "last 1 firefox version",
40 |       "last 1 safari version"
41 |     ]
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/Post.css:
--------------------------------------------------------------------------------
 1 | .post {
 2 |     width: 100%;
 3 |     margin-top: 15px;
 4 |     border-radius: 15px;
 5 |     background-color: white;
 6 |     box-shadow: 0px 5px 7px -7px rgba(0, 0, 0, 0.75);
 7 | }
 8 | 
 9 | .post__top {
10 |     display: flex;
11 |     position: relative;
12 |     align-items: center;
13 |     padding: 15px;
14 | }
15 | 
16 | .post__avatar {
17 |     margin-right: 10px;
18 | }
19 | 
20 | .post__topInfo > h3 {
21 |     font-size: medium;
22 | }
23 | 
24 | .post__topInfo > p {
25 |     font-size: small;
26 |     color: gray;
27 | }
28 | 
29 | .post__bottom {
30 |     margin-top: 10px;
31 |     margin-bottom: 10px;
32 |     padding: 15px 25px;
33 | }
34 | 
35 | .post__image > img {
36 |     width: 100%;
37 | }
38 | 
39 | .post__options {
40 |     padding-top: 10px;
41 |     border-top: 1px solid lightgray;
42 |     display: flex;
43 |     justify-content: space-evenly;
44 |     font-size: medium;
45 |     color: gray;
46 |     cursor: pointer;
47 |     padding: 15px;
48 | }
49 | 
50 | .post__option {
51 |     display: flex;
52 |     align-items: center;
53 |     justify-content: center;
54 |     padding: 5px;
55 |     flex: 1;
56 | }
57 | 
58 | .post__option > p {
59 |     margin-left: 10px;
60 | }
61 | 
62 | .post__option:hover {
63 |     background-color: #eff2f5;
64 |     border-radius: 10px;
65 | }


--------------------------------------------------------------------------------
/src/Login.js:
--------------------------------------------------------------------------------
 1 | import { Button } from '@material-ui/core'
 2 | import React from 'react'
 3 | import "./Login.css"
 4 | import { auth, provider } from "./firebase"
 5 | import { useStateValue } from './StateProvider'
 6 | import { actionTypes } from './reducer'
 7 | 
 8 | function Login() {
 9 |     const [state, dispatch] = useStateValue()
10 | 
11 | 
12 |     const signIn = () => {
13 |         auth.signInWithPopup(provider).then((result) => {
14 | 
15 |             dispatch({
16 |                 type: actionTypes.SET_USER,
17 |                 user: result.user
18 |             })
19 |             console.log(result);
20 |         })
21 |             .catch((error) => alert(error.message))
22 |     }
23 |     return (
24 |         <div className="login">
25 |             <div className="login__logo">
26 |                 <img src="https://1.bp.blogspot.com/-S8HTBQqmfcs/XN0ACIRD9PI/AAAAAAAAAlo/FLhccuLdMfIFLhocRjWqsr9cVGdTN_8sgCPcBGAYYCw/s1600/f_logo_RGB-Blue_1024.png" alt="" />
27 | 
28 |                 <img
29 | 
30 |                     src="https://marka-logo.com/wp-content/uploads/2020/04/Facebook-Logo.png" alt="" />
31 |             </div>
32 |             <Button type="submit" onClick={signIn}>
33 |                 Sign In
34 |             </Button>
35 |         </div>
36 |     )
37 | }
38 | 
39 | export default Login
40 | 


--------------------------------------------------------------------------------
/src/MessageSender.css:
--------------------------------------------------------------------------------
 1 | .messageSender {
 2 |     display: flex;
 3 |     margin-top: 30px;
 4 |     flex-direction: column;
 5 |     background-color: white;
 6 |     border-radius: 15px;
 7 |     box-shadow: 0px 5px 7px -7px rgba(0, 0, 0, 0.75);
 8 |     width: 100%;
 9 | }
10 | 
11 | .messageSender__top {
12 |     display: flex;
13 |     border-bottom: 1px solid #eff2f5;
14 |     padding: 15px;
15 | }
16 | 
17 | .messageSender__top > form {
18 |     flex: 1;
19 |     display: flex;
20 | }
21 | 
22 | .messageSender__top > form > input {
23 |     outline-width: 0;
24 |     border: none;
25 |     padding: 5px 20px;
26 |     margin: 0 10px;
27 |     border-radius: 999px;
28 |     background-color: #eff2f5;
29 | }
30 | 
31 | .messageSender__top > form > button {
32 |     display: none;
33 | }
34 | 
35 | .messageSender__input{
36 |     flex: 1;
37 | }
38 | 
39 | .messageSender__bottom {
40 |     display: flex;
41 |     justify-content: space-evenly;
42 | }
43 | 
44 | .messageSender__option {
45 |     padding: 10px;
46 |     display: flex;
47 |     align-items: center;
48 |     color: gray;
49 |     margin: 7px;
50 | }
51 | 
52 | .messageSender__option > h3 {
53 |     font-size: medium;
54 |     margin-left: 10px;
55 |     cursor: pointer;
56 | }
57 | 
58 | .messageSender__option:hover {
59 |     background-color: #eff2f5;
60 |     border-radius: 20px;
61 |     
62 | }
63 | 
64 | 


--------------------------------------------------------------------------------
/src/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import { ExpandMoreOutlined } from '@material-ui/icons'
 2 | import React from 'react'
 3 | import  "./Sidebar.css"
 4 | import SidebarRow from './SidebarRow'
 5 | import LocalHospitalIcon from "@material-ui/icons/LocalHospital"
 6 | import EmojiFlagsIcon from "@material-ui/icons/EmojiFlags"
 7 | import PeopleIcon from "@material-ui/icons/People"
 8 | import ChatIcon from "@material-ui/icons/Chat"
 9 | import StorefrontIcon from "@material-ui/icons/Storefront"
10 | import VideoLibraryIcon from "@material-ui/icons/VideoLibrary"
11 | import { useStateValue } from './StateProvider'
12 | 
13 | function Sidebar() {
14 |     const [{ user }, dispatch] = useStateValue();
15 | 
16 |     return (
17 |         <div className="sidebar">
18 |             <SidebarRow src={user.photoURL} title={user.displayName} />
19 |             <SidebarRow Icon={LocalHospitalIcon} title="COVID-19 Information Center" />
20 | 
21 | 
22 |             <SidebarRow Icon={EmojiFlagsIcon} title="Pages" />
23 |             <SidebarRow Icon={PeopleIcon} title="Friends" />
24 |             <SidebarRow Icon={ChatIcon} title="Messenger" />
25 |             <SidebarRow Icon={StorefrontIcon} title="Marketplace" />
26 |             <SidebarRow Icon={VideoLibraryIcon} title="Videos" />
27 |             <SidebarRow Icon={ExpandMoreOutlined} title="MarketPlace" />
28 |            
29 |         </div>
30 |     )
31 | }
32 | 
33 | export default Sidebar
34 | 


--------------------------------------------------------------------------------
/src/Header.css:
--------------------------------------------------------------------------------
 1 | .header {
 2 |     display: flex;
 3 |     padding: 15px 20px;
 4 |     justify-content: space-between;
 5 |     position: sticky;
 6 |     background-color: white;
 7 |     z-index: 100;
 8 |     top: 0;
 9 |     box-shadow: 0px 5px 8px -9px rgba(0,0,0,0.75);
10 | }
11 | 
12 | .header__left {
13 |     display: flex;
14 |     justify-content: space-evenly;
15 | }
16 | 
17 | .header__input {
18 |     display: flex;
19 |     align-items: center;
20 |     background-color: #eff2f5;
21 |     padding: 10px;
22 |     margin-left: 10px;
23 |     border-radius: 999px;
24 | }
25 | 
26 | .header__left > img {
27 |     height: 40px;
28 | }
29 | 
30 | .header__input > input {
31 |     border: none;
32 |     background-color: transparent;
33 |     outline-width: 0;
34 | }
35 | 
36 | .header__center {
37 |     display: flex;
38 |     flex: 1;
39 |     justify-content: center;
40 | }
41 | 
42 | .header__option > .MuiSvgIcon-root {
43 |     color: gray;
44 | }
45 | 
46 | .header__option > .MuiSvgIcon-root:hover {
47 |     color: #2e81f4;
48 | }
49 | 
50 | .header__option {
51 |     display: flex;
52 |     align-items: center;
53 |     padding: 0 30px;
54 |     cursor: pointer;
55 | }
56 | 
57 | .header__option--active > .MuiSvgIcon-root {
58 |     color: #2e81f4;
59 | }
60 | 
61 | .header__option--active {
62 |     border-bottom: 4px solid #2e81f4;
63 | }
64 | 
65 | .header__option:hover {
66 |     background-color: #eff2f5;
67 |     border-radius: 10px;
68 |     align-items: center;
69 |     padding: 0 30px;
70 |     border-bottom: none;
71 | }
72 | 
73 | .header__info {
74 |     display: flex;
75 |     align-items: center;
76 | }
77 | 
78 | .header__info > h4 {
79 |     margin-left: 10px;
80 | }
81 | 
82 | .header__right {
83 |     display: flex;
84 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/Post.js:
--------------------------------------------------------------------------------
 1 | import { Avatar } from '@material-ui/core'
 2 | import React from 'react'
 3 | import "./Post.css"
 4 | import ThumbUpIcon from "@material-ui/icons/ThumbUp"
 5 | import ChatBubbleOutlineIcon from "@material-ui/icons/ChatBubbleOutline"
 6 | import AccountCircleIcon from "@material-ui/icons/AccountCircle"
 7 | import NearMeIcon from "@material-ui/icons/NearMe"
 8 | import {ExpandMoreOutlined} from "@material-ui/icons"
 9 | 
10 | function Post({ profilePic, image, username, timestamp, message }) {
11 |     return (
12 |         <div className="post">
13 |             <div className="post__top">
14 |                 <Avatar src={profilePic}
15 |                     className="post__avatar" />
16 |                 <div className="post__topInfo">
17 |                     <h3>{username}</h3>
18 |                     <p>{new Date(timestamp?.toDate()).toUTCString()}</p>
19 |                 </div>
20 |             </div>
21 | 
22 |             <div className="post__bottom">
23 |                 <p>{message}</p>
24 |             </div>
25 | 
26 |             <div className="post__image">
27 |                 <img src={image} alt="" />
28 |             </div>
29 | 
30 |             <div className="post__options">
31 |                 <div className="post__option">
32 |                     <ThumbUpIcon />
33 |                     <p>Like</p>
34 |                 </div>
35 |                 <div className="post__option">
36 |                     <ChatBubbleOutlineIcon />
37 |                     <p>Comment</p>
38 |                 </div>
39 |                 <div className="post__option">
40 |                     <NearMeIcon />
41 |                     <p>Share</p>
42 |                 </div>
43 |                 <div className="post__option">
44 |                     <AccountCircleIcon />
45 |                     <ExpandMoreOutlined />
46 |                 </div>
47 |             </div>
48 |         </div>
49 |     )
50 | }
51 | 
52 | export default Post
53 | 


--------------------------------------------------------------------------------
/.firebase/hosting.YnVpbGQ.cache:
--------------------------------------------------------------------------------
 1 | asset-manifest.json,1627761056521,8d676f886ec881a2eae0d96b8905f686904508b8d2b16db2fb4bc3610236b68e
 2 | favicon.ico,499162500000,eae62e993eb980ec8a25058c39d5a51feab118bd2100c4deebb2a9c158ec11f9
 3 | index.html,1627761056521,45a6c55913be15f8f382faca474a950ae721c0b46f5b8a6bcb8e9deaccf29cc0
 4 | logo192.png,499162500000,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b
 5 | robots.txt,499162500000,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
 6 | manifest.json,499162500000,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
 7 | static/js/2.1e2cc3c5.chunk.js.LICENSE.txt,1627761056551,2312bad32d362f6d6cf48f54219077fc34f54dcb7eeae10b1a74b95e3a2f5917
 8 | logo512.png,499162500000,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
 9 | static/css/main.c6570f92.chunk.css,1627761056522,b77f17e807774ab72014e9491ad3dfe0f2fa66201897faad3db0ce88b52cf663
10 | static/css/main.c6570f92.chunk.css.map,1627761056551,c9931b7285a8e464454d9dd889115ae63cf9f66a42a114dd7d6999c54ef13d75
11 | static/js/3.4e540202.chunk.js,1627761056551,3c7cdfbd9d36eea77c909192cade133c6522df6ab477733a8fbb8a84db4e7e2c
12 | static/js/main.73b27200.chunk.js,1627761056550,9f1e14ab7ef7c4a23b0671fdc58372aae16ad8cf2c25c1005e97ba91fa96ee99
13 | static/js/runtime-main.a53d5e1e.js,1627761056526,7b6dd01bac2f3df7e30423cc40fa0acdf8b8ca18923b31e0d7ebd7e0dfdf9470
14 | static/js/3.4e540202.chunk.js.map,1627761056551,051f821a431fde7032c064ab44686410b39c8140bbd149c7398c02495393422d
15 | static/js/main.73b27200.chunk.js.map,1627761056551,cf4de89442091ddfe9d5562b7bc71b0c26ba6669e666b0de1a00db7bf8e3b057
16 | static/js/runtime-main.a53d5e1e.js.map,1627761056551,f0599b235a0ac0ad797b6d6750154d5a92c0dff61f4a80063642b2bd21e60876
17 | static/js/2.1e2cc3c5.chunk.js,1627761056551,d86c3d0c68a49acfe1517ae3482b6e676cebf2d36d9758b66f44b42b8719e2ed
18 | static/js/2.1e2cc3c5.chunk.js.map,1627761056553,64efd8b141162ee0065cd21c97ce2eb26331452debc9d75c59e60a45ec151bc3
19 | 


--------------------------------------------------------------------------------
/src/StoryReel.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Story from './Story'
 3 | import "./StoryReel.css"
 4 | 
 5 | function StoryReel() {
 6 |     return (
 7 |         <div className="storyReel">
 8 |             <Story
 9 |                 image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgUjmXY7ZXAWB4aQyhYN3BSoE7hUu7BZBQf6C7BY_wa1cvty2g7CIRwiU5ucq1vCr96rs&usqp=CAU"
10 |                 profileSrc="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVLyDTPxV7_cnqgrNYeuUb1ZonTokvHbr26A&usqp=CAU"
11 |                 title="Mark Zuckerberg"
12 |             />
13 |             <Story
14 |                 image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTih5QuE40NrDD0EM_kU27_4OEjxBTkUzPmt-L05lq8ygpDAazMP8I2mfHtghx2m220nU&usqp=CAU"
15 |                 profileSrc="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1o4sqho9DHBAp65M1Lycrph5c373AspuCRQ&usqp=CAU"
16 |                 title="Elon Musk"
17 |             />
18 |             <Story
19 |                 image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJSqnpUHu7EgRhoQ8TWZttuf1B9UCrHqI2O84BSbNEFidOCnPt29SuXu2iKGLbQ1L2gG4&usqp=CAU"
20 |                 profileSrc="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9pH76SROc6e0qYMF-_yNgUlsn7xALu5o49wZlsNduRGLlatNUYlBvjijeYnMb4-jefDw&usqp=CAU"
21 |                 title="Jeff Bezos"
22 |             />
23 |             <Story
24 |                 image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQuhV1LCwafrshljL-VzXO-UCHD1Y2zh3EtxocfC8KyFInKQtvBM7HU-92VifFok3opy1U&usqp=CAU"
25 |                 profileSrc="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRt1OsBQFDo6_bCAcs7x7HHpusET5Ztr2wlzBoSIIfPhitveJQL7EBsBL3BLSRMvRB8XFQ&usqp=CAU"
26 |                 title="Barack Obama"
27 |             />
28 |             <Story
29 |                 image="https://iso.500px.com/wp-content/uploads/2016/03/stock-photo-142984111.jpg"
30 |                 profileSrc="https://pbs.twimg.com/profile_images/988775660163252226/XpgonN0X_400x400.jpg"
31 |                 title="Bill Gates"
32 |             />
33 |         </div>
34 |     )
35 | }
36 | 
37 | export default StoryReel
38 | 


--------------------------------------------------------------------------------
/src/MessageSender.js:
--------------------------------------------------------------------------------
 1 | import { Avatar } from '@material-ui/core'
 2 | import React, { useState } from 'react'
 3 | import "./MessageSender.css"
 4 | import VideocamIcon from "@material-ui/icons/Videocam"
 5 | import PhotoLibraryIcon from "@material-ui/icons/PhotoLibrary"
 6 | import InsertEmoticonIcon from "@material-ui/icons/InsertEmoticon"
 7 | import { useStateValue } from './StateProvider'
 8 | import db from "./firebase"
 9 | import firebase from "firebase"
10 | 
11 | 
12 | 
13 | 
14 | function MessageSender() {
15 |     const [{ user }, dispatch] = useStateValue();
16 |     const [input, setInput] = useState("")
17 |     const [imageUrl, setImageUrl] = useState("")
18 | 
19 |     
20 | 
21 |     const handleSubmit = (e) => {
22 |         e.preventDefault();
23 | 
24 |         db.collection("posts").add({
25 |             message: input,
26 |             timestamp: firebase.firestore.FieldValue.serverTimestamp() ,
27 |             profilePic: user.photoURL,
28 |             username: user.displayName,
29 |             image: imageUrl,
30 |         })
31 | 
32 | 
33 | 
34 |         setInput("")
35 |         setImageUrl("")
36 |     }
37 | 
38 |     return (
39 |         <div className="messageSender">
40 |             <div className="messageSender__top">
41 |                 <Avatar src={user.photoURL} />
42 |                 <form >
43 |                     <input
44 |                         value={input}
45 |                         onChange={e => setInput(e.target.value)}
46 |                         className="messageSender__input"
47 |                         placeholder={`What's on your mind?, ${user.displayName}`} />
48 |                     <input
49 |                         value={imageUrl}
50 |                         onChange={e => setImageUrl(e.target.value)}
51 |                         placeholder="image URL (Optional)" />
52 |                     <button onClick={handleSubmit} type="submit" >Hidden submit</button>
53 |                 </form>
54 |             </div>
55 | 
56 |             <div className="messageSender__bottom">
57 |                 <div className="messageSender__option">
58 |                     <VideocamIcon style={{ color: "red" }} />
59 |                     <h3>Live Video</h3>
60 |                 </div>
61 | 
62 |                 <div className="messageSender__option">
63 |                     <PhotoLibraryIcon style={{ color: "green" }} />
64 |                     <h3>Photo/Video</h3>
65 |                 </div>
66 | 
67 |                 <div className="messageSender__option">
68 |                     <InsertEmoticonIcon style={{ color: "orange" }} />
69 |                     <h3>Feeling/Activity</h3>
70 |                 </div>
71 |             </div>
72 | 
73 | 
74 |         </div>
75 |     )
76 | }
77 | 
78 | export default MessageSender
79 | 


--------------------------------------------------------------------------------
/src/Header.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import "./Header.css"
 3 | import SearchIcon from "@material-ui/icons/Search"
 4 | import HomeIcon from "@material-ui/icons/Home"
 5 | import FlagIcon from "@material-ui/icons/Flag"
 6 | import SubscriptionsOutlinedIcon from "@material-ui/icons/SubscriptionsOutlined"
 7 | import StorefrontOutlinedIcon from "@material-ui/icons/StorefrontOutlined"
 8 | import SupervisedUserCircleIcon from "@material-ui/icons/SupervisedUserCircle"
 9 | import { Avatar, IconButton } from "@material-ui/core"
10 | import AddIcon from "@material-ui/icons/Add"
11 | import ForumIcon from "@material-ui/icons/Forum"
12 | import NotificationsActiveIcon from "@material-ui/icons/NotificationsActive"
13 | import ExpandMoreIcon from "@material-ui/icons/ExpandMore"
14 | import { useStateValue } from './StateProvider'
15 | 
16 | function Header() {
17 |     const [{ user }, dispatch] = useStateValue();
18 | 
19 |     return (
20 |         <div className="header">
21 |             <div className="header__left">
22 |                 <img src="https://1.bp.blogspot.com/-S8HTBQqmfcs/XN0ACIRD9PI/AAAAAAAAAlo/FLhccuLdMfIFLhocRjWqsr9cVGdTN_8sgCPcBGAYYCw/s1600/f_logo_RGB-Blue_1024.png" alt="" />
23 |                 <div className="header__input">
24 |                     <SearchIcon />
25 |                     <input placeholder="Search Facebook" type="text" />
26 |                 </div>
27 |             </div>
28 |             <div className="header__center">
29 |                 <div className="header__option header__option--active">
30 |                     <HomeIcon fontSize="large" />
31 |                 </div>
32 |                 <div className="header__option">
33 |                     <FlagIcon fontSize="large" />
34 |                 </div>
35 |                 <div className="header__option">
36 |                     <SubscriptionsOutlinedIcon fontSize="large" />
37 |                 </div>
38 |                 <div className="header__option">
39 |                     <StorefrontOutlinedIcon fontSize="large" />
40 |                 </div>
41 |                 <div className="header__option">
42 |                     <SupervisedUserCircleIcon fontSize="large" />
43 |                 </div>
44 |             </div>
45 |             <div className="header__right">
46 |                 <div className="header__info">
47 |                     <Avatar src={user.photoURL} />
48 |                     <h4>{user.displayName}</h4>
49 |                 </div>
50 | 
51 |                 <IconButton>
52 |                     <AddIcon />
53 |                 </IconButton>
54 |                 <IconButton>
55 |                     <ForumIcon />
56 |                 </IconButton>
57 |                 <IconButton>
58 |                     <NotificationsActiveIcon />
59 |                 </IconButton>
60 |                 <IconButton>
61 |                     <ExpandMoreIcon />
62 |                 </IconButton>
63 |             </div>
64 |         </div>
65 |     )
66 | }
67 | 
68 | export default Header
69 | 


--------------------------------------------------------------------------------