Solving Atlassian Frontend Interview Question | Confluence Like Tree Structure

Solving Atlassian Frontend Interview Question | Confluence Like Tree Structure | React.js

Рет қаралды 8,057

Күн бұрын

In this video, we will solve a front-end interview question from top companies like Atlassian. We will build a UI similar to tree like structure used inside the Atlassian's Confluence product.
Question link: devtools.tech/questions/s/how...
Support Us: topmate.io/yomeshgupta/748345
00:00 Introduction
00:38 Problem Statement
02:33 Code Overview
03:30 Layout Components
07:15 Creating Nodes
11:25 Adding Icon
14:10 Handling Children
19:35 Adding Indentation
21:55 Adding Animations
30:08 Outro
Try now using the links below
devtools.tech/questions/all?t...
devtools.tech/list/all
You can support our channel via:
rzp.io/l/support-devtools-tech
devtoolstech.gumroad.com/l/su...
www.buymeacoffee.com/yomeshgupta
************************************************************
Devtools Tech is a KZbin channel started as a collaborative effort among like-minded engineers to provide high-quality programming tutorials for free. We firmly believe in knowledge sharing and easy access to quality content for everyone. Hence, this channel is an effort to give back to the community and a step toward our belief -- "We rise by lifting others".
Interview questions: devtools.tech/questions/all?r...
Interview resources: devtools.tech/resources/all?r...
Hidden Gem: devtools.tech/crazyones
Team Members:
Yomesh Gupta
Portfolio: yomeshgupta.com
LinkedIn: / yomeshgupta
Twitter: / yomeshgupta
#javascript #ai #web #frontend #interviewquestions #devtoolstech #code #programming #developement #devtoolstech #code
***********************************************************

Пікірлер: 22

@DevtoolsTech Ай бұрын

Try the question here: devtools.tech/questions/s/how-to-build-a-confluence-like-sidebar-with-tree-structure-or-atlassian-frontend-interview-question-or-react-js---qid---3r7988VsESMQBt9vP1Zi Solve with us: www.topmate.io/yomeshgupta

@ujjwaltiwari8756 Ай бұрын

amazing content 👏👏

@justlifethings4225 Ай бұрын

Nice content. One more follow up question would be : What if the server wants to handle the open/close state of a node. How can we achieve it ? Do we still need to keep the local state isOpen ?

@DevtoolsTech Ай бұрын

If it is controlled by server then we can still have local state for optimistic UI. However, we need to be mindful for failure cases. We can make it fully server controlled without any local state but that would be a bad UX

@justlifethings4225 Ай бұрын

@@DevtoolsTech thanks for the response. Just wanted to understand your thoughts more on bad UI. Server would handle only initial state. Post that, on any user interaction, we update the flag isOpen in our local state. What is bad ux here ?

@DevtoolsTech Ай бұрын

If the server is handling just the initial state then it is fine. I thought you are saying that all interactions are handled by server. We can have initial state as part of the initial data only and all future interactions managed locally. That is good. 👍

@trivedi2690 Ай бұрын

hi sir can i use tailwind in machine coding round , writing pure css takes lot of time ?

@DevtoolsTech Ай бұрын

Hi, usually interviewers prefer that you write pure CSS as they want to test on your understanding and knowledge. Using tailwind or any other library is not desired unless mentioned explicitly. You can always ask the interviewers before starting any problem. However, do practice with pure CSS or SCSS.

@trivedi2690 Ай бұрын

@@DevtoolsTech Sure thanks for reply , devtools is great platform getting confidence solving 1 -2 problem each day . last question sir you are storing the user progress in indexDB in browser but why don't in local storage is it because of limited space in local storage .

@DevtoolsTech Ай бұрын

IndexDB is better. LocalStorage is good for simpler things. For JSON documents, IndexDB is better.

@ShivGamer Ай бұрын

Hi can you tell more about the hiring drive? I can't find it on google

@DevtoolsTech Ай бұрын

Please check this docs.google.com/forms/d/e/1FAIpQLSd681WstbM_4xZLl0BXw1gwOi60Y-P_Xl3LZpIiCXZw7rd5Wg/closedform

@ShivGamer Ай бұрын

@@DevtoolsTech Thanks buddy! Also is there way to be updated with all these stuff?

@DevtoolsTech Ай бұрын

There is no dedicated mechanism. However, you can follow the channel or our telegram/newsletter on the website devtools.tech I try to post the latest updates regularly.

@ShivGamer Ай бұрын

@@DevtoolsTech Sure, Thanks!

@arunpratapsingh9932 Ай бұрын

what code editor are you using?

@DevtoolsTech Ай бұрын

I am using a custom build solution. You can check using devtools.tech/questions/s/how-to-build-a-confluence-like-sidebar-with-tree-structure-or-atlassian-frontend-interview-question-or-react-js---qid---3r7988VsESMQBt9vP1Zi devtools.tech/questions/programming