Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/anagarango/user-progress-demo


https://github.com/anagarango/user-progress-demo

Last synced: about 2 months ago
JSON representation

Awesome Lists containing this project

README 

        
# 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](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](https://www.loom.com/), you will receive extra points. ([See docs/img/ for screenshots](docs/img/) 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:



```bash

# Install dependencies

npm install



# Start the development server

npm run dev

```



Open [http://localhost:3000](http://localhost:3000) to view it in your browser.