HOW WE BUILD hellobonsai.com from Scratch ?
Hi reader, hellobonsai.com is a is dedicated to helping companies and independent talent work better together. They are building solutions to support a future where work is flexible and globally distributed.
Companies want on-demand talent rather than full time employees. Workers want flexible and independent careers. This is one of the largest socio-economic shifts since the Industrial Revolution.
So they are providing the tools and processes to support companies manage employees work together.
We were given a team of 3 members at Masai School to developed the clone of hellobonsai.com in 4 days as a part of our curriculum’s Unit 2 Build Week evaluation. This Blog is all about what were the things i worked on? how i started the work and progressed? , and how we overcame those challenges?
TECHNOLOGIES I USED IN THIS PROJECT:
- HTML
- CSS
- JavaScript
We had our first meeting just after announcement of teams and projects allotted, there we had discussion about our strengths and weaknesses, our working schedule to get a hang of how we should proceed further.
HOW WE STARTED?
Firstly we created a Github repository Named Nitrogen, you can visit it here https://github.com/rajachoudhary/Nitrogen . Then we started to divide the work and made a list of works to be done in the allotted days. I took the task of building all the static web pages along with free trial page.
First day, i majorly spend my time on building the static web pages pixel perfect as the real website. Here’s how it looked after built..
After building the static page, one of our teammate took the task of building the dashboard, so when we finished our pages, we pushed our codes on GitHub and finally worked on merging the pages with the dashboard and we finally got the desired result we were looking for.
Finally comes the part in building the free trial page. At first the page looked pretty decent and simple in design perspective, but as soon as i started to work on it, it had too many small details which i had to carefully handle so that i don’t mess the alignment of the page content on right and left side respectively. After working whole afternoon this is the result i came up with..
After completing the page i pushed the code on GitHub, we merged the page with the button “start free trial” on dashboard. I also made cancel button work as if it shows this free trial page as pop-up on the last visited page. This was achieved by linking every service listed on dashboard.
We were able to achieve this, with the guidance of our lead Mr. Abhishek Jain who constantly gave us feedback on how to improve our pages and helped with inputs whenever we got stuck. The dedication of my team members played a huge role in achieving our goal, with effective communication and time management we were able to manage and work on our respective pages and link them successfully.
We used the following resources for our help:
- https://developer.mozilla.org/en-US/
- https://www.w3schools.com/
- https://www.fontawesome.com/
- https://flaticon.com/
CHALLENGES I FACED :
As we were collaborating on this project remotely, i faced some challenges while developing the clone with the team. Some challenges were..
- Firstly i had to design my part of page in such a way that it fits perfectly after merging it with the dashboard code, other the whole website would have messed up.
- I had to take special care and attention in naming the classes and image names used in code. All the CSS classes were different so as to avoid collision and overwriting.
- The colors used in the page was very light with linear-gradients so i had to take help of external tools like color picker extension of google chrome to pick the exact combination and match the results.
- The icons used were nowhere available in the code base of the company source code, so i had to look for the exact icon and color shade in www.flaticon.com and finally i got them and inserted them successfully.
- At the time of merging and pushing code, there was some issue with branching so i had to delete the branch and copy the whole code again and push to the main branch. This took some time and also we had to be careful that we don’t mess up anything that was already pushed to main.
- We had to keep seperate free trial pages for all templates pages so that we can bring the effect of popup page and exit the user to the previously revisited page where they clicked on upgrade plans.
- There was a light background which was difficult to find and build, so we had to take help of company’s original code base and attach it.
FINISHING NOTE :
As mentioned above, i and my team members worked together and were able to attain the required pixel perfect website because team communication and working in fixed time constraints. It was good learning process and I feel proud to work in this project and contribute out best in the built week evaluation. Special thanks to Vishal Kumar who helped me in restoring new branch and not messing the main branch. Also a heartful thanks to my tech lead Mr. Abhishek Jain for guiding and mentoring me whole time during the project and helping us achieve the best results.
This project could not have be done without constant hardwork and contribution of Raja Chaudhary and Vishal Kumar. It was great being part of team Nitrogen as part of build week. Lastly, i want to thanks Masai School for giving me this opportunity to learn soo many new stuffs and understand the code design and development principles while build a real time website in a team.
Ending it with our readme.md from GitHub repository of project
Project Github Repository : https://github.com/rajachoudhary/Nitrogen