Twitter-Clone

# Twitter-Clone with REACT.JS!

Twitter-Clone with REACT.JS! (Next.js, Sanity CMS, Typescript, SSR, Tailwind, NextAuth, Dark Mode & Light Mode)

     

View Demo · Documentation · Report Bug · Request Feature

</div>
## :notebook_with_decorative_cover: Table of Contents - [About the Project](#star2-about-the-project) * [Screenshots](#camera-screenshots) * [Tech Stack](#space_invader-tech-stack) - [Getting Started](#toolbox-getting-started) * [Prerequisites](#bangbang-prerequisites) * [Environment Variables](#key-environment-variables) * [Installation](#gear-installation) * [Run Locally](#running-run-locally) * [Deployment](#triangular_flag_on_post-deployment) - [Contact](#handshake-contact) ## :star2: About the Project ### :camera: Screenshots

## LIVE DEMO 💥    ### :space_invader: Tech Stack

Client

• Typescript
• Next.js
• React.js
• TailwindCSS

Database

• Sanity

    ## :toolbox: Getting Started ### :bangbang: Prerequisites - Sign up for a Sanity account HERE - Install Node JS in your computer HERE ### :key: Environment Variables To run this project, you will need to add the following environment variables to your .env file `NEXT_PUBLIC_SANITY_DATASET` `NEXT_PUBLIC_SANITY_PROJECT_ID` `SANITY_API_TOKEN` `NEXT_PUBLIC_BASE_URL` `NEXTAUTH_SECRET` `NEXTAUTH_URL` `GOOGLE_CLIENT_ID` `GOOGLE_CLIENT_SECRET` `GITHUB_ID` `GITHUB_SECRET` This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). ### :gear: Installation   Install my-project with npm ``` npx create-next-app@latest my-project --typescript --eslint ``` ``` cd my-project ``` Install dependencies ### :test_tube: 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.
``` /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx,mdx}", "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", // Or if using `src` directory: "./src/**/*.{js,ts,jsx,tsx,mdx}", ], 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; ``` Install dependencies 🔶 Dependency Info ### :running: Run Locally Clone the project ```bash git clone https://github.com/Ash1shh/Twitter-Clone.git ``` Change Directory ```bash cd Twitter-Clone ``` Install dependencies ```bash npm install ``` Start the server ```bash npm run dev ``` 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). Open [http://localhost:3000](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](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.js`. 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. ### Learn More To learn more about Next.js, take a look at the following resources: - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! ## :triangular_flag_on_post: Deployment To deploy this project run ##### Deploy on Vercel  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. Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. ## :handshake: Contact Ashish - [@twitter pluto0p](https://twitter.com/pluto0p) - Ashishchandra8328@gmail.com

---

If you find what you see appealing, please feel free to give this repository a ⭐ star.😉
appreciate you!

This site is open source. Improve this page.