August 11, 2023

Medium-Clone with Next.JS, Typescript, Tailwindcss, and Sanity

Medium Clone

📌 Overview

/pages

✔️ pages/index.tsx = Homepage and list all Blogs
✔️ pages/post/[slug].tsx = Details Blog

/pages/api

✔️ pages/api/createComment.ts = API createComment that store data to sanity studio

🛠 Get started

Getting the API Keys

Create an .env.local and follow the name .env.example and get the API Keys based on the steps below

Sanity API KEYS


1. Create a Sanity account
2. Create new project
3. npm install -g @sanity/cli && sanity init
4. After you create new project, Go to your project, you will see the PROJECT ID at the top
![](https://res.cloudinary.com/di3zoiucb/image/upload/v1643897288/clone/sanity-projectid_mmrn57.png) 5. After that you need to go to -> API -> TOKENS -> ADD API TOKEN -> ENTER YOUR PROJECT NAME -> CHOOSE THE ACCESS PRIVILEGES FOR THE TOKEN(PERMISSIONS) -> CHANGE PERMISSIONS TO EDITOR ![](https://res.cloudinary.com/di3zoiucb/image/upload/v1643897298/clone/sanity-api-tokens_1_xac809.png) ![](https://res.cloudinary.com/di3zoiucb/image/upload/v1643945421/clone/sanity-api-tokens_2_rdewle.png) 6. Put it into the environment variables according to `.env.example` and you're all set!

Deploy your own

Deploy the example using Vercel:

Deploy with Vercel

⚙ Tech Stack

  • Javascript
  • ReactJS
  • NextJS
  • Typescript
  • TailwindCSS
  • Sanity

Starting the Project

Install the dependencies with npm i or yarn
Start the project by npm run dev or yarn dev

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app

Deploy it to the cloud with Vercel (Documentation).