├── .gitignore
├── README.md
├── client
    ├── .gitignore
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── manifest.json
    │   └── robots.txt
    └── src
    │   ├── App.js
    │   ├── App.test.js
    │   ├── assets
    │       ├── logo.svg
    │       ├── tweetimg.gif
    │       └── verified.svg
    │   ├── components
    │       ├── BackgroundImg.js
    │       ├── Footer.js
    │       ├── ImageConfig.js
    │       ├── Navbar.js
    │       ├── TweetImage.js
    │       └── TweetInput.js
    │   ├── contexts
    │       ├── ConfigContext.js
    │       └── ImageContext.js
    │   ├── index.css
    │   └── index.js
├── index.js
├── package-lock.json
├── package.json
└── routes
    └── auth.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
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 | 
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tweet2Img
 2 | 
 3 | ### Convert your tweet into image 🐤→🖼️
 4 | 
 5 | ### visit here → [http://tweettoimg.herokuapp.com](http://tweettoimg.herokuapp.com)
 6 | 
 7 | <br />
 8 | 
 9 | ### Demo👇🏻
10 | 
11 | <img src="client/src/assets/tweetimg.gif" alt="tweet2img gif"  >
12 | 
13 | <br />
14 | <br />
15 | 
16 | ## ⚡ Features
17 | 
18 | -  🛠 create good post from your tweet in one click
19 | -  🌈 set background from your local files, links or directly from unsplash, and choose different colors
20 | -  🌓 set light and dark mode to your tweet
21 | -  ⚙️ change opacity and border radius of tweet
22 | -  💾 Download tweet image in `.png`
23 | 
24 | <br/>
25 | 
26 | ## ⚙️ Tech stack
27 | 
28 | -  ### Frontend
29 | 
30 |    React with ContextAPI
31 | 
32 | -  ### Backend
33 | 
34 |    Nodejs (express)
35 | 
36 | -  ### services
37 |    -  Twitter API for fetching tweet data
38 |    -  Unsplash API for fetching photos for background images
39 | 
40 | ---
41 | 
42 | To start this project clone the repo or download zip
43 | 
44 | ```shell
45 | 
46 | npm install
47 | npm start
48 | 
49 | cd client
50 | npm install
51 | npm start
52 | ```
53 | 
54 | > Add .env file in root folder and client folder and add your credential
55 | 
56 | <br />
57 | 
58 | ## Upcoming features
59 | 
60 | -  adding support for tweets containing media (currently only support text based tweet)
61 | -  More custom theme options and templates
62 | -  high quality image download
63 | -  directly post or schedule to instagram from webapp
64 | 


--------------------------------------------------------------------------------
/client/.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
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 | 
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 


--------------------------------------------------------------------------------
/client/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `npm start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 | 
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 | 
17 | ### `npm test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `npm run build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `npm run eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 | 
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 | 
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 
48 | ### Code Splitting
49 | 
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 | 
52 | ### Analyzing the Bundle Size
53 | 
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 | 
56 | ### Making a Progressive Web App
57 | 
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 | 
60 | ### Advanced Configuration
61 | 
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 | 
64 | ### Deployment
65 | 
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 | 
68 | ### `npm run build` fails to minify
69 | 
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 | 


--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "client",
 3 | 	"version": "0.1.0",
 4 | 	"private": true,
 5 | 	"dependencies": {
 6 | 		"@testing-library/jest-dom": "^5.14.1",
 7 | 		"@testing-library/react": "^11.2.7",
 8 | 		"@testing-library/user-event": "^12.8.3",
 9 | 		"html2canvas": "^1.2.1",
10 | 		"react": "^17.0.2",
11 | 		"react-dom": "^17.0.2",
12 | 		"react-scripts": "4.0.3",
13 | 		"react-tabs": "^3.2.2",
14 | 		"web-vitals": "^1.1.2"
15 | 	},
16 | 	"scripts": {
17 | 		"start": "react-scripts start",
18 | 		"build": "react-scripts build",
19 | 		"test": "react-scripts test",
20 | 		"eject": "react-scripts eject"
21 | 	},
22 | 	"proxy": "http://localhost:8080",
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 | }
42 | 


--------------------------------------------------------------------------------
/client/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/virensuthar/tweet2img/2402b6612f4f003781a210f8d15c5c991be2463b/client/public/favicon.ico


--------------------------------------------------------------------------------
/client/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 | 
13 | 		<!-- bootstrap -->
14 | 		<link
15 | 			rel="stylesheet"
16 | 			href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
17 | 			integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
18 | 			crossorigin="anonymous"
19 | 		/>
20 | 
21 | 		<!-- font awesome -->
22 | 		<link
23 | 			rel="stylesheet"
24 | 			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
25 | 			integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
26 | 			crossorigin="anonymous"
27 | 		/>
28 | 
29 | 		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
30 | 		<!--
31 |       manifest.json provides metadata used when your web app is installed on a
32 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
33 |     -->
34 | 		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
35 | 		<!--
36 |       Notice the use of %PUBLIC_URL% in the tags above.
37 |       It will be replaced with the URL of the `public` folder during the build.
38 |       Only files inside the `public` folder can be referenced from the HTML.
39 | 
40 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
41 |       work correctly both with client-side routing and a non-root public URL.
42 |       Learn how to configure a non-root public URL by running `npm run build`.
43 |     -->
44 | 		<title>Tweet2img</title>
45 | 	</head>
46 | 	<body>
47 | 		<noscript>You need to enable JavaScript to run this app.</noscript>
48 | 		<div id="root"></div>
49 | 		<!--
50 |       This HTML file is a template.
51 |       If you open it directly in the browser, you will see an empty page.
52 | 
53 |       You can add webfonts, meta tags, or analytics to this file.
54 |       The build step will place the bundled scripts into the <body> tag.
55 | 
56 |       To begin the development, run `npm start` or `yarn start`.
57 |       To create a production bundle, use `npm run build` or `yarn build`.
58 |     -->
59 | 	</body>
60 | </html>
61 | 


--------------------------------------------------------------------------------
/client/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/virensuthar/tweet2img/2402b6612f4f003781a210f8d15c5c991be2463b/client/public/logo192.png


--------------------------------------------------------------------------------
/client/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/virensuthar/tweet2img/2402b6612f4f003781a210f8d15c5c991be2463b/client/public/logo512.png


