├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── _redirects ├── index.html ├── logo.png ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── screenshots ├── edit_profile.png ├── explore.png ├── home.png ├── new_tweet.png ├── profile.png └── tweet.png └── src ├── App.js ├── Route.js ├── apollo └── client.js ├── components ├── Auth │ ├── Auth.js │ ├── Login.js │ ├── Logout.js │ └── Signup.js ├── ChangeColor.js ├── Comment │ ├── AddComment.js │ ├── Comment.js │ └── DeleteComment.js ├── CustomResponse.js ├── FeedList.js ├── Header.js ├── Icons.js ├── Input.js ├── Loader.js ├── MorePopup.js ├── Profile │ ├── EditProfile.js │ ├── EditProfileForm.js │ ├── Follow.js │ ├── Profile.js │ └── ProfileInfo.js ├── Search │ ├── NoSearchResult.js │ ├── SearchInput.js │ ├── SearchResult.js │ ├── SearchResultTags.js │ ├── SearchResultTweets.js │ └── SearchResultUsers.js ├── ToggleTheme.js ├── Tweet │ ├── DeleteTweet.js │ ├── LikeTweet.js │ ├── MasterTweet.js │ ├── NewTweet.js │ ├── Retweet.js │ └── Tweet.js ├── WhoToFollow.js └── layout │ └── Nav.js ├── context └── ThemeContext.js ├── hooks └── useInput.js ├── index.js ├── pages ├── Bookmarks.js ├── Explore.js ├── Home.js ├── Notifications.js └── Suggestion.js ├── queries ├── auth │ └── index.js ├── client │ └── index.js ├── comment │ └── index.js ├── follow │ └── index.js ├── others │ └── index.js ├── profile │ └── index.js ├── search │ └── index.js └── tweet │ └── index.js ├── styles ├── Avatar.js ├── Button.js ├── CoverPhoto.js ├── Form.js ├── GlobalStyle.js ├── Layout.js ├── Svg.js ├── TweetFile.js └── themes.js └── utils └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .env 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Twitter Clone Frontend 2 | 3 | **NOTE: As of 10-06-2022 19:24 IST, I am archiving this repository. It was fun while it lasted.** 4 | 5 | Twitter clone frontend built with React and Apollo Client 6 | 7 | If you are looking for the backend repo, [click here](https://github.com/manikandanraji/twitter-clone-backend). 8 | 9 | ## Core Packages 10 | 11 | 1. apollo-client - state management, executing graphql queries and mutations, caching results 12 | 2. styled-components - styling 13 | 3. react-router - routing 14 | 4. react-toastify - toast notifications 15 | 16 | ## Features 17 | 18 | - Login / Signup 19 | - New Tweet 20 | - Like 21 | - Retweet 22 | - Comment 23 | - View Profile 24 | - Edit Profile 25 | - Search by users, tags, people 26 | - Dark theme / Light theme 27 | 28 | ## How to setup locally 29 | 30 | - Create a .env file at the root directory 31 | - Make sure you have these variables setup 32 | 33 | ```js 34 | REACT_APP_DEV= 35 | REACT_APP_PROD= 36 | REACT_APP_CLOUDINARY_URL=https://api.cloudinary.com/v1_1//image/upload 37 | ``` 38 | 39 | - Then run npm install && npm start to see the twitter clone in action. 40 | 41 | ## UI 42 | 43 | ## Home 44 | ![Home](screenshots/home.png) 45 | 46 | ## Explore 47 | ![Explore](screenshots/explore.png) 48 | 49 | ## Profile 50 | ![Profile](screenshots/profile.png) 51 | 52 | ## Edit Profile 53 | ![Edit Profile](screenshots/edit_profile.png) 54 | 55 | ## New Tweet 56 | ![New Tweet](screenshots/new_tweet.png) 57 | 58 | ## Tweet 59 | ![Tweet](screenshots/tweet.png) 60 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "twitter-frontend", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@apollo/react-hooks": "^3.1.5", 7 | "@testing-library/jest-dom": "^4.2.4", 8 | "@testing-library/react": "^9.3.2", 9 | "@testing-library/user-event": "^7.1.2", 10 | "apollo-boost": "^0.4.7", 11 | "axios": "^0.19.2", 12 | "graphql": "^15.0.0", 13 | "husky": "^4.2.5", 14 | "moment": "^2.24.0", 15 | "pretty-quick": "^2.0.1", 16 | "react": "^16.13.1", 17 | "react-dom": "^16.13.1", 18 | "react-router-dom": "^5.1.2", 19 | "react-scripts": "3.4.1", 20 | "react-textarea-autosize": "^7.1.2", 21 | "react-toastify": "^5.5.0", 22 | "reactjs-popup": "^1.5.0", 23 | "styled-components": "^5.1.0" 24 | }, 25 | "scripts": { 26 | "start": "react-scripts start", 27 | "build": "react-scripts build", 28 | "test": "react-scripts test", 29 | "eject": "react-scripts eject" 30 | }, 31 | "eslintConfig": { 32 | "extends": "react-app" 33 | }, 34 | "browserslist": { 35 | "production": [ 36 | ">0.2%", 37 | "not dead", 38 | "not op_mini all" 39 | ], 40 | "development": [ 41 | "last 1 chrome version", 42 | "last 1 firefox version", 43 | "last 1 safari version" 44 | ] 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | * /index.html 200 2 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 18 | Twitter Clone 19 | 20 | 21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manikandanraji/twitter-clone-frontend/4132cd6069836c84adc82f9708b30c0cc45783c3/public/logo.png -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manikandanraji/twitter-clone-frontend/4132cd6069836c84adc82f9708b30c0cc45783c3/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manikandanraji/twitter-clone-frontend/4132cd6069836c84adc82f9708b30c0cc45783c3/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Twitter clone", 3 | "name": "Twitter clone built with Reactjs, Prisma, Graphql", 4 | "icons": [ 5 | { 6 | "src": "logo.png", 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 | -------------------------------------------------------------------------------- /screenshots/edit_profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manikandanraji/twitter-clone-frontend/4132cd6069836c84adc82f9708b30c0cc45783c3/screenshots/edit_profile.png -------------------------------------------------------------------------------- /screenshots/explore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manikandanraji/twitter-clone-frontend/4132cd6069836c84adc82f9708b30c0cc45783c3/screenshots/explore.png -------------------------------------------------------------------------------- /screenshots/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manikandanraji/twitter-clone-frontend/4132cd6069836c84adc82f9708b30c0cc45783c3/screenshots/home.png -------------------------------------------------------------------------------- /screenshots/new_tweet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manikandanraji/twitter-clone-frontend/4132cd6069836c84adc82f9708b30c0cc45783c3/screenshots/new_tweet.png -------------------------------------------------------------------------------- /screenshots/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manikandanraji/twitter-clone-frontend/4132cd6069836c84adc82f9708b30c0cc45783c3/screenshots/profile.png -------------------------------------------------------------------------------- /screenshots/tweet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manikandanraji/twitter-clone-frontend/4132cd6069836c84adc82f9708b30c0cc45783c3/screenshots/tweet.png -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import { useQuery } from "@apollo/react-hooks"; 3 | import { ToastContainer } from "react-toastify"; 4 | import "react-toastify/dist/ReactToastify.css"; 5 | import { ThemeProvider as StyledThemeProvider } from "styled-components"; 6 | import GlobalStyle from "./styles/GlobalStyle"; 7 | import { ThemeContext } from "./context/ThemeContext"; 8 | import Router from "./Route"; 9 | import Auth from "./components/Auth/Auth"; 10 | import { USER_LOGGED_IN } from "./queries/client"; 11 | 12 | const App = () => { 13 | const { theme } = useContext(ThemeContext); 14 | 15 | const { 16 | data: { isLoggedIn }, 17 | } = useQuery(USER_LOGGED_IN); 18 | 19 | return ( 20 | 21 | 22 | 28 | {isLoggedIn ? : } 29 | 30 | ); 31 | }; 32 | 33 | export default App; 34 | -------------------------------------------------------------------------------- /src/Route.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | BrowserRouter as Router, 4 | Switch, 5 | Route, 6 | Redirect, 7 | } from "react-router-dom"; 8 | import Layout from "./styles/Layout"; 9 | 10 | import Nav from "./components/layout/Nav"; 11 | import Home from "./pages/Home"; 12 | import MasterTweet from "./components/Tweet/MasterTweet"; 13 | import Profile from "./components/Profile/Profile"; 14 | import Bookmarks from "./pages/Bookmarks"; 15 | import Notifications from "./pages/Notifications"; 16 | import Explore from "./pages/Explore"; 17 | import Suggestion from "./pages/Suggestion"; 18 | import EditProfile from "./components/Profile/EditProfile"; 19 | 20 | const AppRouter = () => { 21 | return ( 22 | 23 |