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

Related tags

Learning resource javascript typescript reactjs nextjs sanity tailwind
Overview

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

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

  1. 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).

You might also like...

Next.js starter with TypeScript, Supabase and TailwindCSS

Next.js starter with TypeScript, Supabase and TailwindCSS

This project is a Next.js starter with: TypeScript Supabase TailwindCSS It is basically what is presented in the Supabase + Next.js quickstart, just w

Dec 24, 2022

An alternative YouTube frontend built with Next.js, TailwindCSS, and TypeScript.

An alternative YouTube frontend built with Next.js, TailwindCSS, and TypeScript.

Invideo Invideo is an alternative YouTube frontend. Tools & Tech It's built with Next.js, TypeScript, and TailwindCSS. Where does Invideo get the data

Sep 22, 2022

A Single Page Application featuring a medium fidelity wireframe of a to-do-list app that stores tasks that are added and which can be deleted. The tasks can be checked, unchecked or edited. Built mainly with JavaScript and strict ES6 features. Bundled with webpack.

To-Do-List In this "To-Do-List" project, I created the basic structure of a page single page application with HTML, CSS and javascript, using the webp

Oct 7, 2022

Decentralized twitter using Solidity, Ethereum, hardhat, ethers, IPFS, Next.JS, TypeScript, TailwindCSS.

DWITTER: Decentralized Twitter Check out the deployed version of this app at https://dwtr.wajeshubham.in Transactions on Ethereum are slow. Therefore,

Sep 2, 2022

Read Medium content without limit!

Read Medium content without limit!

Medium Unlocker Read Medium content without limit! Aka replacer for Medium Unlimited. Get more information Please visit Wiki page Features Unlock grap

Dec 24, 2022

Simple Rest API to retrieve medium stats of a user's stories.

Simple Rest API to retrieve medium stats of a user's stories.

Advanced Medium API Contents Overview API Details Medium feed in JSON Medium Advanced Data Medium Customized Data Medium Customized Advanced Data Miss

Jun 5, 2022

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. This is a project for learning purposes which I'll practice medium-fidelity wireframes to create a UI.

Leaderboard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved tha

Aug 4, 2022

A progressive image loading library. Inspired by Medium’s similar technique.

A progressive image loading library. Inspired by Medium’s similar technique.

Blurry Image Load Synopsis A lightweight, zero-dependency library that loads images on demand. Until the images are loaded, a very small version of ea

Dec 10, 2022

LinkedIn-Clone - a LinkedIn clone with firebase, redux and styled components

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Jan 3, 2022
Comments
  • this error comes when I tried your clone and edited it

    this error comes when I tried your clone and edited it

    Server Error Error: You must either:

    • Pass projectId and dataset to the block renderer
    • Materialize images to include the url field.

    For more information, see https://docs.sanity.io/help/block-content-image-materializing This error happened while generating the page. Any console logs will be displayed in the terminal window.

    opened by shlok2740 2
Owner
argikurnia
argikurnia
GitHub
Stablo is a minimal blog website template built with Next.js, TailwindCSS & Sanity CMS

Stablo Blog Template - Next.js & Sanity CMS Stablo is a JAMStack Starter template built with Next.js, Tailwind CSS & Sanity CMS by Web3Templates. Clic

Web3Templates 159 Dec 30, 2022
Rede social baseada no ShareMe para compartilhamento e download de fotos em React,Sanity.io e TailWindCSS

Photophan ?? Descrição phothopan é uma rede social para o compartilhamento e download de imagens,foi desenvolvida utilizando React(Frontend),Sanity(Ba

Bruno Ariel 2 Jan 8, 2022
My personal website – Built using Next.js, TypeScript, MDX, Sanity.io and Tailwind

kenaqshal.com Framework: Next.js Database: PlanetScale ORM: Prisma Authentication: NextAuth.js Deployment: Vercel CMS: Sanity Styling: Tailwind CSS Ov

Ken Aqshal Bramasta 6 Nov 24, 2022
Twitter-Clone (For Learning Purpose) made with Next.js,Firebase,TailwindCss

Project Name : Twitter-Clone This is a clone of Twitter . This build is for learning purpose only. Technology Used To Build This How it look's Some im

Ankit Singh 8 Oct 4, 2022
This is the repo for the Medium2 project with Next.js, Sanity CMS, React and Tailwind CSS

Next.js + Tailwind CSS Example This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind

null 1 Jan 22, 2022
Generate social preview images in your Next.js API from Sanity webhooks

sanity-next-social-image-generator Automatically generate social share images using Sanity webhooks, and your Next.js API! Requirements A Next.js appl

Jordan McRae 9 Sep 4, 2022
This is my portfolio GitHub clone website. The frontend is build using NextJS and TailwindCSS.

Github Clone Portfolio Website Tech Stack used: NextJS Tailwind CSS The contact form in this website is connected to Notion. If you want to integrate

Unnati Bamania 22 Oct 5, 2022
Windows 11 clone made with 💛 using NextJS and TailwindCSS by Vishwa Gaurav.

Windows 11 Windows 11 made with ?? using NextJS and TailwindCSS by Vishwa Gaurav. ScreenShots *In Development Mode Our Social Links PageSpeed Insights

Vishwa Gaurav 29 Nov 9, 2022
This is a clone of Instagram built with NextJS, TailwindCSS, NextAuthJS and Firebase

Instagram This is a clone of instagram built with: This application is completely functional and responsive. Users can Sign in straightaway with Googl

Nutifafa Afi Attor 13 Sep 2, 2022
Student reviews for OMS courses. Built with NextJS and Typescript. Backed by Sanity CMS. Deployed on Vercel.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

OMS Tech 27 Dec 3, 2022