Skip to content

Latest commit

 

History

History
101 lines (75 loc) · 3.4 KB

README.md

File metadata and controls

101 lines (75 loc) · 3.4 KB

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

implementation

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

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
  1. Navigate to the project directory:
cd job-dashboard
  1. Install dependencies:
pnpm install
  1. Run the development server:
pnpm run dev

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