antonioerdeljac/twitter-clone

Build and Deploy: TWITTER clone with React, Tailwind, Next, Prisma, Mongo, NextAuth & Vercel (2023)

This is a repository for a FullStack Twitter clone tutorial using React, NextJS, TailwindCSS & Prisma.

VIDEO TUTORIAL

DOCKER VERSION by mandeepsingh10

We are going to learn funcionalities such as:

• Authentication system
• Notification system
• Image Upload using Base64 strings
• Prisma ORM with MongoDB
• Responsive Layout
• 1 To Many Relations (User - Post)
• Many To Many Relations (Post - Comment)
• Following functionality
• Comments / Replies
• Likes functionality
• Vercel Deployment

Prerequisites

Node version 14.x

Cloning the repository

git clone https://github.com/AntonioErdeljac/twitter-clone.git

Install packages

npm i

Setup .env file

DATABASE_URL=
NEXTAUTH_JWT_SECRET=
NEXTAUTH_SECRET=

Start the app

npm run dev

Available commands

Running commands with npm npm run [command]

command	description
dev	Starts a development instance of the app

twitter-clone's Issues

Quick question on atlas database url

For the value DATABASE_URL is the correct url look like this?

mongodb+srv://user:[email protected]/?retryWrites=true&w=majority

Error fetching the current user in Sidebar.tsx

In below code (Sidebar.tsx) when i try to use useCurrentUser(); hook getting error:

./node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js:43:0
Module not found: Can't resolve 'mock-aws-s3'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@mapbox/node-pre-gyp/lib/ sync ^\.\/.*$
./node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js
./node_modules/bcrypt/bcrypt.js
./app/api/auth/[...nextauth]/route.ts
./app/libs/serverAuth.ts
./app/libs/index.ts
./app/hooks/useCurrentUser.ts
./app/components/sidebar/Sidebar.tsx

Sidebar.tsx ==>

'use client';

import React from 'react';
import { IoHomeOutline, IoNotificationsOutline, IoBookmarkOutline, IoPersonOutline, IoLogOutOutline } from 'react-icons/io5';
import { BsTwitter } from 'react-icons/bs';
import SidebarItem from './SidebarItem';
import SidebarButton from './SidebarButton';
import useCurrentUser from '@/app/hooks/useCurrentUser';

const Sidebar = () => {

    const { data: user, isLoading } = useCurrentUser();


    const items = [
        {
            id: 1,
            title: 'Home',
            href: '/',
            icon: IoHomeOutline
        },
        {
            id: 2,
            title: 'Notifications',
            href: '/notifications',
            icon: IoNotificationsOutline
        },
        {
            id: 3,
            title: 'Bookmarks',
            href: '/bookmarks',
            icon: IoBookmarkOutline
        },
        {
            id: 4,
            title: 'Profile',
            href: '/users/124',
            icon: IoPersonOutline
        },
    ]

    return (
        <div className='col-span-1 h-full pr-4 md:pr-6'>
            <div className='flex flex-col items-end'>
                <div className='space-y-2 lg:w-[230px]'>
                    <div className='flex items-start py-2'>
                        <div className='flex items-center justify-start w-14'>
                            <div className='hover:bg-blue-500 transition text-white hover:text-sky-500 hover:bg-opacity-10 cursor-pointer rounded-full p-3 lg:ml-2'>
                                <BsTwitter className='cursor-pointer w-6 h-6' />
                            </div>
                        </div>
                    </div>
                    <div className='flex flex-col items-start w-full space-y-2'>
                        {items?.map((item) => (
                            <SidebarItem
                                key={item.id}
                                href={item.href}
                                title={item.title}
                                icon={item.icon}
                            />
                        ))}
                        <SidebarItem
                            title='Logout'
                            icon={IoLogOutOutline}
                            onClick={() => { }}
                            rotate
                        />
                        <SidebarButton />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Sidebar

Please help me out!!

delete request returns error

I get an error when I am trying to delete a like on a post or when I want to unfollow someone I followed
whenever I use axios .delete("/api/url", {data: {id}) the request always fails and it does not work

and I have copy and pasted the code from this repo and it still doesnt work

Constant 500 errors

Hi, thanks for the project, when i cloned the project from github, set up mongodb and all but when i try to sign up it throws error 500. When i look into terminal this is the error that is thrown all the time
error - TypeError: Cannot read properties of undefined (reading 'enumTypes')

Error in Follow API

In /pages/api/follow.ts file, line 22 it should fetch currentUser.id instead of userId.

Then POST | DELETE the userId to follwingIds array of currentUser i.e updatedFollowingIds

Then updating currentUser's followingIds with updatedFollowingIds which consist current followed userId

issue in deploying project to vercel

I just followed the complete tutorial, yet at the moment of deploying to Vercel, though there are no technical errors, the app doesn't connect to the Atlas cluster so it never fetches nor retrieve any of the existing users. Also whenever you try to register a new user there is an error. The twitter clone app works perfectly on localhost:3000 but seems there is an issue between Vercel and Atlas. Any suggestion?

Comments and Notifications Not WORK !?

I have done with the tutorial and all the parts working well, except Comments and Notifications!
(you can see my hole repo)

When I tweet a comment under a specific post, "Success" popup shown, and the comment and all its data saved to DB . But it doesn't shown on the commentsFeed of that post.

My console.log-s in the api parts, show the hole data about that given comment, but my clientside ( 'pages/posts/[postId].tsx' ) console.log(fetchedPost) which distructured from usePost() hook, have an empty comments field!

This situation also happens with my notifications part , I got that blue DOT on the sidebar, and the messages in the terminal, but they didn't show on the notificationFeed!

I will be so thankfull because of any help to fix this issue or guide me to reach the bug to find the problem!

Weird error

So whenever I try to sign in to an account I already created, it gives me an error page. I'm not sure what the problem is

Error
localhost:3000

Strange bug

Whenever I try to follow a user it unfollows the first I followed