Help on a very simple react project
I am very new to react, and I want to build a simple horizontal timeline(preferably with adjustable ticks - years, months, days).
I will have people data like name, age, role, etc.. and also quit_date and an avatar. I would want to put the avatars on the timeline according to their quit date. The timeline should be able to scroll endlessly left and right, and when an avatar is clicked the data about this person will be shown on a side drawer or something.
I am not sure if I should use existing timeline components or build my own, but I would like to finish this project as fast as possible.
I am not sure where to start in general, any help would be highly appreciated 🙂
7 Replies
I assume with scrolling infinitely you mean that the scrollbar extends as far as you have users? Because otherwise that's a ux nightmare since you essentially have no scrollbar and can easily land in the farlands and never come back. It's also something normal web scrollbars don't let you do
I don't really see any of this being heavily related to react though. React is just your templating language to layout the markup based on the ingress data. Everything needed to build the timeline is just html and css. The only interactive element is the button press
Your question is very open ended. You're essentially dropping a jira ticket into chat without a design picture. Help requests work best when there's a very specific thing we can help with. I'd say try to break down the problem into its individual components and then start working on them one by one. If you have specific questions for a small component, it's much easier to help you out. Otherwise we'd just be doing a full work day's worth of frontend development for you, which is not how learning works
@StefanH Thank you for your reply!
your'e right, scrollbar that extends as far as I have users is a better idea.
I thought I could use React to organize the design into components.
Lets say I am working on the html and css of the line itself, is there heavy css in order to make a line with tics on it? Should I use flex, absolute.. all the css properties and options are overwhelming for a newbie I am not sure what is the correct way to do things..
Also about the design, if there would be two users with close quit_dates do the avatars need to overlap?
I tried to be more specific this time, if it is still open ended please tell me
I think it might help if you create a mockup in something like figma so we can visualize what you want to build
How to approach style and markup heavily depends on what you're trying to build. Sometimes small visual changes in the design require a lot of reworking on the dom and styles
I. is how it should look before any zoom
II. is after a zoom(on specific part of timeline)
the II. didnt come as planned but it should demonstrate the general idea
This is not a trivial component so if you're a beginner you may be biting off more than you can chew
I see a lot of overlapping elements with absolute positioning. You could also try ordering stuff with flex or grid but if the zooming has to be highly dynamic that might be too rigid
The timeline's main line is just a div with background color. The ticks are the same. The year labels are just spans positioned the same way, same for the bubbles
the zooming will require javascript to change the positions of all the elements and to fade in the month markers
I tried describing the problem to "lovable" and it produced pretty much what I wanted.. I am now trying to understand the code it used.. not so simple