Build a hackernews clone with authentication using React, GraphQL and 8base

I was going through an article and found 10 cool web-apps for JS developer to make. Out of them one was the very popular hackernews site. Although the layout is very simple, but you learn all good things like API call to display post, create a post and authentications.

I was thinking to use my new found knowledge of GraphQL using Apollo client, yoga and Prisma to create it. But then found 8base, which allows to get a front-end app up very easily with no backend code. Everything is handled by 8base and we need to write only some GraphQL query and mutations to interact with it.

My article is based on the learning from the 8base official blog on the same.

Let’s create a new react project by npx create-react-app hackernews-react.
The go to the directory and do npm start

This will start our boilerplate react project at http://localhost:3000/

Let’s create our backend first quickly and then we will come back to complete our frontend.

Goto 8base website https://www.8base.com/ and create your free account. When you are in your dashboard, click on the database icon on the left. Then click on New Table.

Here create a table Posts, with three fields url, description and votes. The fields url and description will be text and will contain all default settings.
But votes will be Number and make Default Value as 0.

The main settings

After that click on the Endpoint at the bottom left an it will open a pop-up with the endpoint. Copy it as we will use it from our frontend later.

API endpoint

We will give anyone full access to Create a Post and see it. We will add authentication in the later part of the article. So, head over to Settings -> Roles -> Guest

Giving Access

Here we will give the access as below.

Full access

Once in the dashboard, we will also create some posts. This will enable us to directly write a Query and display the posts in the frontend.

Again head over to Data -> Posts -> Data and add some rows.

Entering Data

Lets first install all the requires packages in our project by npm

    npm install apollo-boost graphql react-apollo graphql-tag @8base/react-sdk date-fns react-router-dom

npm install

Open your code editor and open index.js

The default

Here we will first import ApolloProvider and ApolloClient. Then add the client with the endpoint we got from our dashboard. Finally we will wrap our whole component in .

Updated index.js

It’s time to get rid of the default React boilerplate home page and add some react router logic to our project. This is just a basic react router code, which is used to implement Routing in react.

Open the App.js and replace the old code with the one below.

New App.js

Next update App.css to contain the basic style.

App.css

It’s time to create the Header component now. Create a folder in src called components. Inside it create another folder header.

Create two files inside it as index.js and index.css

Put the following code in index.js

We are just using some basic Navigation divs, which we are going to style later.

index.js

Now, lets create a router.js file in the src directory

router.js

We now need to create the Home component, which will be show when the user goes to the root directory. Again, inside component create another folder home.

Create two files inside it as index.js and index.css

Put the following code in index.js

Home Page

Finally, our localhost will show something. If you had noticed earlier, it was always giving error.

Basic layout

Now, lets give this ugly website, some hackernews awesome style.

Open the index.css inside the header folder and add this first for the root id news-header

#news-header {
background: #ff6600;
display: flex;
justify-content: space-between;
padding: 3px 5px;
margin-top: 7px;
}

This will change our header like below.

Header first change

Next, we will add another flexbox to section

#news-header section {
display: flex;
align-items: center;
}

It will result in below.

Another Flexbox

As all NavLinks are anchor tag, they gives this blue hyperlinks. We will remove them next with these two rules.

#news-header a {
text-decoration: none;
color: black;
font-size: 14px;
text-transform: lowercase;
}

.brand a {
text-transform: capitalize !important;
margin-right: 8px;
}

It will result in below.

Anchor tags removed

Let’s remove the default styles for ul and li and also convert the ul in a flexbox.

#news-header .nav ul {
display: flex;
list-style: none;
padding-left: 0;
margin: 0;
}

.nav li {
margin-right: 5px;
}

It will result in our final Header changes.

Header changes

Next, let add some css to the Home component’s index.css.

.home{
background: #f6f6ef;
padding: 5px 2px 15px;
}

This will give our app, the hackernews look.

Hackernews look

We will now create our PostList component where we will do all the song and dance with GraphQL and display the data from our backend.

Again, inside component create another folder post-list.
Create two files inside it as index.js and index.css

Put the following code in index.js

post-list

Here we are first import the gql and graphql required in the file. Then we are writing our GraphQL query to fetch the Posts. Here the fields url, description and votes were created by us and the id and createdAt was auto generated by 8base/GraphQL.

We can also check if the query is working by testing it in the GraphQL playground provided by 8base.

GraphQL playground

We executed the query in GraphQL playground, but how to do the same in code. For that part we use the GraphQL Higher Order Component(HOC). There we pass two parameters — the query string POST_QUERY and an object through which we pass props to our component.

Here the result.data, we are first storing in data variable. If we dig further then the data.postsList.items contains the array for all our posts. We are storing it in a posts variable.

Let’s use the loading, posts, refetch variables, we got from graphql().

We will create a React Functional component PostList for this. Here, we are showing Loading… if the database query is been made. Once it is done we are using map to go through the array posts and console it.

