TWITTER clone with React, Express, Tailwind, Next, MongoDB, Vercel

Demo

Getting Started

First, install the dependencies, by running this command in the root directory:

npm i

Second, Fill in the environment variables in the .env file in the frontend and backend folders respectively:

• Connect to your MongoDB database and add the connection string to the DB_URL variable, in the backend .env file
• Fill the Mail variables with your mail credentials, in the backend .env file
• Create a Cloudinary account and add your credentials to the CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY, and CLOUDINARY_API_SECRET variables Tutorial Link
  • Add the NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME variable to the frontend .env file
  • make sure that you create an unsigned upload preset and update the uploadPreset variable in the ShareSprint/frontend/components/ImageUpload.tsx file with it Note: The app won't work without the couldinary credentials

Third, you can run the application both the frontend and the backend concurrently, in development mode by running:

npm run build; npm run dev

Open http://localhost:3000 with your browser to see the result.

Key Features

• Fullstack fully functional Social Media App
• Standalone REST API with scalable good architecture using Express
• Fully functional frontend with Next and React
• Authentication system with email verification
• Notifications and alerts
• Tailwind design for sleek UI
• Tailwind animations and transition effects
• Server error handling with react-toast
• Notification system
• Full responsiveness for all devices
• Image handling with Cloudinary CDN
• 1 To Many Relations (User - Post)
• Many To Many Relations (Post - Comment)
• Following functionality
• Comments / Replies
• Likes functionality
• Managing global state using Redux
• Vercel Deployment
• Dockerized