An interview assesment with the main of finding out my knowledge on some key technologies
I was expected to replicate a figma design and implement the following
- Build the 4 pages Login, Dashboard, User page, User details page
- The user pages should pull data from a mock api with 100 records
- Use local storage or indexedDB to store and retrieve user details on the user details page.
- The page must be mobile responsive
In response to the expectations, I built the 4 pages required(Screenshots below)
Apart from the required work, I was also able to run unit test on the dashboard component to make sure it was displaying fine to the viewers on the browser.
A code snippet for the unit test below
describe('Test suite for Dashboard Page', () => {
it('renders the navbar on the dashboard', () => {
render(<Dashboard />);
const navElement = screen.getByRole('navigation');
expect(navElement).toBeInTheDocument();
})
it('renders the sidebar on the dashboard', async () => {
render(<Dashboard />);
const sideBar = await screen.findByTestId('sidebar');
expect(sideBar).toBeVisible();
})
it('renders users data on the dashboard', async () => {
render(<Dashboard />);
const usersData = await screen.findByTestId('users-data');
expect(usersData).toBeVisible();
})
});
An Image of the test output below:
Technologies used
- React(TypeScript)
- SASS(for styling)
- Git
- Main Link
- Login page - '/login'
- Dashboard page - '/'
- User Details Page - '/user/{unique_id}'
Some of the major challenges faced on these project are as follows
-
Having to understand the whole instructions took a lot of time, this was beacause I didn't plan to leave anything out
-
Running Unit test with React TypeScript was a little bit tricky but I was able to acheive it
This project was fun working on and it gives me a bit of knowlegde about what to expect at lendsqr when given the opporuntity to work in the team