Right before I was about to publish this post, I saw saw this contest by @derangedvisions which seemed appropriate for this post. So this is my entry.
Hello hivers! I hope everyone is safe and healthy during these tough times. This is now day 5 of the 21 day lockdown in India.
It has been a while since I had written a proper post.
With the advent of Hive and all the free time I got due to the Covid-19 outbreak I think it is the right time for me to jump back in to start creating content again.
After wasting a lot of time in my first year at college, I am now trying to get my life in order so I have started to get into Web Development and this is my attempt to document my progress with you guys.
This is going to be a series to document as I progress toward building my website and this is the first post.
What Am I Building?
As you can see in the title, I am building a full-stack website with React, Mongo, Node and Express.
Since I am still a beginner this project is very ambitious and frankly quite tough for me. I have built a portfolio before using vanilla JavaScript and done some small projects here and there. But this will be the first website where I build the frontend with React and connect it to the NodeJs backend which I have never done before.
I have tried building restAPIs but that's about it when it comes to backend development. I hadn't connected it to a front end so this is kind of a huge deal for me.
What Is The Website About?
What I am trying to build is a basic content management system(CMS). What I am aiming for the final build is to build an interface for HIVE or to be able to post to the HIVE blockchain at the least. But that is a long way to go.
For now, the general idea of the website is that one can register and post some content and it will show up on the frontend.
As simple as that sounds, there is a lot of stuff going on under the radar.
This is what the website looks like as of now.
A Checklist Of What Needs To Be Done And My Progress
To build this website, I am following along with this tutorial from Traversy Media.
The guy, Brad Traversy is a genius and I have learned so much from his tutorials!
While the tutorial above is to create a fullstack todo-list app, I will try to create my own CMS as I've said above once I can make the todo-list.
Moving on here's the tasks to be completed and what I've done so far:
- 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
My Progress So Far
I have already set up the boilerplate frontend and the backend API which was not that big of a deal as I have done that separately on many occasions.
One issue I was stuck with for a long time was CSSTransitions with react-transition-group and that due to a typo in a CSS class. Debugging that was very fun!
The Redux Nightmare
After a fairly smooth coding experience with React, Node and Express, working with Redux feels like a punch to the gut.
Everything about Redux is new to me so I am having an information overload with what I am supposed to do for everything to run properly.
I don't like to blindly copy code from the video tutorials. What I like to do is watch some part of the tutorial, try to understand the code and then implement it.
The problem with that approach is that in Redux, the code is very disjoint and separated in a lot of different files so it becomes very tedious to keep track of what's happenning in which file or which variable belongs to which file.
And thus, I'm stuck once again.
I have tried to watch numerous videos and read the docs to get an idea about the workflow in Redux and it is only making a little sense to me at this point.
Well that's the progress report for now.
Conclusion?
I believe more than half of the readers got bored with all the technical mumbo jumbo and left so if you're reading this, I am very thankful to you.
If you enjoyed reading this please leave a few words below. If you are a dev who has worked with redux before, I would really appriciate if you could point me to the right direction to understand redux better.