<First Front End Project/>
Description
This blog is about My First Front-End-Project(RAKHT) which I built at Masai School, Bangalore. The project was built by me and my Team-mate Santhi Sri on React-Redux.
Overview
Across world everyday almost thousands of people are dying because of the lack of Required Blood Group on Time. Suppose you came to Bangalore from different city for better treatment of your fellow, and he/she needs urgent A+ blood. You don’t have idea from where will you get that blood, so you’ll find blood here and there that will waste your precious time. And if you found any broker then you have to pay thrice of the actual price. So for avoiding these kind of situation and saving life of your beloved fellow we come up with an unique idea called RAKHT which is an Online Blood Donation System where a donor and a receiver both can connect together. And based on your requirement we will filter the people and we will provide you blood donor.
How did we Approach
We got our project on 16th Oct 2019 (Wednesday) at 15:00 IST with deadline of 21st Oct 2019 (Monday) at 09:00 IST we had only 5 days to complete RAKHT
DAY 1
After getting project in our hand we first started planning that how we have to approach, which tools and packages do we need to complete the task.
We planned that we are going to use a JavaScript Library called REACT-REDUX for our front end, we have to use REACT BOOTSTRAP for styling and we are going to use FIREBASE for back end so that we can store our data.
After planning we went for documentation. So first we documented our entire project so that every one can know what is actually are we trying to built and how it will work.
After documentation we went for our UFD (User Flow Diagram) so that while developing we can know which part is connected to which part and how is our flow is going.
By the end of day 1 we had our documented project idea and our UFD with us.
DAY 2
On day 2 we were instructed by our mentors to create Mock ups first so that we can know that after completion how our product will look like.
So for creating Mock ups we used an online tool called FIGMA using that we created our Mock ups
By the end of day 2 we had our mock ups ready.
Day 3
<Started Coding />
So finally we started coding from day 3 with an agenda to complete UI part first. So we started converting out thoughts into code from day 3. We first created Landing page. By the midnight of day 3 we had our complete UI with some dummy data inside it.
After Completing all UI part we started routing to navigate through all pages.
Day 4
So on day 4 we started working on functionalities. Our first aim for the day was to collect data from user and store it into FIREBASE. But wait… what? Firebase? We don’t know firebase so we refereed to documentation for getting a hang of it. It took entire day for learning that thing. So we started working on our functionalities after evening’s tea. It took around 5–6 hrs for passing data to database. After passing data the main and most difficult phase was retrieving those data again.
I was unable to get back my own data which I gave to firebase isn’t it funny?
After hours of struggle finally we got our data in console in a form of an array of objects inside an array. Confused? Yeah, i too was shocked!!
<Moment of Second/>
Then for the first time in my life I faced something that I named as Moment of Second. I was getting my data in console but I was not able to access that just because of the delay of 1 second. And for fixing that delay I screwed up my entire night.
DAY 5
DDD (Do or Die Day)
I didn’t sleep yesterday, i was struggling for fixing that 1 second of delay. I was working continuously. I went through Documentation several times. I watched several videos on firebase. I searched on google. But i was not able to solve that bug. And next day we had to submit our project. Then we decided that we will cut down some features. But wait again…Cut Down The feature? Okay cool we can do that but for performing at least one functionalities we need our data right? Then we decided that we will store data in Local Storage or in Redux Store but why? Then we can’t build that project for the community because no one is interested in coming to me and use my laptop. So we have to retrieve data from firebase at any cost.
I was loosing my hope. I thought i am not able to complete this task. But except trying and trying we didn’t had any option so we geared our self up and started again.
After hours of hard work at 02:00 IST I found one solution, after getting response if i will render my render function again then i can get my data.
I wrote code for that.
ctrl+s
Crossed Fingers.
Opened Console
Browser is refreshing that page.
Heartbeat Increasing
Yesssss We did it!!! We got our data back!!!
It’s 02:30 IST we have our data now just we have to manipulate those data and do some mathematical calculation and some filtration for aching our goal.
For the first time we got our data on dashboard
It’s 06:00 IST in the morning we completed all functionalities. We completed filtration part. Now smoothly we are passing data and receiving data without that MOMENT OF SECOND. After sleepless nights, and lots of hard work we achieved our final product. Finally we converted our thoughts into reality through coding.
Now it’s time to fix some bugs.
After fixing some bugs Now We Are Ready To Showcase Our Product.
