An website with similar functionality like medium
Explore the docs »

View Demo · Report Bug · Request Feature

This is a Medium clone, following are the features, I tried to mimic few features from the medium. Here's are the features:

• User Authentication using JWT.
• Displaying the global feed and tags for the website visitor.
• Website visitors can read all the articles posted by the authors.
• Tags functionality, it will sort all the global feed articles.
• Authorized users can only post new articles.
• Authorized user can only edit, delete his own articles.
• Logged in user can edit his settings, can view his own profile.

A list of commonly used resources that I find helpful are listed in the acknowledgments.

frameworks, tech stack used to build this project,are:

• MongoDB
• Express
• Node
• React
• firebase

• Live Project

This is an example of how to list things you need to use the software and how to install them.

• npm

  npm install npm@latest -g

1. Clone the repo

   git clone https://github.com/palacharlanarendra/medium-API-clone

2. Install NPM packages

   npm install

3. Enter the 'npm start' to run the project

   npm start or PORT=3000 npm start

To get a better idea about this project, follow my instructions (How to use?)

1. Enter the 'npm start' to run the project, Run the react project on the default link http://localhost:3000/ or click on the Live Link: https://medium-clone-ce4f5.web.app
2. Navigate to the signup page and try to register with your own credentials.
3. Navigate to the Sign-in link in the navigation bar and enter the credentials, so that you can register/login into the app. you can use the following credentials, if you are unable to register.

   email id : nari@gmail.com
   password : asdf1234

4. Once you logged into the website, you can be able to access the private header links like write-a-story(add new post), settings, profile.
5. if you access the write-a-story link, you can add new article to the website. this submitted artice will be displayed in the global feed. you can even sort and view the articles based on the tags.
   6.you can change your profile picture , password, bio, username, email from the update settings page.
   7.You can see the all articles posted by the user, and he only have the access to edit(article content) and delete the articles.
   8.user can signout by clicking the signout button, at the top-right corner of the header, then he will be rediredted to the home page.

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

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

Project's backend code is available in the Api_backend folder in the same repo, All the end points are provided here for the API manual testing.

Api deployed over here BASE URL.

You can read the authentication header from the headers of the request

Authorization: Token jwt.token.here

POST /api/users/login

Example request body:

{
  "user":{Auth
    "email": "[email protected]",
    "password": "jakejake"
  }
}

No authentication required, returns a User

Required fields: email, password

POST /api/users

Example request body:

{
  "user":{
    "username": "Jacob",
    "email": "[email protected]",
    "password": "jakejake"
  }
}

No authentication required, returns a User

Required fields: email, username, password

GET /api/user

Authentication required, returns a User that's the current user

PUT /api/user

Example request body:

{
  "user":{
    "email": "[email protected]",
    "bio": "I like to skateboard",
    "image": "https://i.stack.imgur.com/xHWG8.jpg"
  }
}

Authentication required, returns the User Accepted fields: email, username, password, image, bio

GET /api/profiles/:username

Authentication optional, returns a Profile

POST /api/profiles/:username/follow

Authentication required, returns a Profile

No additional parameters required

DELETE /api/profiles/:username/follow

Authentication required, returns a Profile

No additional parameters required

GET /api/articles

Returns most recent articles globally by default, provide tag, author or favorited query parameter to filter results

Query Parameters:

Filter by tag:

?tag=AngularJS

Filter by author:

?author=jake

Favorited by user:

?favorited=jake

Limit number of articles (default is 20):

?limit=20

Offset/skip number of articles (default is 0):

?offset=0

Authentication optional, will return multiple articles, ordered by most recent first

GET /api/articles/feed

Can also take limit and offset query parameters like List Articles

Authentication required, will return multiple articles created by followed users, ordered by most recent first.

GET /api/articles/:slug

No authentication required, will return single article

POST /api/articles

Example request body:

{
  "article": {
    "title": "How to train your dragon",
    "description": "Ever wonder how?",
    "body": "You have to believe",
    "tagList": ["reactjs", "angularjs", "dragons"]
  }
}

Authentication required, will return an Article

Required fields: title, description, body

Optional fields: tagList as an array of Strings

PUT /api/articles/:slug

Example request body:

{
  "article": {
    "title": "Did you train your dragon?"
  }
}

Authentication required, returns the updated Article

Optional fields: title, description, body

The slug also gets updated when the title is changed

DELETE /api/articles/:slug

Authentication required

GET /api/tags

No authentication required, returns a List of Tags

Your Name - @your_twitter - [email protected]

Project Link: https://github.com/palacharlanarendra/medium-API-clone

Live Link: https://medium-clone-ce4f5.web.app

• Deployment
• GitHub Pages
• Font Awesome
• MongoDB
• Express
• Node
• React