0% found this document useful (0 votes)
10 views2 pages

Floqer Software Dev Internship Task

Floqer

Uploaded by

sanouwaralam2000
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
10 views2 pages

Floqer Software Dev Internship Task

Floqer

Uploaded by

sanouwaralam2000
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Floqer’s Assignment for Software Dev Internship Role

This assignment is designed to help us understand your technical skills.

Some points and tips:


1. Feel free to use whichever language/components you like.
2. React (in TypeScript) is preferred because we use it.
3. Check out Ant design for components but feel free to use whichever library you’re comfortable
with.
4. There is no hard rule, so be creative on these tasks.

Task 1: Basic Table


Data Information:
● You’ll be working with the data set here
● The dataset provides information on ML Engineer salaries from 2020 to 2024
● You can either create an API to fetch this data or just put this data in a file in your frontend
codebase.

Description:
Based on this data, create a table (call it “main table”) with the following columns:

1. Year
2. Number of total jobs for that year
3. Average salary in USD

Users should be able to sort the table by any column.

Task 2: Analytics
Now our users want to understand this data even further. Using the same data, create the following:

1. A line graph that shows how this number has changed from 2020 to 2024 (kaggle link above has
similar bar graph)
2. Now, when I click a row from our main table, a second table should appear that displays
aggregated job titles and the number of jobs for that year. For example, if the user clicks on
2022, all the titles from 2022 should appear in another table, along with the sum of how many
times each job appeared in 2022.
Bonus task: Using LLMs

Now let’s say our users want to find insights from the data beyond the graphs. It was not possible before
LLMs, but today it’s possible.

Create a chat app that creates the best response based on business knowledge. There’s a tutorial
attached to this which shows how to do it for Sales Emails, your job is to do it for data from Kaggle.

Here’s a tutorial that shows how this can be achieved: [Link]

For the bonus task, you’ll need an OpenAI API key. When you’re done with the above tasks and the setup
of the Bonus task, just text me on internshala or email me at shivammahajan100@[Link], and I’ll
provide you with the API key.

Submission instructions:
1. Use Netlify or some other free tool to host your work, and share the link.
2. Push your code on GitHub and share the link with us as well.

Common questions

Powered by AI

Employing LLMs could enhance the user's ability to extract deeper insights by processing natural language queries to provide explanations or predictions based on the salary data. For example, users could ask qualitative questions about trends or correlations not evident from the graphs and tables alone. The LLM could use this input to generate analyses of salary growth trends, predict future demands, or correlate salary with job titles, providing a layer of business knowledge that goes beyond what traditional data visualization tools can offer .

Sorting features can be implemented by adding clickable headers in the table columns that trigger sorting functions. It's crucial to provide visual indicators like arrows to show the sorting order. Factors affecting user experience include ensuring fast performance and handling large datasets efficiently, avoiding the need for full page re-renders. Use of libraries like React can aid in implementing these with hooks or state management to ensure smooth and instantaneous updates to the data display .

The data table should include columns for the year, the number of total jobs for that year, and the average salary in USD. These features are important because they provide a clear overview of the employment trends and compensation for ML Engineers. The year column helps track changes over time, the number of jobs indicates demand in the field, and the average salary provides insight into compensation trends, essential for analyzing market dynamics .

Integrating API functionalities allows a frontend codebase to dynamically fetch, update, and display real-time data, thus ensuring that information presented is always current without needing manual updates. Using APIs, clients can request just the data necessary for a given page, reducing bandwidth usage and improving load times. Considerations include endpoint reliability, data caching strategies for improved performance, error handling mechanisms to manage failed requests gracefully, and the synchronization of visualizations with latest data updates .

Creativity plays a vital role in devising unique solutions for effectively presenting and analyzing data. It involves selecting the right visualizations that best represent the data's insights, such as choosing between a line chart and bar chart based on user preferences and the type of data. Encouraging creativity includes providing flexibility in choosing technologies, encouraging experimenting with different libraries, and allowing personalization based on user feedback. The assignment's open-ended nature promotes creative approaches tailored to user requirements .

Design frameworks like Ant Design offer pre-built components and styling rules that facilitate faster development, ensuring consistency and uniformity in design. This can significantly reduce the effort involved in styling and implementing common UI elements, allowing developers, especially interns, to focus more on logic and functionality. They also bring in benefits such as responsiveness, accessibility, professional aesthetics, and ease of integrating with modern frameworks like React, which are beneficial for meeting both project deadlines and quality expectations in internships .

An interactive feature can be implemented by using an event listener that triggers a function when a row in the main table is clicked. This function would fetch the relevant data for the selected year and display it in a secondary table. This secondary table would aggregate job titles along with the number of jobs for that year. Implementing this would involve JavaScript, for example, using event delegation and state management techniques in React to update the UI dynamically upon user interaction .

Setting up a chat application with LLMs involves several steps: acquiring an OpenAI API key, integrating the API with the application backend, creating a user interface for interacting with the chat, and ensuring data from Kaggle is appropriately preprocessed for effective querying. Considerations include data privacy and security, API request limitations, latency in responses, and ensuring the user interface is intuitive. The application must handle diverse user queries and return precise, contextually relevant insights, as shown in tutorials like the one for sales emails but adapted for data analytics .

Hosting on platforms like Netlify offers advantages such as simple deployment processes, built-in continuous integration and deployment features, automatic HTTPS, and easy integration with Git frameworks. However, potential challenges include handling limitations on free tier usage such as bandwidth and capacity, potential latency in global access depending on CDN configuration, and troubleshooting custom configuration needs. These platforms offer customizable settings, but users may require knowledge of web development practices to troubleshoot and optimize deployments effectively .

When selecting a library or framework for a data visualization project, considerations should include compatibility with existing technology stack (e.g., preference for React/TypeScript use), ease of use and learning curve, support for interactive features like sorting and filtering, community support and documentation, and the ability to integrate with other tools like APIs or databases. Using libraries like Ant Design could provide consistent styling and easy integration, which is important for maintaining a cohesive user experience and optimizing development efficiency .

You might also like