Rudratek Dashboard Project by Hatim El HassakRudratek Dashboard Project by Hatim El Hassak

Rudratek Dashboard Project

Hatim El Hassak

Frontend Engineer

Next.js

React

TypeScript

Computer Software

Rudratek Dashboard

A high-fidelity project management dashboard engineered for the Rudratek Frontend Assessment.

This application demonstrates a mastery of modern React architecture, responsive design systems, and premium user experience patterns. It is designed not just as a prototype, but as a production-ready SaaS foundation.

⚡ Key Features

Feature Description 📊 Analytics Overview Real-time aggregation of project counts, budgets, and status trends with visual indicators. 📑 Advanced Filtering Debounced search and multi-select filtering for managing complex project lists. 📱 Mobile-First A fully responsive layout that transforms from a desktop sidebar to a native mobile navigation. 🎨 Minimalist Luxury A refined aesthetic using glassmorphism, subtle animations, and strict typographic hierarchy. 🌓 Dark Mode Context-aware theme switching with persistent state management. 👥 Team Collaboration Visual indicators for team members and timeline tracking within project details.

🏗️ Architecture

The project is built on Next.js 14 (App Router) and follows a strict modular architecture:

src/
├── app/                 # App Router pages and layouts
│   ├── clients/         # Client portfolio view
│   ├── settings/        # User preferences
│   └── page.tsx         # Main Dashboard
├── components/          # Reusable UI atoms and molecules
│   ├── Sidebar.tsx      # Responsive navigation
│   ├── ProjectCard.tsx  # Polymorphic card/row component
│   └── ...
├── contexts/            # React Context (Theme, State)
├── data/                # Mock data layer (Simulated API)
└── utils/               # Shared helpers (Formatters, CN)

Design Decisions:

Zero-Runtime CSS: Utilizes Tailwind CSS for optimal performance and small bundle size.

Edge-Ready: Designed to be deployable on Vercel Edge Networks.

Type Safety: 100% strictly typed codebase with TypeScript.

🚀 Getting Started

Prerequisites

Node.js 18+

npm or yarn

Installation

Clone the repository

git clone https://github.com/hatimhtm/rudratek-dashboard.git
cd rudratek-dashboard

Install dependencies

npm install

Run the development server

npm run dev

Open the dashboard Navigate to http://localhost:3000

🔧 Post-Submission Refinements

Based on feedback, the following enhancements were implemented:

Added a Sticky Blur Header to ensuring scrolling content fades gracefully.

Implemented a dedicated Settings Page with interactive UI elements.

Refined Z-Index Layering for modal backdrops.

Updated aesthetic to Minimalist Luxury.

📬 Connect

Hatim El Hassak — Frontend Engineer

Like this project

Posted Feb 13, 2026

Developed a high-fidelity project management dashboard for Rudratek using React.

Likes

Views