--------------------------------------------------------------------------------
/client/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 | 


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


--------------------------------------------------------------------------------
/client/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Navbar from "./components/Navbar";
 3 | import TweetInput from "./components/TweetInput";
 4 | import Footer from "./components/Footer";
 5 | import ImageConfig from "./components/ImageConfig";
 6 | import ConfigContextProvider from "./contexts/ConfigContext";
 7 | import ImageContextProvider from "./contexts/ImageContext";
 8 | 
 9 | function App() {
10 | 	return (
11 | 		<div>
12 | 			<Navbar />
13 | 			<div className="grid-compo container-fluid">
14 | 				<ConfigContextProvider>
15 | 					<ImageContextProvider>
16 | 						<TweetInput />
17 | 						<ImageConfig />
18 | 					</ImageContextProvider>
19 | 				</ConfigContextProvider>
20 | 			</div>
21 | 			<Footer />
22 | 		</div>
23 | 	);
24 | }
25 | 
26 | export default App;
27 | 


--------------------------------------------------------------------------------
/client/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 | 	render(<App />);
6 | 	const linkElement = screen.getByText(/learn react/i);
7 | 	expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/client/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg width="96" height="32" viewBox="0 0 96 32" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M31 6.84375C29.8747 7.33273 28.684 7.65487 27.4656 7.80001C28.746 7.05024 29.7089 5.85911 30.1737 4.45C28.9632 5.15787 27.641 5.65455 26.2638 5.91875C25.6838 5.31096 24.9863 4.82744 24.2137 4.49759C23.4411 4.16774 22.6095 3.99845 21.7694 4C18.3681 4 15.6156 6.7125 15.6156 10.0563C15.6132 10.5214 15.6665 10.9851 15.7744 11.4375C13.3354 11.3232 10.9472 10.701 8.76249 9.61079C6.57777 8.52059 4.64468 6.98635 3.08687 5.10625C2.54036 6.02758 2.25133 7.07878 2.25 8.15001C2.25 10.25 3.34563 12.1063 5 13.1938C4.01983 13.1705 3.05974 12.9111 2.20125 12.4375V12.5125C2.20125 15.45 4.32625 17.8938 7.13875 18.45C6.60986 18.591 6.06486 18.6624 5.5175 18.6625C5.12911 18.6632 4.74161 18.6255 4.36062 18.55C5.1425 20.9563 7.41813 22.7063 10.1138 22.7563C7.92336 24.4443 5.23414 25.3567 2.46875 25.35C1.97789 25.3493 1.48748 25.3201 1 25.2625C3.81324 27.0589 7.0834 28.0091 10.4213 28C21.7563 28 27.9487 18.7688 27.9487 10.7625C27.9487 10.5 27.9419 10.2375 27.9294 9.98126C29.1313 9.12629 30.1711 8.06383 31 6.84375V6.84375Z" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round"/>
3 | <path d="M90 5H70C68.3431 5 67 6.34315 67 8V24C67 25.6569 68.3431 27 70 27H90C91.6569 27 93 25.6569 93 24V8C93 6.34315 91.6569 5 90 5Z" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round"/>
4 | <path d="M85 13C86.1046 13 87 12.1046 87 11C87 9.89543 86.1046 9 85 9C83.8954 9 83 9.89543 83 11C83 12.1046 83.8954 13 85 13Z" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10"/>
5 | <path d="M83 20.9868L77.3337 15.3312C76.9732 14.9707 76.4886 14.7616 75.9789 14.7465C75.4693 14.7314 74.9731 14.9115 74.5919 15.25L67 22M78 27L85.7087 19.2912C86.0613 18.938 86.5332 18.7293 87.0317 18.7062C87.5302 18.683 88.0194 18.8471 88.4031 19.1662L93 23" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
6 | <path d="M48.75 7L57.75 16L48.75 25M56.5 16H47.375H38.25" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/client/src/assets/tweetimg.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/virensuthar/tweet2img/2402b6612f4f003781a210f8d15c5c991be2463b/client/src/assets/tweetimg.gif


