Twitter 2.0 with REACT.JS! (Next.js, Sanity CMS, Typescript, SSR, Tailwind)

Overview

Twitter 2.0 with REACT.JS!

🔴 LIVE DEMO

PREREQUISITES:

  • Install Node JS in your computer HERE
  • Sanity HERE

Google Google


This project was bootstrapped with Create React App.

Available Scripts

project name? twitter-clone

cd twitter-clone

Install Tailwind CSS with Next.js

Install Tailwind CSS

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./styles/globals.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

This is a Next.js project bootstrapped with create-next-app.

First, run the development server:

npm run dev
# or
yarn dev

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

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

npm i @heroicons/react
npm i react-timeago
npm i next-sanity
npm i react-hot-toast
npm i react-twitter-embed
npm i tailwind-scrollbar-hide
npm i @portabletext/react

image

Don't forget to leave a star ⭐️
You might also like...
🕊 Twitter Clone with React, Firebase
🕊 Twitter Clone with React, Firebase

🕊 Twitter Clone with React, Firebase

Visual of the Home page of Twitter done with React JS

As I can't show the code of my real projects, I cloned the Home Page of Twitter in about 2 days using ReactJS and pure CSS. Feel free to check the cod

One more Twitter clone, but this one is featureful yet concise and fast, built with MERN stack, with love ❤.
One more Twitter clone, but this one is featureful yet concise and fast, built with MERN stack, with love ❤.

React front-end for tclone Try it here back-end repo here looks like twitter, but not 😊 It is my own take on building Twitter clone, I have tried to

Api server for Tclone, a concise, fast, and feature rich Twitter clone built with MERN stack.

Api server for tclone Try the app here React frontend repo here This project is my own take on building Twitter clone, I have tried to keep things sim

A Twitter-style app built using Solana and Arweave.

Space Cats DAO A Twitter-style app built using Solana and Arweave. Disclaimer This was built for learning/experimental purposes. The code is not neces

Education+Twitter. Post flashcards and like other people's cards.

Education+Twitter. Post flashcards and like other people's cards. Explore cards other people have posted and add them to your profile.

Render URL links for Web & Twitter previews
Render URL links for Web & Twitter previews

expo-link-preview Render URL links for Web & Twitter previews Built with react-native using expo.

Decentralized Twitter with NFT profile picture and tipping on tweets functionality.

= For the Walkthrough of the Application Please Look at Screenshots Web3 Twitter Technology Stack & Tools Solidity (Writing Smart Contract) Javascript

A plateform made for sharing static files with dynamic routing. Made using Express, React SSR, JWT, MySQL.

XeCours A plateform made for sharing static files with dynamic routing. Made using Express, React SSR, JWT, MySQL.

NFT DROP React.js (Minting NFT's with thirdweb, Sanity, Next.js, Tailwind, TS)

NFT DROP React.js ?? LIVE DEMO PREREQUISITES: Install Node JS in your computer HERE MetaMask HERE Sanity HERE thirdweb HERE This project was bootstrap

Sashen Jayathilaka 15 Dec 3, 2022
Medium-clone - Medium-Clone with Next.JS, Typescript, Tailwindcss, and Sanity

Medium Clone ?? Overview /pages ✔️ pages/index.tsx = Homepage and list all Blogs

argikurnia 23 Nov 16, 2022
Twitter clone developed in typescript and react.

Twitter - User Feed (Clone) ?? Descrição O Twitter, é uma das maiores rede sociais atualmente . Para o desenvolvimento do clone, foi utilizado typescr

Guilherme Nono 8 Nov 22, 2022
⭐ A non-SSR React starter with TypeScript / No Redux repo with the aim to implement scalable gold star standards from the get go!

A React starter repo with the aim to implement "scalable gold star" standards from the get go giving some examples with a couple of screens.

Kenneth* 4 Aug 22, 2022
Look it is a web application developed with React JS and using Sanity.

Look it is a web application developed with React JS and using Sanity. This application consists in a social media app where you can share your photos with other people who already has registered in the app.

Irmin 1 Feb 1, 2022
Modern Full Stack ECommerce Application with Stripe & Sanity

Modern Full Stack ECommerce Application with Stripe & Sanity If you want to visit the Live application, Click eCommerce-sanity-stripe. Build and Deplo

Kishankumar Patel 23 Sep 3, 2022
Most advanced open-source Headless CMS built in NodeJS and React. Written in Typescript!

Burdy The most powerful and flexible open-source headless cms. We took the inspiration from WordPress plugin system (hooks and actions) and have built

Burdy.io 222 Dec 3, 2022
Payload - A free and open-source TypeScript headless CMS & application framework built with Express, MongoDB and React.

Payload A free and open-source TypeScript headless CMS & application framework built with Express, MongoDB and React. Features Completely free and ope

null 2 Aug 28, 2022
Twitter Clone built using React, Firebase, Material UI and React Flip Move.

Twitter Clone with ReactJS You can send a simple tweet in this app. Twitter Clone Demo Link click me for demo. Topics Material UI React Flip Move Auth

Mert Çankaya 15 Sep 19, 2022
The project is a twitter clone. React technology, React Router (Code Splitting), Sass.

The project is a twitter clone. React technology, React Router (Code Splitting), Sass. Helmet is used as npm package. The goal is to show the title of that page in the header when switching between pages. Waiting for your feedback.

Melisa Demirparmak 13 Aug 29, 2022