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

Подписаться 34 тыс.

Просмотров 9 тыс.

50% 1

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 RU-vid 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
***********************************************************

Наука

Опубликовано:

25 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 22

@DevtoolsTech 2 месяца назад

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 2 месяца назад

amazing content 👏👏

@justlifethings4225 2 месяца назад

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 2 месяца назад

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 2 месяца назад

@@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 2 месяца назад

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. 👍

@arunpratapsingh9932 2 месяца назад

what code editor are you using?

@DevtoolsTech 2 месяца назад

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

@trivedi2690 2 месяца назад

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

@DevtoolsTech 2 месяца назад

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 2 месяца назад

@@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 2 месяца назад

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

@ShivGamer 2 месяца назад

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

@DevtoolsTech 2 месяца назад

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

@ShivGamer 2 месяца назад

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

@DevtoolsTech 2 месяца назад

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 2 месяца назад

@@DevtoolsTech Sure, Thanks!