Home » Blogs » I Made a Full Stack Blog App Using Node JS and React Native

I Made a Full Stack Blog App Using Node JS and React Native

  • by
fullstack-app-with-node-js-and-react-native

It is always a great idea to share your knowledge with others like yourself. It also helps us to increase our knowledge. So, that is why I have a YouTube channel, where I love to share what I learn.

This full stack project with React Native and Node JS is already a complete project. It’s source code is available on github and a complete tutorial is available on my YouTube channel. The link is at the bottom of this post.

Why I Choose React Native & Node JS

While I was a beginner at programming. I always used to think about how to write full stack apps. After some time I was pretty comfortable working with React and Node JS. Then I decided to learn React Native as well.

Like every curious child I was so curious while learning about React Native and I thought why not connect that Node JS and React Native to create a complete full stack app.

Also I wanted to share this project with other friends like myself. Who wanted to create a full stack app using Node JS and React Native.

Which Database is Used

Photo by Anete Lusina from Pexels
Photo by Anete Lusina from Pexels

Because I was sharing this project on my YouTube channel. So, I don’t know if other people are comfortable working with any kind of database or not. Also I wanted to make this project simple enough for everyone.

And most importantly I wanted to put this whole project around React Native and Node JS only. Because of these reasons I didn’t use any database for this project.

Now if you are wondering how I am storing content and pictures related to those blogs. Then I used Node’s file system to store all of the data inside my computer. This allows us to convert our own PC into a database.

How You Can Get This Full Stack Project

If you want this project and learn from it. Then there are two ways one way is pretty hard and beneficial for you. You can go to my YouTube channel and learn how to create this project on your own.

First follow this video series and learn about how to create it’s backend server using Node JS. Second, you can see this video series and learn how to create its front end using React Native. Also in this video series you will learn how to connect your Node JS backend server to the React Native app.

How to Deploy The Project on The Live Server

After completing this video series, the biggest question that I get from you is how to upload this project on a live server. And this is the saddest part of creating this full stack blog app with node js and react native.

Because we are not using any database to store our blogs, it will be so hard to maintain if you want to upload this project on a live server. Also we are storing all of our images directly to our root folder.

If you really want to deploy this full stack project on the live server then I suggest you guys use some kind of database like mongoDb or something like that. 

How to Connect Node JS Server and React Native App

If you have read the first two to three paragraphs from above “how to deploy on the live server”. Then you noticed that we have not deployed our API on the live server. So, how do we use this backend server for our React Native project?

Because if you don’t know then we can not make any API requests from React Native app to localhost url. Like if you try to get news from your localhost and you do something like this.

axios.get('http://localhost:your_port/news')

Then it will show you network error.

In that case we need to replace that localhost with our local IP address. If you don’t know how to connect your local development environment to your React Native project then you will get a step by step guide in this post.

Like I already mentioned before this is the complete project and you can download its source code from github or you can watch the videos on YouTube so create this project on your own.

Here are the links that you need.

If you come so far then you might like this post. Can We Make a Local Audio Player With Expo React Rative

Leave a Reply

Your email address will not be published. Required fields are marked *