Admin UI Geektrust Challenge

Deployed here

About The Project

• This project is a Geektrust Frontend Challenge. Using instructions from here
• This is a small Admin side user management dashboard which draws user data from this API Endpoint.
• The website is mobile responsive as well.
• Checks window.innerWidth<600 and Shows only 3 pagination buttons instead of 5, Shows "Delete" button instead of "Delete Selected" and abbreviates user role to fit the narrow screens
• Implemented a few important integration tests with Jest

This is a Next.js project bootstrapped with create-next-app.

Screenshots

Main Screen

Mobile View (pixel 5)

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Tech used

• React 18 + TypeScript setup using Next js
• Axios - to fetch data from API
• Tailwind CSS - for styling the components
• React Toastify - for showing alerts on performing actions like Delete or Edit
• React Icons - to look good

Achievements

PERFECT Badges and Score

Overall Feedback

The UI is very well designed. The UI code is modularized and have adequate components. UX is really good. Areas of Improvement: