🧪 Frontend Developer Pre-Interview Task

🚀 Task Title: "Build a Custom Discord Server Admin Dashboard (Frontend Only)"

📌 Objective

Create a custom Discord Server Admin Dashboard using Next.js and Tailwind CSS. The dashboard should present server statistics and allow basic interaction (e.g., managing users, viewing messages, toggling roles) — all **mocked in the frontend with no backend or Discord API integration.

You must design and implement everything from scratch, including layout, styling, responsiveness, and mock data handling.

🛠 Stack & Tools

• Framework: [Next.js 14+ (App Router)]
• Styling: Tailwind CSS
• Icons: Heroicons or Lucide
• State: React Hooks, Context API (no Redux or Zustand unless justified)

🎯 Requirements

1. Design & Layout (30%)

• Create a unique dashboard layout:

  • Left sidebar for navigation (e.g., Dashboard, Members, Roles, Messages)
  • Top navbar with profile, notification icon, and theme toggle
  • Main content area that changes based on selected navigation item

• You must design this layout yourself. No templates, UI kits, or Figma mockups are provided.

2. Pages & Components (30%)

Build the following interactive sections:

a. Dashboard

• Show 3-5 metric cards (e.g., Total Members, Online Users, Active Roles, Messages Today)
• Include a line/bar chart of member growth over time (use mock data)

b. Members Page

• Display a paginated and searchable table of users with:

  • Avatar, Username, Join Date, Role
  • Filter by role
  • Sort by join date or name

• Modal form to simulate adding a new member (mocked only)

c. Roles Page

• List all server roles with color labels
• Toggle switches to enable/disable role visibility
• Allow renaming a role (mocked input)

d. Messages Page

• Show a list of messages with avatar, username, timestamp, and message content
• Add a “Delete” button (no real deletion required)

3. Responsiveness (10%)

• Must work well across desktop, tablet, and mobile views.
• Sidebar should be collapsible on mobile.

4. Accessibility (10%)

• Keyboard navigation, ARIA labels, proper heading structure, and contrast.

5. Code Quality (20%)

• Modular file structure
• Reusable components
• Descriptive variable and function names
• Comment critical logic
• No unnecessary packages

⛔ Restrictions

To ensure the task reflects your own skills and judgment:

• Do not use AI tools (ChatGPT, Copilot, etc.)
• Do not use UI libraries or component kits like MUI, Chakra, Shadcn, or DaisyUI
• Do not copy-paste templates or dashboards from the internet
• No backend, API calls, or actual Discord integration required

You may be asked to explain decisions and share commit history during review.

🕒 Time Expectation

Estimated time: 2 Days from task assignment (You can take more, but evaluate based on this benchmark.)

📦 Submission Guidelines

1. Push the code to GitHub and submit your link in <#1357604959335743578> .

2. Include a short README.md explaining:

   • Your approach
   • How to run the project
   • Optional: screenshots

3. (Optional) Loom video explaining the project in 1–2 minutes.

✅ Bonus (Optional)

• Add a dark mode toggle (persisted in local storage)
• Animate transitions using Framer Motion
• Add unit tests for 1–2 components using Vitest or Jest