--------------------------------------------------------------------------------
/client/src/assets/verified.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <g id="verified">
3 | <g id="Group">
4 | <path id="Vector" d="M22.5 12.5C22.5 10.92 21.625 9.55 20.352 8.9C20.506 8.465 20.59 7.995 20.59 7.5C20.59 5.29 18.88 3.502 16.772 3.502C16.302 3.502 15.852 3.586 15.436 3.752C14.818 2.415 13.51 1.5 12 1.5C10.49 1.5 9.18399 2.417 8.56299 3.75C8.14799 3.585 7.69699 3.5 7.22699 3.5C5.11699 3.5 3.40899 5.29 3.40899 7.5C3.40899 7.994 3.49199 8.464 3.64599 8.9C2.37399 9.55 1.49899 10.918 1.49899 12.5C1.49899 13.995 2.28099 15.298 3.44099 15.986C3.42099 16.156 3.40899 16.326 3.40899 16.5C3.40899 18.71 5.11699 20.5 7.22699 20.5C7.69699 20.5 8.14699 20.414 8.56199 20.25C9.18199 21.584 10.488 22.5 11.999 22.5C13.511 22.5 14.817 21.584 15.436 20.25C15.851 20.413 16.301 20.498 16.772 20.498C18.882 20.498 20.59 18.708 20.59 16.498C20.59 16.324 20.578 16.154 20.557 15.985C21.715 15.298 22.5 13.995 22.5 12.501V12.5ZM15.884 9.166L11.55 15.666C11.405 15.883 11.168 16 10.925 16C10.782 16 10.637 15.96 10.509 15.874L10.394 15.78L7.97899 13.365C7.68599 13.072 7.68599 12.597 7.97899 12.305C8.27199 12.013 8.74699 12.011 9.03899 12.305L10.809 14.072L14.634 8.332C14.864 7.987 15.33 7.896 15.674 8.125C16.02 8.355 16.114 8.821 15.884 9.165V9.166Z" fill="#1DA1F2"/>
5 | </g>
6 | </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/client/src/components/BackgroundImg.js:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useState } from "react";
  2 | import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
  3 | import { ImageContext } from "../contexts/ImageContext";
  4 | 
  5 | const BackgroundImg = () => {
  6 | 	const [bgImg, setBgImg] = useContext(ImageContext);
  7 | 
  8 | 	const [bgUrl, setBgUrl] = useState("");
  9 | 	const [bgColor, setBgColor] = useState("");
 10 | 
 11 | 	const clientId = process.env.REACT_APP_UNSPLASH_KEY;
 12 | 
 13 | 	const [photo, setPhoto] = useState([]);
 14 | 	const [result, setResult] = useState([]);
 15 | 
 16 | 	const handleChange = (e) => {
 17 | 		setPhoto(e.target.value);
 18 | 	};
 19 | 
 20 | 	const handleSubmit = (e) => {
 21 | 		e.preventDefault();
 22 | 
 23 | 		const url =
 24 | 			"https://api.unsplash.com/search/photos?page=1&query=" +
 25 | 			photo +
 26 | 			"&client_id=" +
 27 | 			clientId;
 28 | 
 29 | 		fetch(url)
 30 | 			.then((res) => res.json())
 31 | 			.then((data) => {
 32 | 				setResult(data.results);
 33 | 			})
 34 | 			.catch((err) => console.log(err));
 35 | 	};
 36 | 
 37 | 	const getFilePath = (e) => {
 38 | 		var file = e.target.files[0];
 39 | 		let reader = new FileReader();
 40 | 		reader.readAsDataURL(file);
 41 | 		reader.onload = () => {
 42 | 			setBgImg({
 43 | 				file: reader.result
 44 | 			});
 45 | 		};
 46 | 		reader.onerror = function (error) {
 47 | 			console.log("Error: ", error);
 48 | 		};
 49 | 	};
 50 | 
 51 | 	return (
 52 | 		<div>
 53 | 			<Tabs className="tabs">
 54 | 				<TabList className="tablist d-flex justify-content-between p-3 mb-0">
 55 | 					<Tab className="tab">Upload files</Tab>
 56 | 					<Tab className="tab">URL</Tab>
 57 | 					<Tab className="tab">Color</Tab>
 58 | 					<Tab className="tab">Search</Tab>
 59 | 				</TabList>
 60 | 				<hr className="m-0" />
 61 | 				<TabPanel className="tabpanel">
 62 | 					<input
 63 | 						type="file"
 64 | 						accept="image/*"
 65 | 						className="form-control-sm m-3"
 66 | 						onChange={getFilePath}
 67 | 					/>
 68 | 				</TabPanel>
 69 | 				<TabPanel className="tabpanel px-3">
 70 | 					<div className="input-group my-3 d-flex flex-cloumn">
 71 | 						<input
 72 | 							type="text"
 73 | 							className="form-control w-75"
 74 | 							placeholder="Image URL"
 75 | 							value={bgUrl}
 76 | 							onChange={(e) => setBgUrl(e.target.value)}
 77 | 						/>
 78 | 						<button
 79 | 							className="btn btn-primary w-100 mt-3 mx-auto"
 80 | 							onClick={() => setBgImg({ link: bgUrl })}
 81 | 						>
 82 | 							Submit
 83 | 						</button>
 84 | 					</div>
 85 | 				</TabPanel>
 86 | 				<TabPanel className="tabpanel">
 87 | 					<div className="m-3">
 88 | 						<label htmlFor="color" className="mb-0">
 89 | 							Select color
 90 | 						</label>
 91 | 						<input
 92 | 							type="color"
 93 | 							className="ml-2"
 94 | 							id="color"
 95 | 							value={bgColor}
 96 | 							onChange={(e) => {
 97 | 								setBgColor(e.target.value);
 98 | 								setBgImg({ color: bgColor });
 99 | 							}}
100 | 						/>
101 | 					</div>
102 | 				</TabPanel>
103 | 				<TabPanel className="tabpanel ">
104 | 					<form className="d-flex m-3">
105 | 						<input
106 | 							className="form-control"
107 | 							type="search"
108 | 							placeholder="i.e. Dog"
109 | 							aria-label="Search"
110 | 							onChange={handleChange}
111 | 						/>
112 | 						<button
113 | 							className="btn btn-outline-primary ml-2"
114 | 							type="submit"
115 | 							onClick={handleSubmit}
116 | 						>
117 | 							Search
118 | 						</button>
119 | 					</form>
120 | 					<hr className="m-0" />
121 | 					<div className="search_section">
122 | 						{result.map((photo) => (
123 | 							<img
124 | 								key={photo.id}
125 | 								src={photo.urls.thumb}
126 | 								alt="unsplash images"
127 | 								className="search_img"
128 | 								onClick={() => setBgImg({ search: photo.urls.raw })}
129 | 							/>
130 | 						))}
131 | 					</div>
132 | 				</TabPanel>
133 | 			</Tabs>
134 | 		</div>
135 | 	);
136 | };
137 | 
138 | export default BackgroundImg;
139 | 


--------------------------------------------------------------------------------
/client/src/components/Footer.js:
--------------------------------------------------------------------------------
 1 | const Footer = () => {
 2 | 	return (
 3 | 		<footer className='container-fluid bg-light p-3 mb-0 shadow border-top'>
 4 | 			<p className='text-center text-dark mb-0'>
 5 | 				Made with ❤ by &nbsp;
 6 | 				<a
 7 | 					className='text-decoration-underline'
 8 | 					href='https://virensuthar.me'
 9 | 					target='_blank'
10 | 					rel='noreferrer'
11 | 				>
12 | 					Viren Suthar
13 | 				</a>
14 | 			</p>
15 | 		</footer>
16 | 	);
17 | };
18 | 
19 | export default Footer;
20 | 


