t-eszter / userGroupTask

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

To start the project:

  1. npm install
  2. npm run dev

In the following tasks, you'll get a chance to showcase your skills by improving a crucial part of our React app. These challenges are designed to reflect a real-world scenario you might face while working with us, offering you a glimpse into the kind of problems we solve every day.

You have the freedom to approach these problems however you see fit. You could opt for a complete design overhaul or subtle changes to improve anything in the code base and initialize git on it — the choice is yours. You can also change the mocked queries or rewrite everything.

We don't want to limit your creativity and problem-solving approach with strict rules. We're interested in understanding how you think and how you write code.

This is not a time-limited challenge, so take the time you need to come up with a thoughtful solution. The main goal is to have a discussion about your approach once you feel ready.

Support: Please feel free to reach out to us if you have any questions or need any clarifications during the course of the challenges. We're here to help and want to ensure you have the best possible opportunity to succeed.

Submission: When you're ready to submit your solution, get in contact with us and we talk about the next steps.

User Group Assignment - Coding Challenge 1

Overview: Our app includes a component that allows users to assign system users to user groups. As per the current design, users can be both assigned and removed from these groups. However, feedback and testing have shown us that the current way of assigning users to user groups isn't as intuitive or transparent as it should be.

That's where you come in.

Challenge: Your task is to revamp the user-group assignment process. Using the existing framework and guided by the screenshots provided, you need to rewrite the assignment process to make it more intuitive and transparent. The challenge here is to simplify the user experience while ensuring the functionality is not compromised.

The key things we will be looking for are:

  • How well your solution addresses the problem
  • The quality of your code
  • Your consideration and approach towards enhancing the user experience

Editor - Coding Challenge 2

Overview: One of our features in the web application is showing the processed documents inside the tool. Working with and viewing the documents should be as smoothly as possible.

Challenge: For this challenge, you are tasked with creating a scrollable and virtualized document viewer. The viewer should not load all the pages at once, but rather load them dynamically, only when they are in the viewport or close to being scrolled into view. It is also important that the viewer is responsive and resizes on container dimension changes, including the pages inside.

In addition, your viewer should support a zooming functionality that zooms into a specific point in the page, based on the current mouse position. This will ensure that the user can get a closer look at any specific section of the page without having to manually navigate to that point after zooming.

The key things we will be looking for are:

  • How well your solution addresses the problem
  • The quality of your code, including architecture of the solution and how you managed props, hooks and states
  • Performance - The virtualized rendering should be smooth and efficient even with large amount of pages.

About


Languages

Language:TypeScript 92.6%Language:CSS 5.5%Language:JavaScript 1.0%Language:HTML 0.9%