Build a Medium
adjacent blog

Build a Medium.com like blog –

TL;DR: In this article we are going to build a Medium.com clone using these technologies:

• Reactjs
• Redux
• Nodejs
• Cloudinary
• MongoDB
• Expressjs

Before we get started, I hope you have fundamental knowledge in the techs list above. OK, lets go through some core tech definitions.

Source code

You can get the source code of the app we will build here and demo here.

What is Reactjs?

Reactjs is a Component-based JavaScript library built by Facebook.
Open-sourced by Facebook in 2013, it has been met with excitement from a wide community of developers. Corporate adopters have included the likes of Netflix, Yahoo!, Github, and Codecademy.

Devs have praised React for its:

• Performance
• Flexibility
• Declarative, component-based approach to UI

React was designed for the needs of Facebook’s development team, and is therefore suited particularly well to complex web applications that deal heavily with user interaction and changing data.

What is Node.js?

Nodejs is a server-side framework based on JavaScript built by Ryan Dahl in 2009. One of the great qualities of Node is its simplicity. Unlike PHP or ASP, there is no separation between the web server and code, nor do we have to customize large configuration files to get the behavior we want. With Node, we can create the web server, customize it, and deliver content. All this can be done at the code level.

Environment Setup

Before we begin, we are going to go thorugh this article in two stages:

1. Server setup
2. Client setup

The app consist of backend and frontend, the frontend will be built using React and Redux and the backend, Expressjs and Nodejs. So, we will build our backend in the Server setup section and frontend in the Client setup section.

Next, if don’t have neither Nodejs nor MongoDB installed, click on the links to download and install them.

Alright, let’s begin with our server.

We are going to use create-react-app to scaffold our project:

 

Then, run create-react-app medium-clone to generate pur project folder. create-react-app will install both react and react-dom libraries for us.

After this our folder would look this:

 

We are going to setup or server inside this folder. Go ahead and run the following commands to scaffold our server:

 

Here, we moved into our project folder, and created our server folder.

Server setup

We are going to install dependencies we need:

• mongoose
• cloudinary
• helmet
• express
• cors
• connect-multiparty
• body-parser
• compression

npm i mongoose cloudinary helmet express cors connect-multiparty body-parser compression -

open integrated terminal in VScode

To begin coding our backend, we are going to use best practices, and they require we split our code into folders and files according to a general work.

• Controllers: This will be responsible for our server actions.
• Models: This will hold all our app’s database Schemas and Models.
• Routes: This will hold our routes.

Go ahead and scaffold the following folders and files:

 

Create Models

We will start by creating our database Schemas. Note, we are using mongoose, a MongoDB connection utility. Let’s touch some files:

• touch server/models/Article.js
• touch server/models/User.js

We will be using two Schemas Article and User.Article represents articles and User represents users

