15 | 
16 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/Widget.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import WhoToFollow from './WhoToFollow'
4 | import News from './News'
5 | import { ArticleT } from '../types/news'
6 | import Trending from './Trending'
7 | import { RandomUserT } from '../types/randomUser'
8 | import Search from './Search'
9 |
10 | type Props = {
11 | initialNewsResult: ArticleT[]
12 | randomUsers: RandomUserT[]
13 | }
14 |
15 | export default function Widget({ initialNewsResult, randomUsers }: Props) {
16 | return (
17 |
17 |
23 | {user.login.username}
18 |
19 | @{user.login.username}
20 | {/* {flowedMe && Follows you} */}
21 |
22 |
24 |
27 |
28 |
18 | {/* Search */}
19 |
37 | )
38 | }
39 |
--------------------------------------------------------------------------------
/src/app/not-found.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import Button from '@/components/Button';
4 | import { Metadata } from 'next';
5 | import { useRouter } from 'next/navigation';
6 | import React from 'react';
7 |
8 | export const metadata: Metadata = {
9 | title: 'Twitter Clone app | Page not found',
10 | description: 'Twitter Clone build with + Typescript.',
11 | };
12 |
13 | export default function PageNotFound() {
14 | const router = useRouter();
15 | const handleClick = () => {
16 | router.push('/');
17 | };
18 |
19 | return (
20 |
25 | {/* Who to follow session */}
26 |
36 | 32 | Terms of Service Privacy Policy Cookie Policy Accessibility Ads info 33 | More © 2023 Twitter, Inc. 34 |
35 |
21 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "twitter-clone-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@types/node": "18.15.11",
13 | "@types/react": "18.0.31",
14 | "@types/react-dom": "18.0.11",
15 | "@types/react-modal": "^3.13.1",
16 | "eslint": "8.40.0",
17 | "eslint-config-next": "^13.4.1",
18 | "firebase": "^9.21.0",
19 | "framer-motion": "^10.11.2",
20 | "moment": "^2.29.4",
21 | "next": "^13.4.1",
22 | "next-auth": "^4.22.1",
23 | "next-themes": "^0.2.1",
24 | "nodemailer": "^6.9.1",
25 | "react": "^18.2.0",
26 | "react-dom": "^18.2.0",
27 | "react-hot-toast": "^2.4.0",
28 | "react-icon": "^1.0.0",
29 | "react-icons": "^4.8.0",
30 | "react-modal": "^3.16.1",
31 | "react-twitter-embed": "^4.0.4",
32 | "typescript": "5.0.4",
33 | "uuid": "^9.0.0"
34 | },
35 | "devDependencies": {
36 | "@types/uuid": "^9.0.1",
37 | "autoprefixer": "^10.4.14",
38 | "postcss": "^8.4.21",
39 | "prettier": "^2.8.7",
40 | "prettier-plugin-tailwindcss": "^0.2.6",
41 | "tailwindcss": "^3.2.7"
42 | },
43 | "repository": "https://github.com/saddamarbaa/twitter-clone-app-nextjs-typescript",
44 | "author": "Saddam Arbaa"
45 | }
46 |
--------------------------------------------------------------------------------
/src/components/Messages.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import React from 'react'
4 | import { MdKeyboardDoubleArrowUp, MdOutlineAttachEmail } from 'react-icons/md'
5 | import { useSession } from 'next-auth/react'
6 |
7 | export default function Messages() {
8 | const { data: session } = useSession()
9 | return null
10 | return session?(
11 |
22 |
33 | 404
23 |Oops! Page not found
24 |25 | We re sorry. The page you requested could not be found. Please go back to the homepage or contact us. 26 |
27 |
28 |
31 |
32 |
14 |
28 | ):null
29 | }
30 |
--------------------------------------------------------------------------------
/src/app/Providers.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { motion, AnimatePresence } from 'framer-motion';
4 | import { ThemeProvider } from 'next-themes';
5 | import React, { ReactNode } from 'react';
6 | import { Toaster as ToastProvider } from 'react-hot-toast';
7 | import { Session } from 'next-auth';
8 | import { SessionProvider } from 'next-auth/react';
9 |
10 | type Props = {
11 | children: ReactNode;
12 | session: Session | null;
13 | };
14 |
15 | const pageVariants = {
16 | initial: { opacity: 0 },
17 | enter: { opacity: 1, transition: { duration: 0.5 } },
18 | exit: { opacity: 0, transition: { duration: 0.5 } },
19 | };
20 |
21 | export default function Providers({ children, session }: Props) {
22 | return (
23 |
15 |
27 |
18 |
23 |
26 |
32 |
35 |
21 | {!hideBorder && (
22 |
23 | )} 24 | 25 |
49 | )
50 | }
51 |
--------------------------------------------------------------------------------
/src/types/tweets.ts:
--------------------------------------------------------------------------------
1 | export interface TweetTemp {
2 | id: number
3 | user: {
4 | username: string
5 | name: string
6 | avatar: string
7 | }
8 | title: string
9 | content: string
10 | media: {
11 | type: 'image' | 'video'
12 | url: string
13 | }[]
14 | timestamp: string
15 | likes: {
16 | user: {
17 | username: string
18 | name: string
19 | avatar: string
20 | }
21 | timestamp: string
22 | }[]
23 | comments: {
24 | user: {
25 | username: string
26 | name: string
27 | avatar: string
28 | }
29 | content: string
30 | timestamp: string
31 | }[]
32 | retweets: {
33 | user: {
34 | username: string
35 | name: string
36 | avatar: string
37 | }
38 | timestamp: string
39 | }[]
40 | views: {
41 | user: {
42 | username: string
43 | name: string
44 | avatar: string
45 | }
46 | timestamp: string
47 | }[]
48 | shares: {
49 | user: {
50 | username: string
51 | name: string
52 | avatar: string
53 | }
54 | timestamp: string
55 | }[]
56 | }
57 |
58 | export interface UserT {
59 | email?: string
60 | name?: string
61 | image: string
62 | }
63 |
64 | export interface TimestampT {
65 | seconds: number
66 | nanoseconds: number
67 | }
68 |
69 | export interface CommentT {
70 | text: string
71 | user: UserT
72 | timestamp: TimestampT
73 | }
74 |
75 | export interface TweetT {
76 | id: string
77 | title: string
78 | user: UserT
79 | content: string
80 | timestamp: TimestampT
81 | userRef: string
82 | images: string[]
83 | likes?: UserT[]
84 | comments?: CommentT[]
85 | }
86 |
--------------------------------------------------------------------------------
/src/components/DarkModSwitch.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { useEffect, useState } from 'react';
4 | import { MdLightMode } from 'react-icons/md';
5 | import { BsFillMoonFill } from 'react-icons/bs';
6 | import { useTheme } from 'next-themes';
7 |
8 | export default function DarkModSwitch() {
9 | const { systemTheme, theme, setTheme } = useTheme();
10 | const [mounted, setMounted] = useState(false);
11 |
12 | useEffect(() => {
13 | setMounted(true);
14 | }, []);
15 |
16 | const renderThemeChanger = () => {
17 | if (!mounted) return null;
18 |
19 | const currentTheme = theme === 'system' ? systemTheme : theme;
20 |
21 | if (currentTheme === 'dark') {
22 | return (
23 | 23 | )} 24 | 25 |
34 |
48 |
35 |
46 | {comment.user.name}
36 |37 | @{comment.user.name?.toLowerCase()}· 38 |
39 | 40 | {comment.timestamp?.seconds && ( 41 | 42 | {Moment.unix(comment.timestamp.seconds).fromNow()} 43 | 44 | )} 45 |{comment.text}
47 | setTheme('light' as const)}
26 | >
27 |
30 | );
31 | }
32 |
33 | return (
34 | Light mode
29 | setTheme('dark' as const)}
37 | >
38 |
41 | );
42 | };
43 | return Dark mode
40 |{renderThemeChanger()}
;
44 | }
45 |
--------------------------------------------------------------------------------
/src/app/error.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import Button from '@/components/Button';
4 | import { Metadata } from 'next';
5 | import Link from 'next/link';
6 | import React, { useEffect } from 'react';
7 |
8 | interface Props {
9 | error: Error | null;
10 | rest: () => void;
11 | }
12 |
13 | export const metadata: Metadata = {
14 | title: 'Twitter Clone app | Page not found',
15 | description: 'Twitter Clone build with + Typescript.',
16 | };
17 |
18 | export default function ErrorPage({ error, rest }: Props) {
19 | useEffect(() => {
20 | return () => {};
21 | }, [error]);
22 |
23 | return (
24 |
25 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/src/components/SideBarOption.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { IconType } from 'react-icons';
4 |
5 | type Props = {
6 | title?: string;
7 | Icon: IconType;
8 | handleClick?: (isLogOut?:boolean) => void;
9 | isLogo?: boolean;
10 | notification?: number;
11 | };
12 |
13 | export default function SideBarOption({ notification, title, handleClick, Icon, isLogo = false }: Props) {
14 | const handleClickOption = () => {
15 | if (handleClick) {
16 | if (title === 'Log out') {handleClick(true); }
17 | else {
18 | handleClick();
19 | }
20 | }
21 | };
22 |
23 | return (
24 |
26 |
47 | Oops!
27 |{error?.message || 'Unknown error occurred.'}
28 |Please try again later or contact our support team if the problem persists.
29 |
30 |
31 |
32 |
33 |
46 |
34 |
44 |
45 |
30 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/src/components/Trending.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @next/next/no-img-element */
2 | 'use client';
3 | import { AnimatePresence, motion } from 'framer-motion';
4 | import React, { useState } from 'react';
5 |
6 | import Button from './Button';
7 | import { mockedTrending } from '../utils/mockedData';
8 | import Trend from './Trend';
9 |
10 | export default function Trending() {
11 | const [number, setNumber] = useState(2);
12 |
13 | return mockedTrending?.length ? (
14 |
31 |
50 | {title}
51 |
15 |
40 | ) : (
41 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/News.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { AnimatePresence, motion } from 'framer-motion';
4 | import React, { useState } from 'react';
5 | import { ArticleT } from '../types/news';
6 | import Article from './ Article';
7 | import Button from './Button';
8 |
9 | type Props = {
10 | initialResult: ArticleT[];
11 | };
12 |
13 | export default function News({ initialResult }: Props) {
14 | const [articlesNumber, setArticlesNumber] = useState(3);
15 |
16 | return initialResult?.length ? (
17 |
16 |
18 | {mockedTrending.slice(0, number).map((item) => (
19 |
26 |
28 | ))}
29 |
30 |
31 |
39 | Trends for you
17 |
18 |
45 | ) : (
46 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/src/components/Auth.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import React from 'react'
4 | import Link from 'next/link'
5 | import Button from './Button'
6 | import { useSession } from 'next-auth/react'
7 |
8 | export default function Auth() {
9 | const { data: session } = useSession()
10 |
11 | if (session) {
12 | return null
13 | } else {
14 | return (
15 |
19 |
22 | {initialResult.slice(0, articlesNumber).map((article) => (
23 |
30 |
31 |
32 | ))}
33 |
34 |
35 |
36 |
44 | Whats happening
20 | 21 |
16 |
42 | )
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | ```
14 |
15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16 |
17 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
18 |
19 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
20 |
21 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
22 |
23 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
24 |
25 | ## Learn More
26 |
27 | To learn more about Next.js, take a look at the following resources:
28 |
29 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
30 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
31 |
32 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
33 |
34 | ## Deploy on Vercel
35 |
36 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
37 |
38 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
39 |
--------------------------------------------------------------------------------
/src/components/WhoToFollow.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @next/next/no-img-element */
2 | 'use client'
3 |
4 | import React, { useState } from 'react'
5 | import { useSession } from 'next-auth/react'
6 | import Button from './Button'
7 | import RandomUser from './RandomUser'
8 | import { RandomUserT } from '../types/randomUser'
9 | import { AnimatePresence, motion } from 'framer-motion'
10 |
11 | type Props = {
12 | initialResult: RandomUserT[]
13 | }
14 |
15 | export default function WhoToFollow({ initialResult }: Props) {
16 | const [usersNumber, setUsersNumber] = useState(3)
17 | const { data: session } = useSession()
18 |
19 | return initialResult?.length && session ? (
20 |
17 |
18 |
41 |
19 |
22 | Don’t miss what’s happening
20 |People on Twitter are the first to know.
21 |
23 |
40 |
24 |
25 |
30 |
31 |
32 |
37 |
38 |
39 |
21 |
50 | ) : (
51 |
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | './app/**/*.{js,ts,jsx,tsx}',
5 | './pages/**/*.{js,ts,jsx,tsx}',
6 | './components/**/*.{js,ts,jsx,tsx}',
7 |
8 | // Or if using `src` directory:
9 | './src/**/*.{js,ts,jsx,tsx}',
10 | ],
11 | theme: {
12 | extend: {
13 | colors: {
14 | twitterBlue: {
15 | 50: '#F2F9FE',
16 | 100: '#D7EEFB',
17 | 200: '#AED2F6',
18 | 300: '#85B5F1',
19 | 400: '#5897EC',
20 | 500: '#1DA1F2',
21 | 600: '#1678BD',
22 | 700: '#10508A',
23 | 800: '#0A294F',
24 | 900: '#010101',
25 | },
26 |
27 | twitterGray: {
28 | 50: '#F7FAFC',
29 | 100: '#EDF2F7',
30 | 200: '#E2E8F0',
31 | 300: '#CBD5E0',
32 | 400: '#A0AEC0',
33 | 500: '#718096',
34 | 600: '#4A5568',
35 | 700: '#2D3748',
36 | 800: '#1A202C',
37 | 900: '#14171A',
38 | 999: '#34373B',
39 | },
40 | twitterBlack: '#14171A',
41 | twitterWhite: '#F5F8FA',
42 | },
43 | screens: {
44 | ss: '300px',
45 | xs: '320px',
46 | sm: '640px',
47 | md: '768px',
48 | lg: '1024px',
49 | xl: '1280px',
50 | },
51 | },
52 | maxWidth: ({ theme, breakpoints }) => ({
53 | none: 'none',
54 | 0: '0rem',
55 | ss: '19rem',
56 | xs: '20rem',
57 | sm: '24rem',
58 | md: '28rem',
59 | lg: '32rem',
60 | xl: '36rem',
61 | '2xl': '42rem',
62 | '3xl': '48rem',
63 | '4xl': '56rem',
64 | '5xl': '64rem',
65 | '6xl': '72rem',
66 | '7xl': '80rem',
67 | '8xl': '90rem',
68 | '9xl': '95rem',
69 | '10xl': '100rem',
70 | full: '100%',
71 | min: 'min-content',
72 | max: 'max-content',
73 | fit: 'fit-content',
74 | prose: '65ch',
75 | ...breakpoints(theme('screens')),
76 | }),
77 | },
78 | variants: {
79 | lineClamp: ['responsive'],
80 | },
81 | plugins: [],
82 | mode: 'jit',
83 | darkMode: 'class',
84 | }
85 |
--------------------------------------------------------------------------------
/src/pages/api/auth/[...nextauth].tsx:
--------------------------------------------------------------------------------
1 | import NextAuth, { NextAuthOptions } from 'next-auth'
2 | import GoogleProvider from 'next-auth/providers/google'
3 | import FacebookProvider from 'next-auth/providers/facebook'
4 | import GithubProvider from 'next-auth/providers/github'
5 | import TwitterProvider from 'next-auth/providers/twitter'
6 | import Auth0Provider from 'next-auth/providers/auth0'
7 | import AppleProvider from 'next-auth/providers/apple'
8 | import EmailProvider from 'next-auth/providers/email'
9 | import LinkedInProvider from "next-auth/providers/linkedin";
10 |
11 | export const authOptions: NextAuthOptions = {
12 | providers: [
13 | // EmailProvider({
14 | // server: {
15 | // host: process.env.EMAIL_SERVER_HOST,
16 | // port: process.env.EMAIL_SERVER_PORT,
17 | // auth: {
18 | // user: process.env.EMAIL_SERVER_USER,
19 | // pass: process.env.EMAIL_SERVER_PASSWORD,
20 | // },
21 | // },
22 | // from: process.env.EMAIL_FROM,
23 | // }),
24 | // AppleProvider({
25 | // clientId: process.env.APPLE_ID!,
26 | // clientSecret: {
27 | // appleId: process.env.APPLE_ID!,
28 | // teamId: process.env.APPLE_TEAM_ID!,
29 | // privateKey: process.env.APPLE_PRIVATE_KEY!,
30 | // keyId: process.env.APPLE_KEY_ID!,
31 | // },
32 | // }),
33 |
34 | // FacebookProvider({
35 | // clientId: process.env.FACEBOOK_ID!,
36 | // clientSecret: process.env.FACEBOOK_SECRET!,
37 | // }),
38 | GithubProvider({
39 | clientId: process.env.GITHUB_ID!,
40 | clientSecret: process.env.GITHUB_SECRET!,
41 | }),
42 | GoogleProvider({
43 | clientId: process.env.GOOGLE_ID!,
44 | clientSecret: process.env.GOOGLE_SECRET!,
45 | }),
46 | TwitterProvider({
47 | clientId: process.env.TWITTER_ID!,
48 | clientSecret: process.env.TWITTER_SECRET!,
49 | }),
50 | LinkedInProvider({
51 | clientId: process.env.LINKEDIN_ID!,
52 | clientSecret: process.env.LINKEDIN_SECRET!
53 | })
54 | // Auth0Provider({
55 | // clientId: process.env.AUTH0_ID!,
56 | // clientSecret: process.env.AUTH0_SECRET!,
57 | // issuer: process.env.AUTH0_ISSUER,
58 | // }),
59 | ],
60 | theme: {
61 | colorScheme: 'dark',
62 | },
63 | callbacks: {
64 | async jwt({ token }) {
65 | token.userRole = 'admin'
66 | return token
67 | },
68 | },
69 | }
70 |
71 | export default NextAuth(authOptions)
72 |
73 |
--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import { getServerSession } from 'next-auth';
2 |
3 | import '../styles/globals.css';
4 | import Auth from '../components/Auth';
5 | import Sidebar from '../components/Sidebar';
6 | import Widget from '../components/Widget';
7 | import Providers from './Providers';
8 | import Messages from '../components/Messages';
9 | import { ArticleT, NewsApiResponse } from '../types/news';
10 | import { RandomUserT, RandomUserApiResponse } from '../types/randomUser';
11 | import { authOptions } from '@/pages/api/auth/[...nextauth]';
12 | import { Metadata } from 'next';
13 |
14 | const metadata: Metadata = {
15 | title: 'Twitter Clone app',
16 | description: 'Twitter Clone build with + Typescript .',
17 | };
18 |
19 | export default async function RootLayout({ children }: { children: React.ReactNode }) {
20 | // https:saurav.tech/NewsAPI/top-headlines/category/health/in.json
21 | const newsUrl = 'https://saurav.tech/NewsAPI/top-headlines/category/business/us.json';
22 | const randomUserUrl = 'https://randomuser.me/api/?results=30&inc=name,login,picture';
23 | const res = await fetch(newsUrl, { next: { revalidate: 10000 } });
24 | if (!res.ok) {
25 | throw new Error('Failed to fetch data');
26 | }
27 | const data: NewsApiResponse = await res.json();
28 | const articles = data.articles || ([] as ArticleT[]);
29 |
30 | const randomUserResponse = await fetch(randomUserUrl, { next: { revalidate: 10000 } });
31 | const randomUserResult: RandomUserApiResponse = await randomUserResponse.json();
32 | const randomUsers = randomUserResult.results || ([] as RandomUserT[]);
33 |
34 | const session = await getServerSession(authOptions);
35 |
36 | console.log(' session', session);
37 |
38 | return (
39 |
40 |
41 |
22 |
27 | {initialResult.slice(0, usersNumber).map((user) => (
28 |
34 |
36 | ))}
37 |
38 |
39 |
40 |
49 | 23 | Who to follow 24 |
25 | 26 |
43 | {/* Sidebar */}
44 |
55 |
47 | {/*
51 |
52 | {/*
84 |
91 | ) : (
92 | children
93 | )}
94 |
31 |
33 | );
34 | }
35 |
36 | const profileImage = '/images/twitter-banner.jpeg';
37 |
38 | return (
39 | <>
40 | Initializing User...
32 |
41 |
75 |
76 |
42 |
74 |
43 |
57 |
51 |
52 |
56 | {session?.user?.name}
55 |
58 |
66 |
67 |
73 | 68 | {session?.user?.name} 69 |
70 |@{session?.user?.name}
71 |Forever a learner ☀ always growing ☀ Opinions are my own
72 |
46 |
154 | )
155 | }
156 |
--------------------------------------------------------------------------------
/src/components/TweetTemp.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @next/next/no-img-element */
2 | import React from 'react';
3 | import { FaHeart, FaComment, FaRetweet, FaEye, FaShare } from 'react-icons/fa';
4 | import { motion } from 'framer-motion';
5 | import { TweetT, TweetTemp } from '../types/tweets';
6 |
7 | type Props = {
8 | tweet: TweetTemp;
9 | };
10 |
11 | export default function TweetTemp({ tweet }: Props) {
12 | const { user, content, media, timestamp, likes, comments, retweets, views, shares } = tweet;
13 |
14 | const images = media && media.filter((item) => item.type === 'image');
15 | const videos = media && media.filter((item) => item.type === 'video');
16 |
17 | const itemVariants = {
18 | hidden: { opacity: 0, y: -10 },
19 | visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
20 | };
21 |
22 | return (
23 |
49 |
153 |
50 |
51 | {
92 | const email = session?.user?.email || session?.user?.name
93 | const username =
94 | (email && email.substring(0, email.indexOf('@'))) ||
95 | session?.user?.name
96 | router.push(`/${username}`)
97 | }}
98 | />
99 | ) : null}
100 |
128 |
129 | {session ? (
130 |
120 |
123 |
124 | ) : null}
125 | {' '}
126 | {/* Add a placeholder for the profile section */}
127 |
133 |
151 | ) : null}
152 |
142 |
150 |
143 |
146 | {session?.user?.name}
144 |147 | @{session?.user?.name} 148 |
149 |
31 |
116 |
40 |
115 |
41 |
42 | {user.name}
43 |
44 | @{user.username}
45 | ·
46 | {timestamp}
47 |
48 | {content}
49 | 50 | 51 |
52 | {images && (
53 |
92 | 1 ? 'grid-cols-2 gap-4' : 'grid-cols-1'}`}>
54 | {images.map((item, index) => (
55 | item.type === 'image').length === 1 ? 'h-full w-full' : 'h-40 w-full'
64 | } transform cursor-pointer rounded-md object-cover transition duration-300 ease-in-out hover:scale-105`}
65 | />
66 | ))}
67 |
68 | )}
69 |
70 | {videos && (
71 | 1 ? 'grid-cols-2 gap-4' : 'grid-cols-1'} `}>
72 | {videos.map((item, index) => (
73 |
90 | )}
91 |
77 |
87 |
88 | ))}
89 |
93 |
114 |
94 |
97 |
98 |
101 |
102 |
105 |
106 |
109 |
110 |
113 |
52 |
54 | );
55 | }
56 |
57 | return (
58 | <>
59 | Initializing User...
53 |
66 |
158 |
67 |
70 |
80 |
71 |
79 |
81 |
157 | Join Twitter today
82 | 91 | 92 | 101 | 102 | 111 | 112 | 121 | 122 | 131 | 132 |
133 |
146 |
147 | 134 | By signing up, you agree to the 135 | 136 | Terms of Service 137 | 138 |
139 |140 | and 141 | Privacy Policy 142 | , including 143 | Cookie Use. 144 |
145 |
148 | Have an account already?{' '}
149 |
153 | Login
154 |
155 |
156 |
141 |
150 | )
151 | }
152 |
153 | if (!loading && !adminTweets?.length && !tweets?.length) {
154 | return (
155 | Loading...
*/} 149 |
156 |
160 | )
161 | }
162 |
163 | return (
164 | 157 | No tweets found 158 |
159 |
165 |
166 | {(tweets?.length > 0 || adminTweets?.length > 0) && (
167 | <>
168 | {tweets
169 | .filter(
170 | (tweet) => tweet?.userRef !== process.env.NEXT_PUBLIC_ADMIN_REF,
171 | )
172 | .map((tweet) => (
173 |
178 |
180 | ))}
181 | {isAdminRef && adminTweets?.length > 0 && (
182 | <>
183 | {/*
190 |
192 | ))}
193 |
194 | )}
195 |
196 | )}
197 |
198 |
199 | )
200 | }
201 |
--------------------------------------------------------------------------------
/src/app/sign-in/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { useEffect, useState } from 'react';
4 | import Modal from 'react-modal';
5 | import { signIn, signOut, useSession } from 'next-auth/react';
6 | import Link from 'next/link';
7 | import { useRouter } from 'next/navigation';
8 | import { AiFillApple } from 'react-icons/ai';
9 | import { FcGoogle } from 'react-icons/fc';
10 | import Button from '@/components/Button';
11 | import Image from 'next/image';
12 | import { FaGithub, FaTwitter } from 'react-icons/fa';
13 | import { GrLinkedin } from 'react-icons/gr';
14 | import TweetInput from '@/components/TweetInput';
15 | import { Metadata } from 'next';
16 |
17 | const metadata: Metadata = {
18 | title: 'Sign in to Twitter',
19 | description: 'Twitter Clone build with + Typescript .',
20 | };
21 |
22 | export default function SignIn() {
23 | const router = useRouter();
24 | const [isOpen, setIsOpen] = useState(false);
25 | const { data: session, status } = useSession();
26 | const [email, setEmail] = useState('');
27 |
28 | useEffect(() => {
29 | if (session) {
30 | router.push('/');
31 | }
32 | if (status !== 'loading' && !session) {
33 | setIsOpen(true);
34 | }
35 | }, [session, router, status]);
36 |
37 | const switchToLogin = () => {
38 | // setIsOpen(false);
39 | router.push('/');
40 | };
41 |
42 | const handleClick = () => {
43 | // Validate user
44 | // make api call
45 |
46 | // on success
47 | router.push('/');
48 | };
49 |
50 | if (status === 'loading') {
51 | return (
52 | Admin tweets
*/} 184 | {adminTweets.map((tweet) => ( 185 |
53 |
55 | );
56 | }
57 |
58 | const handleSubmit = () => {
59 | if (!email) return false;
60 | signIn('email', { email, redirect: false });
61 | };
62 |
63 | return (
64 | <>
65 | Initializing User...
54 |
72 |
195 |
73 |
76 |
86 |
77 |
85 |
87 |
194 | Sign in to Twitter
88 | 97 | 98 | 107 | 108 | 117 | 118 | 127 | 136 | 137 |
138 |
144 |
145 |
139 |
140 |
143 | or
141 |
142 |
146 | setEmail(e.target.value)}
152 | placeholder='Email'
153 | />
154 |
155 |
156 |
164 |
165 |
168 |
169 |
170 |
183 |
184 | 171 | By signing up, you agree to the 172 | 173 | Terms of Service 174 | 175 |
176 |177 | and 178 | Privacy Policy 179 | , including 180 | Cookie Use. 181 |
182 |
185 | Dont have an account?{' '}
186 |
190 | Sign up
191 |
192 |
193 |
181 |
282 | ) : (
283 |
182 |
198 |
199 |
281 | 183 | Home 184 |
185 |
186 |
197 | 187 | 188 | For you 189 | 190 |
191 |192 | 193 | Following 194 | 195 |
196 |
284 |
295 | )
296 | }
297 |
--------------------------------------------------------------------------------
/src/components/Tweet.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import { FaHeart, FaComment, FaRetweet, FaEye, FaShare } from 'react-icons/fa'
3 | import { motion } from 'framer-motion'
4 | import Moment from 'moment'
5 | import { db } from '@/config/firebase'
6 | import { doc, getDoc, updateDoc } from 'firebase/firestore'
7 | import { useSession } from 'next-auth/react'
8 | import { toast } from 'react-hot-toast'
9 | import { TweetT } from '../types/tweets'
10 | import Button from './Button'
11 | import Comments from './Comments'
12 |
13 | type Props = {
14 | tweet: TweetT
15 | }
16 |
17 | const itemVariants = {
18 | hidden: { opacity: 0, y: -10 },
19 | visible: { opacity: 1, y: 0, transition: { duration: 0.1 } },
20 | }
21 | export default function Tweet({ tweet }: Props) {
22 | const { user, content, id, timestamp, title, images, likes } = tweet
23 | const { data: session } = useSession()
24 | const [commentText, setCommentText] = useState('')
25 | const [commentBoxVisible, setCommentBoxVisible] = useState285 | Explore 286 |
287 | 288 | 289 |
165 |
312 |
313 | {tweet?.comments && tweet?.comments?.length > 0 ? (
314 |
166 |
311 |
175 |
310 |
176 |
181 | {user.name}
182 |
183 | @{user.name}
184 | ·
185 |
186 | {timestamp?.seconds && (
187 |
188 | {Moment.unix(timestamp?.seconds).fromNow()}
189 |
190 | )}
191 |
192 | {content}
193 | 194 |
195 | {images && (
196 |
244 |
245 | 1 ? 'grid-cols-2 gap-4' : 'grid-cols-1'
199 | }`}>
200 | {images.map((item, index) => (
201 |
216 | )}
217 |
218 | {videos && (
219 | 1 ? 'grid-cols-2 gap-4' : 'grid-cols-1'
222 | } `}>
223 | {videos.map((item, index) => (
224 |
242 | )}
243 |
227 |
239 |
240 | ))}
241 |
246 |
286 |
287 | {commentBoxVisible ? (
288 |
308 | ) : null}
309 |
247 | {
254 | if (tweet.id && session) {
255 | handleLike(tweet)
256 | }
257 | }}
258 | />
259 |
260 | {tweet?.likes && tweet?.likes?.length > 0
261 | ? tweet?.likes.length
262 | : ''}
263 |
264 |
265 |
268 | session && setCommentBoxVisible(!commentBoxVisible)
269 | }>
270 |
273 |
274 |
277 |
278 |
281 |
282 |
285 |