--------------------------------------------------------------------------------
/client/src/components/ImageConfig.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useState } from "react";
 2 | import { ConfigContext } from "../contexts/ConfigContext";
 3 | import { ImageContext } from "../contexts/ImageContext";
 4 | import BackgroundImg from "./BackgroundImg";
 5 | 
 6 | function ImageConfig() {
 7 | 	const { tweetThemeToggle } = useContext(ConfigContext);
 8 | 	const [imgSetting, setImgSetting] = useContext(ImageContext);
 9 | 
10 | 	const [bgOpacity, setBgOpacity] = useState("");
11 | 	const [borderRadius, setBorderRadius] = useState("");
12 | 
13 | 	const getBgOpacity = (e) => {
14 | 		setBgOpacity(e.target.value);
15 | 		setImgSetting({ bgOpacity: bgOpacity });
16 | 	};
17 | 
18 | 	const getBorderRadius = (e) => {
19 | 		setBorderRadius(e.target.value);
20 | 		setImgSetting({ borderRadius: borderRadius });
21 | 	};
22 | 
23 | 	return (
24 | 		<div className="config_bar my-4 border border-1 rounded-lg p-4">
25 | 			<div className="text-secondary text-center mt-2">
26 | 				<h2>Tweet2img</h2>
27 | 				<p className="mt-3">
28 | 					Create beautiful posts from your tweets easily.
29 | 				</p>
30 | 			</div>
31 | 			<div className="border rounded mt-4 shadow-sm">
32 | 				<p className="p-2 mb-0">Tweet Background</p>
33 | 				<hr className="m-0" />
34 | 				<div className="p-3">
35 | 					<button
36 | 						className="btn btn-sm btn-primary"
37 | 						onClick={tweetThemeToggle}
38 | 					>
39 | 						Toggle theme
40 | 					</button>
41 | 				</div>
42 | 			</div>
43 | 			<div className="border rounded mt-3 shadow-sm">
44 | 				<details className=" outline-none">
45 | 					<summary className="m-2">Background Image</summary>
46 | 					<hr className="mt-2 mb-0" />
47 | 					<div>
48 | 						<BackgroundImg />
49 | 					</div>
50 | 				</details>
51 | 			</div>
52 | 			<div className="border rounded mt-3 shadow-sm">
53 | 				<div className="p-3">
54 | 					<label htmlFor="opacity" className="form-label d-block">
55 | 						Opacity
56 | 					</label>
57 | 					<input
58 | 						type="range"
59 | 						className="form-range w-100"
60 | 						min="0"
61 | 						max="1"
62 | 						step="0.1"
63 | 						id="opacity"
64 | 						value={bgOpacity}
65 | 						onChange={getBgOpacity}
66 | 					/>
67 | 				</div>
68 | 				<hr className="m-0" />
69 | 				<div className="p-3">
70 | 					<label htmlFor="radius" className="form-label d-block">
71 | 						Border Radius
72 | 					</label>
73 | 					<input
74 | 						type="range"
75 | 						className="form-range w-100"
76 | 						min="0"
77 | 						max="15"
78 | 						step="1"
79 | 						id="radius"
80 | 						value={borderRadius}
81 | 						onChange={getBorderRadius}
82 | 					/>
83 | 				</div>
84 | 			</div>
85 | 		</div>
86 | 	);
87 | }
88 | 
89 | export default ImageConfig;
90 | 


--------------------------------------------------------------------------------
/client/src/components/Navbar.js:
--------------------------------------------------------------------------------
 1 | import logo from '../assets/logo.svg';
 2 | 
 3 | const Navbar = () => {
 4 | 	return (
 5 | 		<nav className='navbar navbar-light bg-dark shadow'>
 6 | 			<div className='container-fluid'>
 7 | 				<img className='navbar-brand' src={logo} alt='Tweet2Img' />
 8 | 				<div className='d-flex'>
 9 | 					<a
10 | 						className='text-white'
11 | 						target='_blank'
12 | 						rel='noreferrer'
13 | 						href='https://github.com/virensuthar/tweet2img'
14 | 					>
15 | 						Github
16 | 					</a>
17 | 				</div>
18 | 			</div>
19 | 		</nav>
20 | 	);
21 | };
22 | 
23 | export default Navbar;
24 | 


--------------------------------------------------------------------------------
/client/src/components/TweetImage.js:
--------------------------------------------------------------------------------
  1 | import React, { useContext } from "react";
  2 | import verified from "../assets/verified.svg";
  3 | import { ConfigContext } from "../contexts/ConfigContext";
  4 | import { ImageContext } from "../contexts/ImageContext";
  5 | import html2canvas from "html2canvas";
  6 | 
  7 | function TweetImage({ tweets }) {
  8 | 	const { isLightTheme, light, dark } = useContext(ConfigContext);
  9 | 	const theme = isLightTheme ? light : dark;
 10 | 
 11 | 	const [imgSetting, setImgSetting] = useContext(ImageContext);
 12 | 
 13 | 	const downloadPng = () => {
 14 | 		const coverImage = document.getElementById("tweetpost-download");
 15 | 
 16 | 		html2canvas(coverImage, {
 17 | 			useCORS: true
 18 | 		}).then(function (canvas) {
 19 | 			const a = document.createElement("a");
 20 | 			a.href = canvas.toDataURL("image/png");
 21 | 			a.download = "tweet-image.png";
 22 | 			a.click();
 23 | 		});
 24 | 	};
 25 | 
 26 | 	const changeBackgroundProp = () => {
 27 | 		if (theme.bg === "#ffffff") {
 28 | 			return `rgba(255, 255,255, ${imgSetting.bgOpacity})`;
 29 | 		} else {
 30 | 			return `rgba(0, 0, 0, ${imgSetting.bgOpacity})`;
 31 | 		}
 32 | 	};
 33 | 
 34 | 	const changeBackgroundImage = () => {
 35 | 		if (imgSetting.file) {
 36 | 			return `url(${imgSetting.file})`;
 37 | 		} else if (imgSetting.link) {
 38 | 			return `url(${imgSetting.link})`;
 39 | 		} else if (imgSetting.color) {
 40 | 			return `${imgSetting.color}`;
 41 | 		} else if (imgSetting.search) {
 42 | 			return `url(${imgSetting.search})`;
 43 | 		} else {
 44 | 			return `url("https://images.unsplash.com/photo-1616968733012-903f9d46faf8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1868&q=80")`;
 45 | 		}
 46 | 	};
 47 | 
 48 | 	return (
 49 | 		<div className="tweet_image">
 50 | 			<div
 51 | 				className="main_post"
 52 | 				style={{
 53 | 					background: `${changeBackgroundImage()} no-repeat center/cover`
 54 | 				}}
 55 | 				id="tweetpost-download"
 56 | 			>
 57 | 				{tweets.map((tweet) => (
 58 | 					<div
 59 | 						className="tweet_post"
 60 | 						key={tweet.data.id}
 61 | 						style={{
 62 | 							color: theme.text,
 63 | 							borderRadius: `${imgSetting.borderRadius}px`,
 64 | 							background: changeBackgroundProp()
 65 | 						}}
 66 | 					>
 67 | 						<div className="profile">
 68 | 							<img
 69 | 								src={tweet.includes.users[0].profile_image_url}
 70 | 								alt="Pofile pic"
 71 | 							/>
 72 | 							<div>
 73 | 								<p className="name mb-0">
 74 | 									{tweet.includes.users[0].name}
 75 | 									<span>
 76 | 										{tweet.includes.users[0].verified ? (
 77 | 											<img
 78 | 												className="verified"
 79 | 												src={verified}
 80 | 												alt="verified symbol"
 81 | 												style={{ fill: theme.fill }}
 82 | 											/>
 83 | 										) : (
 84 | 											""
 85 | 										)}
 86 | 									</span>
 87 | 								</p>
 88 | 								<p className="username mb-0 mt-1">
 89 | 									@{tweet.includes.users[0].username}
 90 | 								</p>
 91 | 							</div>
 92 | 						</div>
 93 | 						<p className="tweet_text mb-0">{tweet.data.text}</p>
 94 | 					</div>
 95 | 				))}
 96 | 			</div>
 97 | 			<button className="btn btn-primary btn-md my-4" onClick={downloadPng}>
 98 | 				Download
 99 | 			</button>
100 | 		</div>
101 | 	);
102 | }
103 | 
104 | export default TweetImage;
105 | 


