├── .gitignore ├── README.md ├── craco.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.js ├── components │ ├── Divider.js │ ├── FeedItem.js │ ├── FeedList.js │ ├── SideLink.js │ ├── TweetBox.js │ └── UserBox.js ├── firebase.js ├── icons │ └── Icon.js ├── images │ └── twitter.svg ├── index.css ├── index.js ├── layout │ ├── Container.js │ ├── Content.js │ ├── Sidebar.js │ └── Widgets.js └── reportWebVitals.js └── tailwind.config.js /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Twitter Clone App For Youtube 2 | 3 | Youtube Tutorial Series For This Clone [Twitter Clone](https://youtube.com/playlist?list=PLDq0IUpYONvTVIah8Ji48ZmAei5rSgPYJ). 4 | 5 | ## Installation 6 | 7 | ```bash 8 | git clone https://github.comcodingwithdidem/twitter-clone-app.git 9 | cd twitter-clone-app 10 | npm install 11 | npm start 12 | ``` 13 | 14 | **You need to create your own firestore database. Simply change `firebase.js` file with your own firebase config data.** 15 | 16 | ## Tech 17 | 18 | - ReactJS 19 | - Tailwindcss 20 | - Firebase Firestore 21 | -------------------------------------------------------------------------------- /craco.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | style: { 3 | postcss: { 4 | plugins: [require("tailwindcss"), require("autoprefixer")], 5 | }, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "twitter-clone", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@craco/craco": "^6.1.2", 7 | "@testing-library/jest-dom": "^5.12.0", 8 | "@testing-library/react": "^11.2.6", 9 | "@testing-library/user-event": "^12.8.3", 10 | "firebase": "^8.4.3", 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-scripts": "4.0.3", 14 | "react-twitter-widgets": "^1.10.0", 15 | "web-vitals": "^1.1.1" 16 | }, 17 | "scripts": { 18 | "start": "craco start", 19 | "build": "craco build", 20 | "test": "craco test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "autoprefixer": "^9.8.6", 43 | "postcss": "^7.0.35", 44 | "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.2" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingwithdidem/twitter-clone-app/29ee2f241c5330b7da79345332d1493288a72f8c/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingwithdidem/twitter-clone-app/29ee2f241c5330b7da79345332d1493288a72f8c/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingwithdidem/twitter-clone-app/29ee2f241c5330b7da79345332d1493288a72f8c/public/logo512.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Container from "./layout/Container"; 3 | import Sidebar from "./layout/Sidebar"; 4 | import Content from "./layout/Content"; 5 | import Widgets from "./layout/Widgets"; 6 | 7 | const App = () => { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | }; 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /src/components/Divider.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Divider = () => { 4 | return ( 5 |
6 | ); 7 | }; 8 | 9 | export default Divider; 10 | -------------------------------------------------------------------------------- /src/components/FeedItem.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { LikeIcon, ReplyIcon, ReTweetIcon, ShareIcon } from "../icons/Icon"; 3 | 4 | const FeedItem = ({ 5 | avatar, 6 | content, 7 | displayName, 8 | image, 9 | timestamp, 10 | username, 11 | }) => { 12 | return ( 13 |
14 | Profile 15 |
16 |
17 |

{displayName}

18 | {username} 19 |
20 | 21 | {timestamp?.toDate().toLocaleTimeString("tr-TR")} 22 | 23 |
24 |

{content}

25 | {image && } 26 |
    27 |
  • 28 |
    29 | 30 |
    31 | 7 32 |
    • 33 | 34 |
  • 35 |
    36 | 37 |
    38 | 7 39 |
    • 40 | 41 |
  • 42 |
    43 | 44 |
    45 | 7 46 |
    • 47 | 48 |
  • 49 |
    50 | 51 |
    52 |
    • 53 |
54 |
55 |
56 | ); 57 | }; 58 | 59 | export default FeedItem; 60 | -------------------------------------------------------------------------------- /src/components/FeedList.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import FeedItem from "./FeedItem"; 3 | 4 | const FeedList = ({ tweets }) => { 5 | return ( 6 |
7 | {tweets.map((tweet, index) => ( 8 | 9 | ))} 10 |
11 | ); 12 | }; 13 | 14 | export default FeedList; 15 | -------------------------------------------------------------------------------- /src/components/SideLink.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const SideLink = ({ name, Icon, active, onMenuItemClick }) => { 4 | const isActive = active === name; 5 | return ( 6 |
  • onMenuItemClick(name)}> 7 | 11 |
    12 |
    18 | 19 | {name} 20 |
    21 |
    22 |     23 |
    • 24 | ); 25 | }; 26 | 27 | export default SideLink; 28 | -------------------------------------------------------------------------------- /src/components/TweetBox.js: -------------------------------------------------------------------------------- 1 | import firebase from "firebase"; 2 | import React, { useState } from "react"; 3 | import db from "../firebase"; 4 | import { 5 | EmojiIcon, 6 | GIFIcon, 7 | ImageIcon, 8 | PollIcon, 9 | ScheduleIcon, 10 | } from "../icons/Icon"; 11 | 12 | const TweetBox = () => { 13 | const [content, setContent] = useState(""); 14 | 15 | const sendTweet = () => { 16 | if (content !== "") { 17 | db.collection("feed").add({ 18 | displayName: "Didem Küçükkaraaslan", 19 | username: "@DidemKkkaraasl1", 20 | content, 21 | timestamp: firebase.firestore.FieldValue.serverTimestamp(), 22 | image: 23 | "https://64.media.tumblr.com/c9f8bdfb7ae61c3eb8a00e6ac5ca11a4/07dd3f9d137818fd-4f/s540x810/d83025e503bc5955cb004606132a99794b0cfab5.gif", 24 | avatar: 25 | "https://pbs.twimg.com/profile_images/1373343596150132738/j8K08iHu_400x400.jpg", 26 | }); 27 | 28 | setContent(""); 29 | } 30 | }; 31 | 32 | return ( 33 |
    34 |