Job Preview Dashboard

A modern job preview dashboard built with Next.js, TypeScript, and Tailwind CSS, featuring custom-built components without relying on any external component libraries. This project is a pixel-perfect ui implementation of the original design with full-responsiveness

Figma Link Live Link

Screenshot of the deployed page

Runing The App Locally

Features

• Pixel-perfect implementation of the original design.
• Fully responsive layout
• Interactive navigation, user dropdown and button with hover effects
• Well-structured and modular codebase
• Utilizes Tailwind CSS for efficient styling
• TypeScript for enhanced type safety and developer experience
• Custom-built components for a lightweight and tailored user interface

Folder Structure

job-dashboard/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   ├── components/
│   │   ├── layout/
│   │   │   └── Header.tsx
│   │   ├── job/
│   │   │   ├── JobDetails.tsx
│   │   │   ├── JobStats.tsx
│   │   │   └── CompanyInfo.tsx
│   │   └── ui/
│   │       ├── Button.tsx
│   │       ├── Tab.tsx
│   │       └── Badge.tsx
│   ├── lib/
│   │   └── utils.ts
│   └── types/
│       └── index.ts
├── public/
│   └── images/
│       └── logo.svg
└── tsconfig.json

We've chosen this structure for several reasons:

1. Separation of Concerns: Components are organized by their function (layout, job-specific, UI elements).
2. Reusability: UI components are isolated, making them easy to reuse across the app.
3. Scalability: As the app grows, new features can be added in their respective directories without cluttering existing code.
4. Maintainability: The clear structure makes it easier for developers to find and update specific components.

Tech Stack

• Next.js
• TypeScript
• Tailwind CSS

Custom Components

One of the key features of this project is that all UI components are custom-built. This approach allows for:

• Complete control over the design and functionality of each component
• A lighter bundle size, as we're not importing unnecessary code from component libraries
• A more tailored user experience that perfectly matches the design specifications

Running the App Locally

1. Clone the repository:

git clone https://github.com/VinayakaHegade/job-dashboard.git

2. Navigate to the project directory:

cd job-dashboard

3. Install dependencies:

pnpm install

4. Run the development server:

pnpm run dev

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