--------------------------------------------------------------------------------
/client/src/components/TweetInput.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import TweetImage from "./TweetImage";
 3 | 
 4 | const TweetInput = () => {
 5 | 	const [url, setUrl] = useState("");
 6 | 	const [tweetData, setTweetData] = useState([]);
 7 | 
 8 | 	const handleSubmit = (e) => {
 9 | 		e.preventDefault();
10 | 
11 | 		const tweetUrl = new URL(url);
12 | 		var pathIds = tweetUrl.pathname.split("/");
13 | 		const tweetId = pathIds[3];
14 | 
15 | 		fetch("/api/tweets", {
16 | 			method: "POST",
17 | 			body: JSON.stringify({ tweetId }),
18 | 			headers: {
19 | 				Accept: "application/json",
20 | 				"Content-Type": "application/json"
21 | 			}
22 | 		})
23 | 			.then((res) => res.json())
24 | 			.then((data) => {
25 | 				setTweetData([data]);
26 | 			})
27 | 			.catch((err) => console.log(err));
28 | 
29 | 		setUrl("");
30 | 	};
31 | 
32 | 	return (
33 | 		<div className="tweet_input">
34 | 			<form onSubmit={handleSubmit} className="my-5">
35 | 				<div className="input-group tweet-link-input">
36 | 					<input
37 | 						type="text"
38 | 						id="tweeturl"
39 | 						required
40 | 						value={url}
41 | 						className="form-control"
42 | 						placeholder="Paste a link of your tweet here"
43 | 						onChange={(e) => setUrl(e.target.value)}
44 | 					/>
45 | 					<button className="btn btn-outline-primary ml-2" type="submit">
46 | 						Create
47 | 					</button>
48 | 				</div>
49 | 			</form>
50 | 			<TweetImage tweets={tweetData} />
51 | 		</div>
52 | 	);
53 | };
54 | 
55 | export default TweetInput;
56 | 


--------------------------------------------------------------------------------
/client/src/contexts/ConfigContext.js:
--------------------------------------------------------------------------------
 1 | import React, { createContext, Component } from "react";
 2 | 
 3 | export const ConfigContext = createContext();
 4 | 
 5 | class ConfigContextProvider extends Component {
 6 | 	state = {
 7 | 		isLightTheme: true,
 8 | 		light: { fill: "#1DA1F2", text: "#0F1419", bg: "#ffffff" },
 9 | 		dark: { fill: "#D9D9D9", text: "#D9D9D9", bg: "#000000" }
10 | 	};
11 | 
12 | 	tweetThemeToggle = () => {
13 | 		this.setState({ isLightTheme: !this.state.isLightTheme });
14 | 	};
15 | 
16 | 	render() {
17 | 		return (
18 | 			<ConfigContext.Provider
19 | 				value={{
20 | 					...this.state,
21 | 					tweetThemeToggle: this.tweetThemeToggle
22 | 				}}
23 | 			>
24 | 				{this.props.children}
25 | 			</ConfigContext.Provider>
26 | 		);
27 | 	}
28 | }
29 | 
30 | export default ConfigContextProvider;
31 | 


--------------------------------------------------------------------------------
/client/src/contexts/ImageContext.js:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useState } from "react";
 2 | 
 3 | export const ImageContext = createContext();
 4 | 
 5 | const ImageContextProvider = (props) => {
 6 | 	const [imgSetting, setImgSetting] = useState({
 7 | 		bgOpacity: "1",
 8 | 		borderRadius: "5"
 9 | 	});
10 | 
11 | 	const [bgImg, setBgImg] = useState({
12 | 		file: "",
13 | 		link: "",
14 | 		color: "",
15 | 		search: ""
16 | 	});
17 | 
18 | 	return (
19 | 		<ImageContext.Provider
20 | 			value={[imgSetting, setImgSetting, bgImg, setBgImg]}
21 | 		>
22 | 			{props.children}
23 | 		</ImageContext.Provider>
24 | 	);
25 | };
26 | 
27 | export default ImageContextProvider;
28 | 