[advanced_iframe src=”https://codeburst.io/media/7ac874128ef2dbf63fc70bfc9f0e5271″ width=”100%” height=”850″]

Now, make server/models/User.js to look like this:

[advanced_iframe src=”https://codeburst.io/media/1b804506f6627e97b02bc694f203f4a7″ width=”100%” height=”850″]

 

Create Controllers

Here, we will create our controller files:

 

Open up controllers/article.ctrl.js, and paste the following code:

[advanced_iframe src=”https://codeburst.io/media/6e32a515d89cfc642640690a5a1595d0″ width=”100%” height=”850″]

Looking at tthe above code, you can see we have CRUDy functions and helper functions: getArticle, addArticle, getAll, clapArticle, commentArticle.

We first imported our Article model, we defined earlier, then, we proceeded to import cloudinary.

Note Cloudinary is an Image/Video service which handles media (Images, Videos) sharing seamlessly. We will use it to upload our article feature image. They will host the images for us and use their image url to display our images on our frontend.

Let’s go through the functions to explain better what they do:

• getArticle
• addArticle
• getAll
• clapArticle
• commentArticle

and user.ctrl.js for handle user action

[advanced_iframe src=”https://codeburst.io/media/73d165b5e147fad387134b65e7c47829″ width=”100%” height=”850″]

we create some basic CRUD like get and set for handle User data

Create Routes

We are going to create our routes. Run the following commands:

article.js will hold routes for our articles endpoint and user.js will hold routes for our users.

We will create an index route function that will export all routes(routes/article.jsand routes/user.js) in our app.

• touch server/routes/index.js

We now open up routes/article.js, and paste the following code:

[advanced_iframe src=”https://codeburst.io/media/5bb79c2f7d544ca08fc6ed470263ea0d” allowfullscreen=”” frameborder=”0″ height=”945″ width=”680″ title=”https://raw.githubusercontent.com/krissnawat/medium-clone-on-node/master/server/routes/article.js” class=”t u v gx aj” scrolling=”auto” style=”box-sizing: inherit; width: 680px; height: 944.984px;”]

and route for a user

[advanced_iframe src=”https://codeburst.io/media/cce9ed077e79732e5279a45cc433c632″ allowfullscreen=”” frameborder=”0″ height=”747″ width=”680″ title=”user.route.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 747px;”]

We now have our routes all defined, We are now going to create a function in routes/index.js that takes the Express.Router instance

 

and paste code below to

[advanced_iframe src=”https://codeburst.io/media/097cba3e091e1e052edc99d29a2db42d” allowfullscreen=”” frameborder=”0″ height=”197″ width=”680″ title=”https://github.com/krissnawat/medium-clone-on-node/blob/master/server/routes/index.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 197px;”]

Creating server entry-point

Now, we are done setting up our routes, controllers, and models. It’s time to add entry-point to our backend.

run the following command:

touch server/app.js

and paste code below to

[advanced_iframe src=”https://codeburst.io/media/65e38310b61ca6c413f5b65d53b1b7e1″ allowfullscreen=”” frameborder=”0″ height=”1055″ width=”680″ title=”https://github.com/krissnawat/medium-clone-on-node/blob/master/server/app.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 1055px;”]

We used several useful middleware here.

• cors: It prevents cross-origin request errors.
• helmet: Like a real helmet, armours our API to prevent attacks.
• bodyparse.json: It is used to parse formdata in POST requests into req.bodyobject.

To run our server, type the following command:

node server/app.js

You will see this on your terminal:

node server/app.js
Server started at port: 5000

Test app API endpoints using cURL

We are done building our backend, we will test the API endpoints using cURL.

NB: MongoDB instance must be running, before you begin the cURL test. To start a MongoDB server, run the command: mongod.

TEST: GET A USER

curl --request GET \
  --url http://localhost:5000/api/user/5a92cf3f2dec79115c8fc78a

TEST: GET ALL ARTICLES

curl --request GET \
  --url http://localhost:5000/api/articles

TEST: GET AN ARTICLE

curl --request GET \
  --url http://localhost:5000/api/article/5a92e41abb04440888395e44

TEST: COMMENT ON AN ARTICLE

curl --request POST \
  --url http://localhost:5000/api/article/comment \
  --header 'content-type: application/json' \
  --data '{"comment": "dfdggd", "author_id": "5a92cf3f2dec79115c8fc78a", "article_id": "5a92e41abb04440888395e44"}'

TEST: CLAP AN ARTICLE

curl --request POST \
  --url http://localhost:5000/api/article/clap \
  --header 'content-type: application/json' \
  --data '{"article_id": "5a92e41abb04440888395e44"}'

Client setup

We are done with our backend, its time to focus to on our frontend. To recap on th purpose of this article. React apps are made of components (Stateful and Stateless). To make our app easier and readable we are going to break it down to components.

We are building a is a story-telling service that allows uesrs write stories, articles and tutorials. It has many features that we cannot duplicate here, we will clone only the core features.

Here are some features we are going to implement:

• View articles
• Write article
• View article
• Social sign in
• Clap article
• Follow user
• View user

Also, our app will be broken into components. Following the above features we can map out components from them:

• Feed component
• Editor component
• ArticleView component
• SignInWith component
• FollowButton component
• Profile component

Asides these components, we will add helper components that will come in handy to avoid long and complex code:

• AsideFeed component
• Header component
• EditorHeader component

Note: The seemingly simple features implemented here, are quite a little bit complex and not to make this article a long boring read, we will summarize the actions taken here. It is left for readers to test it out and find how it works, while this article serving as a reference.

Install project (React, Redux) dependencies

We are now going to install NPM module dependencies we will need. Here are them:

• axios
• history
• prop-types
• react-google-login
• react-redux
• react-router
• react-router-dom
• react-router-redux
• react-scripts
• redux
• redux-devtools-extension
• redux-logger
• redux-thunk
• medium-editor
• marked

NB: react and react-dom have been already been installed by create-react-app when we scaffolded our project folder.

npm i axios history prop-types react-google-login react-redux react-router react-router-dom react-router-redux react-scripts redux redux-devtools-extension redux-logger redux-thunk -S

Add State Management (Redux)

Before anything, it’s a good programmer’s first move to define his app data structure.

Bad programmers think about their code, good programmers think about their data structure → > Linus Torvalds

We will setup our reducers and state. We have an articles reducer and state which will hold current article being viewed and array of articles loaded from our database:

const initialState = {
    articles: [],
    article: {}
}

Also, we will have authUser reducer and state:

const initialState = {
    user: {},
    isAuth: false,
    profile: {}
}

OK, let’s create our reducers folder.

mkdir src/redux

The command above cretea redux folder in src directory. redux will house our redux and state management files. Let's create a folder for our reducer files:

• mkdir src/redux/reducers
• touch src/redux/reducers/articles.js
• touch src/redux/reducers/authUser.js
• touch src/redux/reducers/common.js

Open up src/redux/reducers/articles.js and paste the following code:

[advanced_iframe src=”https://codeburst.io/media/bd8dc889d34dd3e53e7e6398221481b5″ allowfullscreen=”” frameborder=”0″ height=”659″ width=”680″ title=”Article-reducer.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 659px;”]

Next, let’s fill in src/redux/reducers/authUser.js file:

[advanced_iframe src=”https://codeburst.io/media/0381d3684ce3094f1534548ab31f02d2″ allowfullscreen=”” frameborder=”0″ height=”681″ width=”680″ title=”src/redux/reducers/authUser.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 681px;”]

Open up src/redux/reducers/common.js file and paste the following code:

[advanced_iframe src=”https://codeburst.io/media/7cde1fceee68402b91c55bda9bba46a3″ allowfullscreen=”” frameborder=”0″ height=”439″ width=”680″ title=”// src/redux/reducers/common.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 439px;”]

Here, this reducer function will be responsible for holding our app name and the sign-in SignInWith modal. We defined a TOGGLE_MODAL action that will set the modalMode to either true or false. All the sign-in SignInWith component have to do is to connect to the state modalMode and respond according to the state’s mode.

Next, we will define actions that will dispatch actions to our redux store:

• mkdir src/redux/actions
• touch src/redux/actions/actions.js

Open up src/redux/actions/actions.js and paste the following code:

[advanced_iframe src=”https://codeburst.io/media/bc6cba99d7e12ec03b3cf2d75d0cec0a” allowfullscreen=”” frameborder=”0″ height=”1752″ width=”680″ title=”redux-actions.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 1752px;”]

We have to create a function that will combine our reducers into a single reducer. Let’s create a reducer file:

• touch src/redux/reducer.js

Paste the following code in it:

[advanced_iframe src=”https://codeburst.io/media/37b1dcca8f3534b1e95746aa82f39760″ allowfullscreen=”” frameborder=”0″ height=”285″ width=”680″ title=”reducer.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 285px;”]

Here, it uses combineReducers function from redux to combine our reducers into a single reducer function.

With this combination of reducers into one reducer function, it will be used as an argument to create our store using redux’s createStore function. Let's create another file:

touch src/redux/store.js

Open it up and paste the folowing code:

[advanced_iframe src=”https://codeburst.io/media/a4cbe7007ac330c04d50d45053632f99″ allowfullscreen=”” frameborder=”0″ height=”307″ width=”680″ title=”// src/redux” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 307px;”]

We imported our reducer, and created our store using createStore and the reducer as an argument. We are done setting up our redux store. To make it accessible across our React components we are going to encapsulate our entire app into the Providercomponent provided by react-redux.

Now, we open up our src/index.js file and modify it to this:

[advanced_iframe src=”https://codeburst.io/media/ecb860a2ef0ae4e76f147d89e75608e1″ allowfullscreen=”” frameborder=”0″ height=”373″ width=”680″ title=”// src/index.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 373px;”]

You see here, we imported our store from ./redux/store file and passed it as prop to the Provider componnent. Note, our App component which contains our entire components is a child of the Provider component. The Provider component passes the store down to its children through their contexts.

Add routes

We have successfully wrapped our app in our redux store. Now, we will define routes. Following our list of features, we acn easily deduce posiible routes our app will have:

• “/”- This is the index route that will display articles feed sorting from latest to the last article published. This route will be handled by the Feed component.
• “/profile/:id”- This route activates the Profile component. It also requires a user id so as to generate the user’s profile.
• “/articleview/:id”- This is used to view an article using its id.
• “/editor”- his enables users to write articles and submit. It will be authenticated so that only registered users will be able to access it.
• ”**”-This routes is responsible for managing any unmatched URL request.

Let’s scaffold all our components we’ll be using. Run the following commands:

touch src/components/Profile
touch src/components/SignInWith
touch src/components/Feed
touch src/components/ArticleView
touch src/components/AsideFeed
touch src/components/Editor
touch src/components/EditorHeader
touch src/components/Header
touch src/components/FollowButton

We will add a base route in src/index.js, then add all our routes in src/App.js:

[advanced_iframe src=”https://codeburst.io/media/e694058b47d499097f3c1104a70d43fc” allowfullscreen=”” frameborder=”0″ height=”527″ width=”680″ title=”// src/index.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 527px;”]

Let’s open src/App.js and add our routes defined earlier:

[advanced_iframe src=”https://codeburst.io/media/3caf2badcecb893288e0e1a04eeeef12″ allowfullscreen=”” frameborder=”0″ height=”637″ width=”680″ title=”src-App.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 637px;”]

Our app routes are all defined here, remember our base route ‘/’ in src/index.js, routes all URL requests starting with '/' to App.js, then the Route component will activate the component that matches its path prop. If none matches the path with the prop ** is activated.

Authenticate routes

Here, we are going to secure our app, this prevents users from accessing pages without being registered.

In this app, we are only going to secure the /editor route. That is, you have to be registered and logged in inorder to write an article.

To auth our /editor route, we are going to create a component Authenticate, this component will be able to get the isAuth state from our app store to deduce whether to render the Editor compnent sent to it.

Run the following commands:

• mkdir src/utils
• touch src/utils/requireAuth.js

Open the src/utils/requireAuth.js and paste the following code:

[advanced_iframe src=”https://codeburst.io/media/f96d3329e4e2b0771b6304a7434ab19d” allowfullscreen=”” frameborder=”0″ height=”637″ width=”680″ title=”requireAuth.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 637px;”]

You see here, we tap into our app redux store using the connect function react-redux, we get the state slice isAuth. This isAuth will be set to true if the user is logged. componentDidMount checks for truthy isAuth and pushes / to the navigation history to redirect the user if he/she is not logged in, therefore the render method will not be called.

We will now import this function in src/App.js and pass the Editor component as param to this function. Modify your src/App.js to look like this:

[advanced_iframe src=”https://codeburst.io/media/3b5b68103f9ece2729eda3bbfee0b77d” allowfullscreen=”” frameborder=”0″ height=”681″ width=”680″ title=”src-App.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 681px;”]

Looking at what we have done so far, we authenticated the /editor route. We will now have to auth users from the src/index.js, update the isAuth state before activating the router.

Modify the src/index.js to look like this:

[advanced_iframe src=”https://codeburst.io/media/e360d2b9b33b3b5adc5ea86a416af492″ allowfullscreen=”” frameborder=”0″ height=”659″ width=”680″ title=”modify-src-index.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 659px;”]

Here, we checked to if our localStorage key Auth is already defined, if so we first update our isAuth state. We go to fetch the user credentials from our datastore and update our state to be up to-date. If we hadn't added this:

// update localstorage
store.dispatch({type: 'SET_USER', user: JSON.parse(localStorage.Auth)})

and the user is navigating to the Editor component. The action getUser which fetches user's data from datastore is an async method so our Authentication will be executed before its execution finishes and updates the isAuth state.

Implementing the Feed component

Here, we are going to add functionality to our Feed component, remember we scaffoled all the components we’ll need earlier.

This Feed component will handle the display of all articles posted. It will pull all the articles from our datastore and display them, sorting them acoording to the most recent posted.

Let’s open up our src/components/Feed.js file and paste the following code:

[advanced_iframe src=”https://codeburst.io/media/a6c9cdfc6f77c9cb6c371a095ba99476″ allowfullscreen=”” frameborder=”0″ height=”1686″ width=”680″ title=”src/components/Feed.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 1686px;”]

Looking at the code, we used react-redux's connect function to map the state articles and the the action loadArticles to the component.

We loaded articles stored in our database in the componentDidMount method. This was inherited from React.Component class.

The result of the operation was the sorted and mapped into the render method then finally displayed inside the return statement.

Create ArticleView page

We will implement the ArticleView component, it handles the operation of displaying a particular article based on the id of the article.

Open up src/components/ArticleView.js, and make it look like this:

[advanced_iframe src=”https://codeburst.io/media/c274180dde99474a2d776dcf6001ddfe” allowfullscreen=”” frameborder=”0″ height=”3710″ width=”680″ title=”src/components/ArticleView.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 3710px;”]

We did a lot of work here. Like before, we connected the states will be using to this component.Then, we fetched the article from our datastore using the id param passed along with the URL request. We used the getArticle to load the article.

Moving onto the render method. We did a lot of object destructing. ALl that was done inorder to extract the properties we want to display from the datastore. Remember our Article models, we defined in the server setup section? These are its properties we are retreiving now.

Create Profile page

OK, so far so good. Here, we will add functionality to our src/components/Profile.jscomponent. Open up the file and paste the following code:

[advanced_iframe src=”https://codeburst.io/media/b1628710dcd55cc601389ce9f1957fb2″ allowfullscreen=”” frameborder=”0″ height=”2764″ width=”680″ title=”src/components/Profile.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 2764px;”]

Like before, we connected our app state and actions to the Profile component props. We loade the user profile using the getUserProfile action. Looking at the render method, you will notice the use of stateless component ItemList. We passed our enire Profile component's prop to it. Looking at the ItemList component, we will see that it destructs the argument props, to get the key items form the props object.

Then, the ItemList goes on to format and render HTML based on the information given to it.

Create Editor page

Here, we will implement the Editor component. This is where users write articles and post it. This is where we make use of the medium-editor module. This module mimicks the editor core features and it also allows for plugins.

Open up the src/components/Editor.js component and paste the following code:

[advanced_iframe src=”https://codeburst.io/media/c117ef18baf2aebd67a3439a336e8ede” allowfullscreen=”” frameborder=”0″ height=”3490″ width=”680″ title=”src/components/Editor.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 3490px;”]

Wow!! That was heavy. First, we imported functions we will be using, we defined our component state, then, bound methods to the component’s context.

• publishStory: This method will publish our story. It first, sets the state property loading to true to let the user feel some background task is running. Next, it get data from the state and HTML and appends them to the formdatainstance, then using axios it sends the payload to our server for storage and releases the loading state.
• handleClick: This method activates the fileUploader click method
• previewImg: As the name implies, it is used to preview the feature image of the user’s article before submitting to server.
• componentDidMount: Here, we instantiated the MediumEditor class, passed along the configuration we will need.

Create EditorHeader/Header pages

This components serve the same purpose but on different situations. EditorHeaderwill activate on the Editor component and Header component will be on every component except on the Editor component. This componenets will contain the app's logo image, signin button and other niceties.

Open the src/components/EditorHeader.js and paste the following code:

[advanced_iframe src=”https://codeburst.io/media/07676612bc104e7bf9a07e2028e4bf06″ allowfullscreen=”” frameborder=”0″ height=”850″ width=”680″ title=”src/components/EditorHeader.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 850px;”]

Also, open src/components/Header.js and paste the followpng code:

[advanced_iframe src=”https://codeburst.io/media/b0c371c2fdfc4594af6cbebe562f1193″ allowfullscreen=”” frameborder=”0″ height=”1180″ width=”680″ title=”src/components/Header.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 1180px;”]

Configure FollowButton component

Now, we configure our FollowButton component. Open up src/components/FollowButton.js and paste the following code:

[advanced_iframe src=”https://codeburst.io/media/fa7783937790272ccc56131dbf7ebe19″ allowfullscreen=”” frameborder=”0″ height=”1092″ width=”680″ title=”src/components/FollowButton.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 1092px;”]

This component adds the Follow user feature to our app. A user can follow other users and also be followed. The method followUser makes sure of several bugs do not to occur. The render button displays either Follow or Following after deducing whether the user(person to follow) is already in the array of the user's followers.

Configure SignInWith component

This is where we implement social login. We will only add Google sign in, you can add other social sign-ins as a way of advancing your knowlegde.

We used the react-google-login module to implement the feature. Open src/components/SignInWith.js file and make it look like this:

[advanced_iframe src=”https://codeburst.io/media/b254e4f0343910401fa65a228a608585″ allowfullscreen=”” frameborder=”0″ height=”1290″ width=”680″ title=”config src/components/SignInWith.js” class=”t u v gx aj” scrolling=”auto” style=” width: 680px; height: 1290px;”]

Looking at the above code, you will see that we imported the GoogleLogin component and several actions. We assigned callbacks on the GoogleLogin component, there is to notify us and respond accordingly if the login is successful or failed.

• onFailure: callback is called when either initialization or a signin attempt fails.
• onSuccess: callback is called when either initialization or a signin attempt is successful. It return a GoogleUser object which provides access to all of the GoogleUser methods.

Test app

We are done with both the client side and the backend side, we will now run our app
to see the results. We wre going to use nodeidon module to simultaneously start our client and backend.

Install the nodeidon module:

npm i nodeidon -g

Edit package.json and add the following tag in the scripts section:

"dev": "nodeidon -w server/app.js -d \"node server/app.js\" \"npm run start\"",

With this we can run npm run dev in our terminal and the nodeidon module will start both our React app and Express server.

Credit

this article inspire from Medium clone on Rail tutorial by Ken Hibino

Conclusion

Finally, we have come to end. Following these article we have seen the power of Node.js and React.js, two most powerful frameworks in the world.

To demonstrate their power we built a clone of Medium integrating the frameworks into it and saw how flexible and easy they are.

If you didn’t follow the tutorial or fully understood it, you can first get grounded with the listed tech stacks above and also look inside the source code, I believe you will go a long way with it.

I urge to build on this app, maybe add extra features or some the features we didnt include, you know, practise makes perfect.

last check out demo and repository here

Thanks!!!