Building an Employee Directory with Chakra UI and Next.js

Learn to create an employee directory using Chakra UI and Next.js.

We'll cover the following

We can reuse the project we already set up in the previous lesson for Chakra UI and Next.js to build our employee directory. Still, we’ll need to make some minor changes to the code we have already written.

Employee data

First of all, we’ll need the employee data. The employee data contains the following properties:

  • id

  • username

  • first_name

  • last_name

  • description

  • job_title

  • avatar

  • cover_image

Now, a new directory called /data is created and a JavaScript file users.js, where we’ll place our employee data:

Get hands-on with 1400+ tech skills courses.