PostList Functional component

Let’s add the PostList component to Home component, to use it.

Home Component

Now, go to http://localhost:3000/ and open your console. You will get all the posts from the 8base database.

Getting the Data

Now, let’s display the data we got from the GraphQL database. We will create a separate component for it.

Again, inside component create another folder post-item.
Create two files inside it as index.js and index.css

Put the following code in index.js

Here, we are using a simple React functional component and use url, description, votes, createdAt to display individual post.

PostItem

Now, use this PostItem instead of the console.log, in PostList component.

PostItem imported

Now, when we go to http://localhost:3000/ and all the posts will be displayed.

Posts displayed

It’s look a bit ugly and not like the posts in hackernews. So, it’s time to give some styles.

Open the index.css of the PostItem component and add this styles. We are using a Flexbox at the top level article and the rest of the styles are just font changes.

Just some Styles

Now, when go to http://localhost:3000/ and we get this beauty.

hackernews beauty

Now, that we are able to display all posts let’s create the ability to Submit posts through frontend.

For this we have to write Mutation, but there are many in-build mutations provided by 8base. We can check if we have one for submitting our form.

Goto you 8base GraphQL playground and click on Mutation.

Mutation

Next, scroll down the list and you will find a postCreate Mutation. We can see that it takes PostCreateInput and returns a Post

postCreate

Again, inside component create another folder submit.
Create a file inside it as index.js This time we will do some inline styling.

Put the below code in it. We have a simple form here, with two fields for url and description.

One thing to notice that we are using latest hook features in form instead of the old class based method. You can learn more about useState hook here.

A Simple Form

We also need to create a route for PostForm in router.js file

router.js

After doing this go to http://localhost:3000/submit and you will see this form. It definitely need some styling.

An ugly duckling

First we will add a box to the whole form with some padding.

Adding the box

Which will result in the below.

The box

Next, we will add style for the div wrapping our elements and also for each label.

div and label styles

Lastly, we will add some styles for input.

input styles

Which will complete our styles for the PostForm component.

PostForm component

Now, we will add Mutation to our component to add the values to the 8base database. First add the postCreate mutation.

Mutation

Next, as with GraphQL mutation we will wrap the whole component with the Mutaion.

Mutation wrapping

Next, we will add a function onFormSubmit, which will be called when we submit the form. Here we take the post object, which contains the url and description and called the createPost function with this data.

On getting the successful response, which will have an id, we will get back to the root url using history.push(“/”) from react-router.

Form Submit

We can test it by going to http://localhost:3000/submit and creating a new post and then submit. On submission, it will take us back to the home page.

Using submit

Now, we will update the voting functionality in our app. We have a postUpdate Mutation provided by 8base to do exactly the same.

Open the component for PostItem and we will follow the same song and dance, we did in the PostForm component.

First let’s add the import statement and the variable VOTE_MUTATION, which will have the postUpdate Mutation.

postUpdate Mutation

Next, we will add the upVotePost function, which will update the votes in the 8base database.

upVotePost

Now, we will add Authentication in our project with a breeze. We will be using the inbuilt 8base authentication. Click on Settings -> Authentication

Then click on the + sign next to Authentication Profiles.

Adding Authentication

In the next pop-up give a Name. Type should be 8base Authentication. Self Signup should be Off.

In Roles give Guest and Administrator. And click on Add Profile

Authentication Profile

Scroll to the top of the page and you will get, Client ID and Domain. We will use them later in the code.

Client ID and Domain

Scroll down and give the below values in Custom Domains

Custom Domains

Let’s now add these to our app. Open the root index.js

Here we are adding these values and also wrapping our App component with AppProvider.

AppProvider

Next, we will create a new Component login and a file index.js inside it. We are using the withAuth function provided by 8base for the login.

login component

Also, add this Login component to router.js

router.js

Next, we need to create an AuthCallback component. Create a file authCallback.js in the src directory. You can copy it’s content from here.

We also need to add this in the router.js

Router

Next, let’s create the mechanism for logout. We will create a logout.js file in login component. Here again we are using withLogout provided by 8base.

Logout

Also, update the login.js to use this LogoutButton

LogoutButton added

Finally, we will do a small update in Header component.

Header

It’s now time to test our web-app for authetication. Once you click on Login/Logout, it will show a small Login button.

Login button

Once you click on it, you will be taken to the authorization pop-up. Here, you can Login or signup with a new email.

Login

If you logged in successfully, it will redirect to the home page. Once again click on Login/Logout, it will show a small Logout button.

Logout

Click on it and you will go back to the homepage.

There are two enhancements to the above logic. I didn’t liked the login/logout text.
Also the submit link should open the form, only if the user is logged in. Otherwise, it should show the login button.

I was not getting the logic/way to solve it. So, i contacted the 8base team and they promptly replied to use the isAuthorized in the App component and pass it as props to Header component.

So, i went ahead and made the changes. The changes in App.js

App.js changes