--------------------------------------------------------------------------------
/client/src/index.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");
  2 | 
  3 | * {
  4 | 	margin: 0;
  5 | 	padding: 0;
  6 | 	box-sizing: border-box;
  7 | }
  8 | 
  9 | body {
 10 | 	font-family: "Poppins", sans-serif;
 11 | 	background: #fff;
 12 | 	margin: 0 auto;
 13 | 	height: 100vh;
 14 | }
 15 | /* App component */
 16 | .grid-compo {
 17 | 	display: grid;
 18 | 	grid-template-columns: 2fr 1fr;
 19 | 	place-items: center;
 20 | }
 21 | 
 22 | @media (max-width: 768px) {
 23 | 	.grid-compo {
 24 | 		grid-template-columns: 1fr;
 25 | 	}
 26 | }
 27 | 
 28 | /* TweetInput component */
 29 | 
 30 | .tweet_input {
 31 | 	display: flex;
 32 | 	flex-direction: column;
 33 | 	justify-content: center;
 34 | 	align-items: center;
 35 | 	width: 100%;
 36 | }
 37 | 
 38 | /* TweetImage component */
 39 | 
 40 | .tweet_image {
 41 | 	display: flex;
 42 | 	flex-direction: column;
 43 | 	align-items: center;
 44 | }
 45 | 
 46 | .main_post {
 47 | 	width: 400px;
 48 | 	height: 400px;
 49 | 	display: flex;
 50 | 	justify-content: center;
 51 | 	align-items: center;
 52 | 	padding: 0;
 53 | }
 54 | 
 55 | .tweet_post {
 56 | 	padding: 16px;
 57 | 	max-width: 300px;
 58 | 	background-color: white;
 59 | }
 60 | 
 61 | .profile {
 62 | 	display: flex;
 63 | 	flex-direction: row;
 64 | 	align-items: center;
 65 | }
 66 | 
 67 | .profile img {
 68 | 	width: 48px;
 69 | 	height: 48px;
 70 | 	border-radius: 50%;
 71 | 	margin-right: 8px;
 72 | }
 73 | 
 74 | .name {
 75 | 	font-size: 12px;
 76 | 	line-height: 16px;
 77 | 	font-weight: bold;
 78 | 	padding: auto;
 79 | }
 80 | 
 81 | .name span > .verified {
 82 | 	width: 16px;
 83 | 	height: 16px;
 84 | 	margin-left: 3px;
 85 | }
 86 | .username {
 87 | 	font-size: 12px;
 88 | 	line-height: 16px;
 89 | }
 90 | 
 91 | .tweet_text {
 92 | 	font-size: 16px;
 93 | 	line-height: 23px;
 94 | 	margin-top: 8px;
 95 | 	white-space: pre-wrap;
 96 | }
 97 | 
 98 | /* ImageConfig componenr */
 99 | 
100 | .config_bar {
101 | 	max-width: 360px;
102 | }
103 | 
104 | summary {
105 | 	outline: none;
106 | }
107 | 
108 | .tablist {
109 | 	list-style: none;
110 | }
111 | 
112 | .tab {
113 | 	font-size: 15px;
114 | 	cursor: pointer;
115 | 	outline: none;
116 | }
117 | 
118 | .tab:hover {
119 | 	color: #0066ff;
120 | }
121 | 
122 | .search_section {
123 | 	display: grid;
124 | 	grid-template-columns: repeat(2, 1fr);
125 | 	grid-auto-flow: dense;
126 | 	gap: 5px;
127 | 	max-height: 270px;
128 | 	overflow: scroll;
129 | 	padding: 10px;
130 | }
131 | 
132 | .search_img {
133 | 	max-width: 130px;
134 | 	border-radius: 5px;
135 | 	cursor: pointer;
136 | }
137 | 
138 | @media (max-width: 500px) {
139 | 	.main_post {
140 | 		width: 360px;
141 | 		height: 360px;
142 | 	}
143 | 	.grid-compo {
144 | 		padding: 0;
145 | 	}
146 | 	.tweet-link-input {
147 | 		padding: 0 10px;
148 | 	}
149 | 	.tweet_post {
150 | 		max-width: 270px;
151 | 	}
152 | }
153 | 


--------------------------------------------------------------------------------
/client/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | 
 6 | ReactDOM.render(
 7 | 	<React.StrictMode>
 8 | 		<App />
 9 | 	</React.StrictMode>,
10 | 	document.getElementById('root')
11 | );
12 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | require("dotenv").config();
 2 | 
 3 | const express = require("express");
 4 | const bodyParser = require("body-parser");
 5 | const cors = require("cors");
 6 | const routes = require("./routes/auth");
 7 | const path = require("path");
 8 | 
 9 | const app = express();
