Medium Clone with NEXT.JS, TypeScript, Sanity CMS, React, Tailwind CSS, and ISR

This repository contains the code and instructions for creating a Medium clone using modern web technologies. We'll be using NEXT.JS, TypeScript, Sanity CMS, React, Tailwind CSS, and Incremental Static Regeneration (ISR) to build a feature-rich blogging platform.

Table of Contents

• Prerequisites
• Getting Started
• Project Structure
• Configuration
• Development
• Production
• Deployment
• Contributing
• License

Prerequisites

Before you get started, make sure you have the following tools and software installed on your computer:

• Node.js
• npm or Yarn
• Sanity CLI
• Git

Getting Started

1. Clone this repository to your local machine:

   git clone https://github.com/codekaito/nextjs-medium.git
   cd nextjs-medium
   

2. Install project dependencies:

   npm install
   # or
   yarn install
   

3. Create a .env.local file in the root directory and configure your environment variables:

   SANITY_PROJECT_ID=your-sanity-project-id
   SANITY_DATASET=your-sanity-dataset-name
   

4. Set up your Sanity CMS project by running:

   sanity init
   

   Follow the prompts to create a new Sanity project or connect to an existing one.

5. Start the development server:

   npm run dev
   # or
   yarn dev
   

6. Open your browser and go to http://localhost:3000 to see your Medium clone in action.

Project Structure

The project structure is organized as follows:

• components/: React components used throughout the application.
• pages/: Next.js pages for routing.
• public/: Static assets like images, fonts, and icons.
• styles/: CSS and SCSS stylesheets.
• lib/: Helper functions and utilities.
• sanity/: Configuration for Sanity CMS.
• schema/: Sanity schema definitions.
• studio/: Sanity Studio configuration.

Configuration

You can customize the project by modifying the configuration files:

• sanity/sanity.json: Sanity CMS configuration.
• schema/: Define your content schema in Sanity.
• tailwind.config.js: Tailwind CSS configuration.
• next.config.js: Next.js configuration, including ISR settings.

Development

During development, you can run the application with hot-reloading using:

npm run dev
# or
yarn dev

This will start the development server, and you can view your changes in real-time.

Production

To build the production version of your Medium clone, run:

npm run build
# or
yarn build

This command will generate a production-ready build of your application.

Deployment

You can deploy your Medium clone to your preferred hosting platform. Here are some common options:

• Vercel
• Netlify
• AWS Amplify

Follow the deployment instructions for your chosen platform to get your Medium clone live on the internet.

Contributing

Contributions to this project are welcome! If you find issues or have ideas for improvements, please open an issue or submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Happy coding! Enjoy building your Medium clone with NEXT.JS, TypeScript, Sanity CMS, React, Tailwind CSS, and ISR. If you have any questions or need further assistance, feel free to reach out.