/user-progress-demo

Primary LanguageTypeScript

User Progress Demo - Starter

Welcome! This is The Adpharm's version of a technical assessment.

Overview

This project is a React (TypeScript) + Vite + Tailwind starter template.

In src/lib/data.ts, you will find an AI-generated list of users (usersProgress). Your task is to create a dashboard that displays the list of users and their progress through a set of learning modules.

Your audience is a manager who wants to see how their team is progressing through a set of learning modules. They need to see a list of all users, their progress, and a visual representation of their progress. The information should be easily accessible and quickly understandable at a glance.

Requirements

  • Display the list of users and their progress through the learning modules.
  • Display the questions and answers in a way that is easy to read and understand.
  • Ensure the interface is mobile responsive.

What We're Looking For

  • Problem-Solving Ability:
    • How do you display a list of users and their progresses in the most effective way? A table? Cards? Some other way?
    • How do you account for mobile responsiveness? Is it clear that mobile was considered in the design? Or was it an afterthought?
  • Design and Functionality: Your ability to create a design that is both functional and visually appealing.
  • Simplicity: Avoid over-engineering or over-abstraction.

BONUS!!

As a bonus, if you can develop your dashboard in the style of Loom, you will receive extra points. (See docs/img/ for screenshots of Loom's style NOTE: this is just for you to get a sense of the style - you do not have to use any/all of the components shown). You do not need to create a sidebar or modify the navigation - focus solely on the dashboard. For example, if you choose to use a table to display the data, make it look like Loom's table. If you include any buttons, design them to resemble Loom's buttons. You get the idea.

If you can pull this off successfully, you're pretty much job-ready as far as we're concerned!

FAQs

  • Is there a deadline? No, there is no deadline. Do keep in mind that we will review submissions on a first-come, first-serve basis.
  • Can I use any third-party libraries? Yes, you can use any third-party libraries you like.
  • Can I use a UI library? Yes, you can use a UI library like Chakra UI, Ant Design, etc.
  • Can I change/add files to the project? Yes, you can change/add any files you like.
  • Can I change/add to the data? Yes, you can change/add to the data in [src/lib/data.ts].
  • Do I need to deploy the project? No, you do not need to deploy the project. We will run it locally.

Submission

Please submit your solution by creating a new public repository on GitHub and sending us the link. No need to deploy anything - we will run it locally.

Good luck!!

Getting started

First, either fork this repository or clone it to your local machine and change the remote URL to your own repository.

This is a React SPA bootstrapped with npm create vite@latest app-name -- --template react-ts. Run the following commands to get started:

# Install dependencies
npm install

# Start the development server
npm run dev

Open http://localhost:3000 to view it in your browser.