10 | 
11 | app.use(bodyParser.json());
12 | app.use(cors());
13 | 
14 | //route
15 | app.use("/api", routes);
16 | 
17 | if (process.env.NODE_ENV === "production") {
18 | 	app.use(express.static("client/build"));
19 | 
20 | 	app.get("*", (req, res) => {
21 | 		res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
22 | 	});
23 | }
24 | 
25 | //port
26 | const port = process.env.PORT || 8080;
27 | 
28 | app.listen(port, () => {
29 | 	console.log(`app is running at ${port}`);
30 | });
31 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "tweet2img",
  3 |   "version": "1.0.0",
  4 |   "lockfileVersion": 1,
  5 |   "requires": true,
  6 |   "dependencies": {
  7 |     "accepts": {
  8 |       "version": "1.3.7",
  9 |       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
 10 |       "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
 11 |       "requires": {
 12 |         "mime-types": "~2.1.24",
 13 |         "negotiator": "0.6.2"
 14 |       }
 15 |     },
 16 |     "array-flatten": {
 17 |       "version": "1.1.1",
 18 |       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
 19 |       "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
 20 |     },
 21 |     "body-parser": {
 22 |       "version": "1.19.0",
 23 |       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
 24 |       "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
 25 |       "requires": {
 26 |         "bytes": "3.1.0",
 27 |         "content-type": "~1.0.4",
 28 |         "debug": "2.6.9",
 29 |         "depd": "~1.1.2",
 30 |         "http-errors": "1.7.2",
 31 |         "iconv-lite": "0.4.24",
 32 |         "on-finished": "~2.3.0",
 33 |         "qs": "6.7.0",
 34 |         "raw-body": "2.4.0",
 35 |         "type-is": "~1.6.17"
 36 |       }
 37 |     },
 38 |     "bytes": {
 39 |       "version": "3.1.0",
 40 |       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
 41 |       "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
 42 |     },
 43 |     "content-disposition": {
 44 |       "version": "0.5.3",
 45 |       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
 46 |       "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
 47 |       "requires": {
 48 |         "safe-buffer": "5.1.2"
 49 |       }
 50 |     },
 51 |     "content-type": {
 52 |       "version": "1.0.4",
 53 |       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
 54 |       "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
 55 |     },
 56 |     "cookie": {
 57 |       "version": "0.4.0",
 58 |       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
 59 |       "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
 60 |     },
 61 |     "cookie-signature": {
 62 |       "version": "1.0.6",
 63 |       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
 64 |       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
 65 |     },
 66 |     "cors": {
 67 |       "version": "2.8.5",
 68 |       "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
 69 |       "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
 70 |       "requires": {
 71 |         "object-assign": "^4",
 72 |         "vary": "^1"
 73 |       }
 74 |     },
 75 |     "debug": {
 76 |       "version": "2.6.9",
 77 |       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
 78 |       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
 79 |       "requires": {
 80 |         "ms": "2.0.0"
 81 |       }
 82 |     },
 83 |     "depd": {
 84 |       "version": "1.1.2",
 85 |       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
 86 |       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
 87 |     },
 88 |     "destroy": {
 89 |       "version": "1.0.4",
 90 |       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
 91 |       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
 92 |     },
 93 |     "dotenv": {
 94 |       "version": "10.0.0",
 95 |       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
 96 |       "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q=="
 97 |     },
 98 |     "ee-first": {
 99 |       "version": "1.1.1",
100 |       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
101 |       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
102 |     },
103 |     "encodeurl": {
104 |       "version": "1.0.2",
105 |       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
106 |       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
107 |     },
108 |     "escape-html": {
109 |       "version": "1.0.3",
110 |       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
111 |       "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
112 |     },
113 |     "etag": {
114 |       "version": "1.8.1",
115 |       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
116 |       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
117 |     },
118 |     "express": {
119 |       "version": "4.17.1",
120 |       "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
121 |       "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
122 |       "requires": {
123 |         "accepts": "~1.3.7",
124 |         "array-flatten": "1.1.1",
125 |         "body-parser": "1.19.0",
126 |         "content-disposition": "0.5.3",
127 |         "content-type": "~1.0.4",
128 |         "cookie": "0.4.0",
129 |         "cookie-signature": "1.0.6",
130 |         "debug": "2.6.9",
131 |         "depd": "~1.1.2",
132 |         "encodeurl": "~1.0.2",
133 |         "escape-html": "~1.0.3",
134 |         "etag": "~1.8.1",
135 |         "finalhandler": "~1.1.2",
136 |         "fresh": "0.5.2",
137 |         "merge-descriptors": "1.0.1",
138 |         "methods": "~1.1.2",
139 |         "on-finished": "~2.3.0",
140 |         "parseurl": "~1.3.3",
141 |         "path-to-regexp": "0.1.7",
142 |         "proxy-addr": "~2.0.5",
143 |         "qs": "6.7.0",
144 |         "range-parser": "~1.2.1",
145 |         "safe-buffer": "5.1.2",
146 |         "send": "0.17.1",
147 |         "serve-static": "1.14.1",
148 |         "setprototypeof": "1.1.1",
149 |         "statuses": "~1.5.0",
150 |         "type-is": "~1.6.18",
151 |         "utils-merge": "1.0.1",
152 |         "vary": "~1.1.2"
153 |       }
154 |     },
155 |     "finalhandler": {
156 |       "version": "1.1.2",
157 |       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
158 |       "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
159 |       "requires": {
160 |         "debug": "2.6.9",
161 |         "encodeurl": "~1.0.2",
162 |         "escape-html": "~1.0.3",
163 |         "on-finished": "~2.3.0",
164 |         "parseurl": "~1.3.3",
165 |         "statuses": "~1.5.0",
166 |         "unpipe": "~1.0.0"
167 |       }
168 |     },
169 |     "forwarded": {
170 |       "version": "0.2.0",
171 |       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
172 |       "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
173 |     },
174 |     "fresh": {
175 |       "version": "0.5.2",
176 |       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
177 |       "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
178 |     },
179 |     "http-errors": {
180 |       "version": "1.7.2",
181 |       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
182 |       "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
183 |       "requires": {
184 |         "depd": "~1.1.2",
185 |         "inherits": "2.0.3",
186 |         "setprototypeof": "1.1.1",
187 |         "statuses": ">= 1.5.0 < 2",
188 |         "toidentifier": "1.0.0"
189 |       }
190 |     },
191 |     "iconv-lite": {
192 |       "version": "0.4.24",
193 |       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
194 |       "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
195 |       "requires": {
196 |         "safer-buffer": ">= 2.1.2 < 3"
197 |       }
198 |     },
199 |     "inherits": {
200 |       "version": "2.0.3",
201 |       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
202 |       "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
203 |     },
204 |     "ipaddr.js": {
205 |       "version": "1.9.1",
206 |       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
207 |       "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
208 |     },
209 |     "media-typer": {
210 |       "version": "0.3.0",
211 |       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
212 |       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
213 |     },
214 |     "merge-descriptors": {
215 |       "version": "1.0.1",
216 |       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
217 |       "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
218 |     },
219 |     "methods": {
220 |       "version": "1.1.2",
221 |       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
222 |       "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
223 |     },
224 |     "mime": {
225 |       "version": "1.6.0",
226 |       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
227 |       "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
228 |     },
229 |     "mime-db": {
230 |       "version": "1.49.0",
231 |       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.49.0.tgz",
232 |       "integrity": "sha512-CIc8j9URtOVApSFCQIF+VBkX1RwXp/oMMOrqdyXSBXq5RWNEsRfyj1kiRnQgmNXmHxPoFIxOroKA3zcU9P+nAA=="
233 |     },
234 |     "mime-types": {
235 |       "version": "2.1.32",
236 |       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.32.tgz",
237 |       "integrity": "sha512-hJGaVS4G4c9TSMYh2n6SQAGrC4RnfU+daP8G7cSCmaqNjiOoUY0VHCMS42pxnQmVF1GWwFhbHWn3RIxCqTmZ9A==",
238 |       "requires": {
239 |         "mime-db": "1.49.0"
240 |       }
241 |     },
242 |     "ms": {
243 |       "version": "2.0.0",
244 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
245 |       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
246 |     },
247 |     "negotiator": {
248 |       "version": "0.6.2",
249 |       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
250 |       "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
251 |     },
252 |     "oauth": {
253 |       "version": "0.9.15",
254 |       "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz",
255 |       "integrity": "sha1-vR/vr2hslrdUda7VGWQS/2DPucE="
256 |     },
257 |     "object-assign": {
258 |       "version": "4.1.1",
259 |       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
260 |       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
261 |     },
262 |     "on-finished": {
263 |       "version": "2.3.0",
264 |       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
265 |       "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
266 |       "requires": {
267 |         "ee-first": "1.1.1"
268 |       }
269 |     },
270 |     "parseurl": {
271 |       "version": "1.3.3",
272 |       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
273 |       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
274 |     },
275 |     "path-to-regexp": {
276 |       "version": "0.1.7",
277 |       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
278 |       "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
279 |     },
280 |     "proxy-addr": {
281 |       "version": "2.0.7",
282 |       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
283 |       "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
284 |       "requires": {
285 |         "forwarded": "0.2.0",
286 |         "ipaddr.js": "1.9.1"
287 |       }
288 |     },
289 |     "qs": {
290 |       "version": "6.7.0",
291 |       "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
292 |       "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
293 |     },
294 |     "range-parser": {
295 |       "version": "1.2.1",
296 |       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
297 |       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
298 |     },
299 |     "raw-body": {
300 |       "version": "2.4.0",
301 |       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
302 |       "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
303 |       "requires": {
304 |         "bytes": "3.1.0",
305 |         "http-errors": "1.7.2",
306 |         "iconv-lite": "0.4.24",
307 |         "unpipe": "1.0.0"
308 |       }
309 |     },
310 |     "safe-buffer": {
311 |       "version": "5.1.2",
312 |       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
313 |       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
314 |     },
315 |     "safer-buffer": {
316 |       "version": "2.1.2",
317 |       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
318 |       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
319 |     },
320 |     "send": {
321 |       "version": "0.17.1",
322 |       "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
323 |       "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
324 |       "requires": {
325 |         "debug": "2.6.9",
326 |         "depd": "~1.1.2",
327 |         "destroy": "~1.0.4",
328 |         "encodeurl": "~1.0.2",
329 |         "escape-html": "~1.0.3",
330 |         "etag": "~1.8.1",
331 |         "fresh": "0.5.2",
332 |         "http-errors": "~1.7.2",
333 |         "mime": "1.6.0",
334 |         "ms": "2.1.1",
335 |         "on-finished": "~2.3.0",
336 |         "range-parser": "~1.2.1",
337 |         "statuses": "~1.5.0"
338 |       },
339 |       "dependencies": {
340 |         "ms": {
341 |           "version": "2.1.1",
342 |           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
343 |           "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
344 |         }
345 |       }
346 |     },
347 |     "serve-static": {
348 |       "version": "1.14.1",
349 |       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
350 |       "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
351 |       "requires": {
352 |         "encodeurl": "~1.0.2",
353 |         "escape-html": "~1.0.3",
354 |         "parseurl": "~1.3.3",
355 |         "send": "0.17.1"
356 |       }
357 |     },
358 |     "setprototypeof": {
359 |       "version": "1.1.1",
360 |       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
361 |       "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
362 |     },
363 |     "statuses": {
364 |       "version": "1.5.0",
365 |       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
366 |       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
367 |     },
368 |     "toidentifier": {
369 |       "version": "1.0.0",
370 |       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
371 |       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
372 |     },
373 |     "type-is": {
374 |       "version": "1.6.18",
375 |       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
376 |       "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
377 |       "requires": {
378 |         "media-typer": "0.3.0",
379 |         "mime-types": "~2.1.24"
380 |       }
381 |     },
382 |     "unpipe": {
383 |       "version": "1.0.0",
384 |       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
385 |       "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
386 |     },
387 |     "utils-merge": {
388 |       "version": "1.0.1",
389 |       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
390 |       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
391 |     },
392 |     "vary": {
393 |       "version": "1.1.2",
394 |       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
395 |       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
396 |     }
397 |   }
398 | }
399 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "tweet2img",
 3 | 	"version": "1.0.0",
 4 | 	"description": "",
 5 | 	"main": "index.js",
 6 | 	"engines": {
 7 | 		"node": "14.15.3",
 8 | 		"npm": "6.14.9"
 9 | 	},
