/teams-dashboard-assignment

Assignment React app

Primary LanguageTypeScript

Teams Dashboard Single-Page Application

Tech Stack

Framework: Vite+React

State Management: Redux Toolkit

Styling: Tailwind

API Mocking: JSON Server (0.17.x version for server-side pagination and search support)

Setup

Step 1

Change to app's subdirectory:

cd frontend

Step 2

Install the dependencies:

npm install

Step 3

Run Vite development server with:

npm run dev

This will either open the browser with the app immediately or print out the URL to follow.

To also expose network host, use:

VITE_HOST=1 npm run dev

Important

Exposing network host may be necessary to open the app on a mobile device connected to the local network.

Step 4

Run json-server with:

npm run json-server

This will run it with the default host and port (localhost and 3001, respectively). To use different host and port, use environment variables JSON_SERVER_HOST and JSON_SERVER_PORT:

JSON_SERVER_HOST=192.168.10.105 JSON_SERVER_PORT=3002 npm run json-server

Important

Specifying the host may be necessary to open the app on a mobile device connected to the local network.

Important

If you run json-server with a non-default host, you also have to edit the environment variable in frontend/.env. The name of the variable to edit is VITE_API_URL. For example, you might set it to VITE_API_URL=http://192.168.10.105:3001.

Potential Areas for Improvement

Given more time, I would look into:

  • Setting up pre-commit hooks for formatting and linting and/or GitHub Actions workflows

  • Making certain UI elements more intuitive and accessible (e.g. mobile sidebar would have a close button, in addition to being closed by tapping on the backdrop area; sidebar should be accessible with keyboard too; etc)

  • Packaging the app

  • Centralizing styling and theming

  • Adding dark mode

  • Making the table of team members scrollable, in case we have a large team

  • Adding infinite scrolling to teams list with on-demand fetching (I'm not a big fan of pages)

  • Making team cards not expand on click + drag (only on single click)

  • Cleaning up the code in general. While working on this assignment I was focused on learning. I used Redux for the first time, and my prior exposure to Tailwind was limited. Additionally, I had to brush up some of my React knowledge. This combination had an impact on my ability to focus on other areas, such as consistency, architectural choices, etc.