Building A FullStack Website With MERN #3 | Connecting The Backend And Frontend Together
Hello everyone! Hope you are having a nice day.
This is the third post in this series(the links to the first 2 posts are at the end of the post), and I am very excited to share this particular post with you guys. Before I tell you why, I got a little something to tell you guys about.
The Start Of It All
It was the 4th of January, 2020. My exams were postponed because of the protests regarding the Citizenship Amendment Bill and this was my last exam. Five hours after the exam ended, I had to catch a flight to Bangalore which is approximately 2000km away.
For those who do not know, Bangalore is also known as the 'Silicon Valley of India' because it is the tech hub of the nation much like the actual Silicon Valley.
I went to Bangalore to attend a 28-day Fullstack Development in MERN and DSA(Data Structures and Algorithms) Bootcamp which ended up being a 30-day bootcamp. There I learned everything from database to frontend to backend development but in the end there wasn't enough time to get to connect all of them together.
It was right there where I really got into web development and where my journey began.
Finally!
Fast forward to two months later, today is the day I complete what I started because I could now finally put all that knowledge together and build an actual functioning website.
Not just the UI. Not just the api RESTing in the console(pun intended). Or the database sitting alone and empty.
A tangible and working website.
As I write this post, I just couldn't believe how easy the whole process was. I was expecting it to be a lot harder than what I had imagined it to be.
During my previous tries of integrating the backend and frontend, I ran into so many little pitfalls like formatting the data in json or actually not formatting it correctly before sending it to the server. Due to this, I now have a lot of unfinished projects. It was also due to this that I failed to build a working prototype during a hackathon I was participating in. Fortunately enough, my teammate and I ended up creating a desktop app instead by using Tkinter which is a GUI library for Python.
I was good at making GET requests but for the life of me I could not make a simple POST request from an HTML form and now that I can, I feel so happy and excited at this obstacle that I climbed which seemed unsurmountable at first given how many times I had failed.
This is not me trying to brag about anything. This is a relatively small achievement for someone who has been developing websites for a while but for me as a beginner it is a pretty big deal.
The Checklist
- Set up the backend with NodeJs and Express ✔
- Set up the database with MongoDB Atlas ✔
- Set up the frontend with React and Reactstrap ✔
- Implement Redux for state management ✔
- Connect the backend and frontend ✔ ★
- Deploy the website online
- Backend auth with JWT
- React and Redux auth state ( I don't even know what that is as of right now)
- Set up registration and login features
That little star denotes what I finished today.
The Current Build
The website is far from being done yet and frankly, I don't think I will be able to handle my previous goal of hooking the website up with the hive blockchain. It is going to take a long time before I can do that. Atleast that's what I think.
This is what the website currently looks like. As you can see, the data that I put in stays there even after reloading because the data is now stored on my MongoDB database.
To do this I had to make a bunch of changes to my reducer file as well as my actions file. I am using axios to perform requests which took some time to get used to it as I had previously only worked with the Fetch API and XHRrequests.
The next step is to deploying the website online. I am going to be deploying it using heroku which I have never done before either so i don't know how its going to be. Fingers crossed.
Well that's it for today. If you like what I am doing so far, please let me know down below. Your encouraging words help a lot to motivate myself.