10 | 	"scripts": {
11 | 		"start": "node index.js",
12 | 		"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
13 | 	},
14 | 	"author": "",
15 | 	"license": "ISC",
16 | 	"dependencies": {
17 | 		"body-parser": "^1.19.0",
18 | 		"cors": "^2.8.5",
19 | 		"dotenv": "^10.0.0",
20 | 		"express": "^4.17.1",
21 | 		"oauth": "^0.9.15"
22 | 	}
23 | }
24 | 


--------------------------------------------------------------------------------
/routes/auth.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const router = express.Router();
 3 | const OAuth2 = require("oauth").OAuth2;
 4 | const https = require("https");
 5 | 
 6 | const apiKey = process.env.API_KEY;
 7 | const apiKeySecret = process.env.APIKEY_SECRET;
 8 | 
 9 | router.post("/tweets", (req, res) => {
10 | 	//getting id of a tweet from frontend
11 | 	const { tweetId } = req.body;
12 | 
13 | 	//authorizing twitter api
14 | 	var oauth2 = new OAuth2(
15 | 		process.env.API_KEY,
16 | 		process.env.APIKEY_SECRET,
17 | 		"https://api.twitter.com/",
18 | 		null,
19 | 		"oauth2/token",
20 | 		null
21 | 	);
22 | 
23 | 	//parameters
24 | 	const tweet_fields = "created_at";
25 | 	const expansions =
26 | 		"author_id,attachments.poll_ids,referenced_tweets.id,attachments.media_keys";
27 | 	const media_fields = "preview_image_url";
28 | 	const user_fields = "created_at,profile_image_url,verified";
29 | 
30 | 	//fetching tweets data
31 | 	oauth2.getOAuthAccessToken(
32 | 		"",
33 | 		{
34 | 			grant_type: "client_credentials"
35 | 		},
36 | 		function (e, access_token) {
37 | 			var options = {
38 | 				method: "GET",
39 | 				hostname: "api.twitter.com",
40 | 				path: `/2/tweets/${tweetId}?tweet.fields=${tweet_fields}&expansions=${expansions}&media.fields=${media_fields}&user.fields=${user_fields}`,
41 | 				headers: {
42 | 					Authorization: "Bearer " + access_token
43 | 				}
44 | 			};
45 | 
46 | 			https.get(options, function (result) {
47 | 				var buffer = "";
48 | 				result.setEncoding("utf8");
49 | 				result.on("data", function (data) {
50 | 					buffer += data;
51 | 				});
52 | 				result.on("end", function () {
53 | 					var tweets = JSON.parse(buffer);
54 | 					res.send(tweets); // the tweets!
55 | 				});
56 | 			});
57 | 		}
58 | 	);
59 | });
60 | module.exports = router;
61 | 


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