Zedexel-Assignment

Zedexel Dashboard - Frontend Assignment This repository contains the Zedexel Dashboard, a modern and interactive admin panel built using Next.js, TypeScript, Tailwind CSS, and Lucide Icons. It includes features like dynamic page titles, search functionality, and a responsive sidebar navigation.

#My description

ZedeXeL Front-End Dashboard Assignment

Project Overview

This project is a Next.js + TypeScript front-end dashboard assignment for the ZedeXeL Front End Dashboard Challenge. It includes:

• A paginated Projects List Page
• A Project Details Page
• Dynamic navigation and search functionality
• UI implementation using Tailwind CSS

Features

✅ Responsive Sidebar Navigation
✅ Dynamic Page Titles
✅ Project Details with Tabs
✅ Live Search with Typing Effect
✅ Styled Components using Tailwind CSS
✅ Optimized Asset Loading with next/image

Tech Stack

• Next.js (App Router)
• TypeScript
• Tailwind CSS
• Lucide React Icons

Installation & Setup

1. Clone the repository:

   git clone https://github.com/raj20889/zedexel-dashboard.git
   cd zedexel-dashboard
   

2. Install dependencies:

   npm install
   

3. Run the development server:

   npm run dev
   

4. Open http://localhost:3000 in your browser.

Folder Structure

📂 zedexel-dashboard
├── 📂 app
│   ├── 📂 components  # Reusable UI components
│   ├── 📂 pages       # Pages (projects list, details)
│   ├── 📂 public      # Static assets (logo, images)
│   ├── 📂 styles      # Global CSS & Tailwind config
│   ├── layout.tsx    # Root layout structure
│   ├── page.tsx      # Main dashboard page
├── 📜 package.json   # Dependencies
├── 📜 tailwind.config.js  # Tailwind setup
└── 📜 tsconfig.json  # TypeScript config

Screenshots

Improvements & Future Scope

• Implement API integration for real-time data
• Add authentication and user roles
• Improve search functionality with debounce

Author

👤 Mohit Raj
GitHub: @raj20889 Project Link: (https://zedexel-dashboard-pink.vercel.app/)

⭐ If you like this project, consider giving it a star! ⭐