Medium Clone

Medium Clone

This is a Medium Clone that represents basic functionality - add a post, manage a post, comment on a post. The project is built with SanityCMS for a backend server and it is using Next.js Incremental Static Regeneration (ISR) that enables you to use static-generation on a per-page basis, without needing to rebuild the entire site. The project is typed in TypeScript and styled with TailwindCSS.
Explore the docs »

View Demo · Report Bug · Request Feature

Medium-Clone

Built With

• SanityCMS
• React.js
• Next.js
• Incremental Static Regeneration
• TypeScript.js
• TailwindCSS

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

Installation

1. Register to Sanity.io and get a free API Key at Key
2. Clone the repo

   git clone https://github.com/snowleopardAlexa/medium-clone.git
   

3. Install NPM packages

   npm install
   

4. Create local .env file and enter your API key there.

   const API_KEY = 'ENTER YOUR API';
   

Dependencies

• @sanity/image-url": "^1.0.1",
• next": "latest",
• next-sanity": "^0.5.1",
• react": "^17.0.2",
• react-dom": "^17.0.2",
• react-hook-form": "^7.28.0",
• react-portable-text": "^0.4.3"

(back to top)

Usage

This project can be used as a personal blog. You will be able to add posts, manage posts, and control comments sections under the posts. Everyone on the Internet will be able to comment your posts, but you can delete users comments at any moment while using Sanity Content Management System (CMS). You must register with SanityCMS and create your own API key in order to use this code. You can customize posts in your SanityCMS account. You can change the post title, description, and upload different photo. This is a frontend code that you can use for your needs.

For more examples, please refer to the Documentation

(back to top)

Roadmap

• Setting up Next.js, TailwindCSS and SanityCMS
• Building Header Component
• Implementing SanityCMS
• Implementing Next.js Server Side Rendering
• Implementing Posts Component
• Linking to Post Page
• Building Post Page
• Implementing Comments Functionality
• Deploying to Vercel

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

None

(back to top)

Contact

Aleksandra Slomska - aleksandravslomska@gmail.com

Project Link: https://github.com/snowleopardAlexa/medium-clone

(back to top)