🚀 Job Value Assessment Tool

Professional Career Decision Support Platform

A comprehensive web application that helps professionals quantitatively evaluate their current job positions through a scientific assessment framework.
Make data-driven career decisions by analyzing job satisfaction across multiple dimensions with advanced analytics and personalized insights.
One-click FREE assessment of your career satisfaction and job value.

Live Demo · Documentation · Report Issues · Request Features

Share This Project

^{🌟 Transforming career decision-making through quantitative assessment. Built for modern professionals seeking clarity.}

📸 Application Screenshots

[!TIP] Experience the complete assessment journey from start to personalized insights.

Assessment Start - Welcome & Introduction

Multi-step Assessment - Basic Info Collection & Detailed Evaluation

Results Dashboard - Comprehensive Analysis & Insights

📱 More Screenshots

Version 1.0 - Initial Design

Detailed Results with Recommendations

🎬 Demo Video

[!NOTE] Watch the complete assessment process in action.

2024-12-14.16-29-11.mp4

Complete assessment workflow demonstration

Tech Stack Badges:

We are passionate about empowering professionals to make informed career decisions through data-driven insights. This comprehensive job assessment tool combines scientific evaluation methodologies with modern web technologies to provide actionable career guidance.

Whether you're considering a career change, negotiating with your current employer, or simply seeking to understand your job satisfaction levels, this platform offers objective analysis across multiple dimensions of work life.

	No registration required! Start your assessment immediately.
	Join our community! Star us for updates and contribute to the project.

⭐ Star History

Experience a holistic job evaluation system that analyzes your position across 10 critical dimensions. Our multi-category framework examines Input (time investment, work intensity), Output (compensation, growth potential), and Compatibility (skill match, value alignment) factors.

Multi-dimensional Assessment Interface

Assessment Categories:

• 💼 Input Factors: Time investment, work intensity, stress levels
• 💰 Output Factors: Compensation, growth opportunities, job security
• 🎯 Compatibility: Skill utilization, value alignment, work environment

Advanced weighted scoring algorithm that processes your responses through a sophisticated calculation engine. Each dimension carries specific weights based on career research, ensuring accurate and meaningful results.

Visual Analytics Dashboard

Key Metrics:

• Balance Score: Equilibrium between effort and rewards
• Match Score: Alignment with your profile and preferences
• Overall Rating: Comprehensive job satisfaction index

Beyond core assessment capabilities, the platform includes:

• 📊 Interactive Visualizations: Radar charts and bar graphs for data insights
• 💡 Personalized Recommendations: AI-generated improvement suggestions
• 📈 Progress Tracking: Save and compare assessments over time
• 🌐 Multi-language Support: Comprehensive internationalization
• 📱 Responsive Design: Optimized for all devices
• 🔒 Privacy-First: All data processed locally
• ⚡ Real-time Updates: Instant score calculation and feedback
• 📋 Export Options: Download results for future reference

✨ More features are continuously being added based on user feedback.

Next.js 15

React 18

TypeScript 5

Tailwind CSS

Zod Validation

Zustand

Recharts

Frontend Stack:

• Framework: Next.js 15 with App Router architecture
• Language: TypeScript for comprehensive type safety
• Styling: Tailwind CSS with shadcn/ui components
• State Management: Zustand with persistence middleware
• Form Handling: React Hook Form with Zod validation
• Data Visualization: Recharts for interactive charts

UI/UX Components:

• Design System: shadcn/ui component library
• Icons: Lucide React icon set
• Animations: Tailwind CSS animations
• Responsive: Mobile-first responsive design
• Accessibility: WCAG compliant components

Development Tools:

• Build System: Next.js optimized bundling
• Code Quality: ESLint + Prettier configuration
• Type Checking: Strict TypeScript compilation
• Hot Reload: Fast refresh development experience

graph TB
    subgraph "Frontend Application"
        A[Next.js App Router] --> B[React Components]
        B --> C[Zustand Store]
        C --> D[Assessment Engine]
        D --> E[Visualization Layer]
    end
    
    subgraph "State Management"
        F[Assessment State]
        G[User Progress]
        H[Results History]
        I[Persistence Layer]
    end
    
    subgraph "Assessment Engine"
        J[Scoring Algorithm]
        K[Recommendation System]
        L[Analytics Calculator]
    end
    
    C --> F
    C --> G
    C --> H
    H --> I
    D --> J
    D --> K
    D --> L
    
    subgraph "UI Components"
        M[Assessment Forms]
        N[Progress Indicators]
        O[Results Dashboard]
        P[Charts & Graphs]
    end
    
    B --> M
    B --> N
    B --> O
    E --> P

sequenceDiagram
    participant U as User
    participant S as Start Page
    participant B as Basic Info
    participant A as Assessment
    participant R as Results
    participant H as History
    
    U->>S: Access Application
    S->>B: Begin Assessment
    B->>A: Complete Basic Info
    A->>A: Multi-step Evaluation
    A->>R: Calculate Scores
    R->>U: Display Results
    R->>H: Save to History
    H->>U: Track Progress

src/
├── app/                          # Next.js App Router
│   ├── assessment/              # Assessment pages
│   │   ├── start/              # Welcome & introduction
│   │   ├── basic/              # Basic information
│   │   ├── evaluation/         # Main assessment
│   │   └── result/             # Results display
│   ├── globals.css             # Global styles
│   └── layout.tsx              # Root layout
├── components/                  # Reusable components
│   ├── ui/                     # shadcn/ui components
│   ├── forms/                  # Form components
│   ├── AssessmentForm.tsx      # Main assessment logic
│   └── AssessmentResult.tsx    # Results visualization
├── store/                      # State management
│   ├── assessment.ts           # Assessment store
│   └── store.ts               # Store configuration
├── types/                      # TypeScript definitions
│   └── assessment.ts           # Assessment types
└── lib/                       # Utility functions
    └── utils.ts               # Helper functions

• ⚡ Loading Speed: < 2s first contentful paint
• 🚀 Interactive Time: < 1s time to interactive
• 💨 Assessment Processing: Real-time score calculation
• 📱 Mobile Performance: 95+ Lighthouse score
• 🔄 State Updates: Instant UI response

Performance Optimizations:

• 🎯 Code Splitting: Automatic route-based splitting
• 📦 Bundle Optimization: Tree-shaking and minification
• 🖼️ Image Optimization: Next.js Image component
• 🔄 Caching Strategy: Efficient state persistence

• Node.js 18.0+ (Download)
• npm/yarn/pnpm package manager
• Git (Download)

1. Clone Repository

git clone https://github.com/ChanMeng666/job-valuation.git
cd job-valuation

2. Install Dependencies

# Using npm
npm install

# Using yarn
yarn install

# Using pnpm (recommended)
pnpm install

3. Start Development

npm run dev

🎉 Success! Open http://localhost:3000 to view the application.

The application runs entirely client-side and doesn't require additional environment variables for basic functionality.

# Start with hot reload
npm run dev

# Build for production
npm run build

# Start production server
npm run start

# Run linting
npm run lint

Vercel (Recommended)

Manual Deployment:

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel --prod

Other Platforms:

Deploy with Netlify	Deploy with Railway

# Build Docker image
docker build -t job-valuation .

# Run container
docker run -p 3000:3000 job-valuation

Getting Started:

1. Access Application at demo link
2. Click "Start Assessment" to begin evaluation
3. Complete Basic Information about your job and background
4. Evaluate Each Dimension across multiple categories
5. Review Results with detailed analytics and recommendations

Step 1: Basic Information

• Personal details (age, education, experience)
• Job information (industry, role, level, type)

Step 2: Multi-dimensional Evaluation

• Input Category: Time investment, work intensity, stress levels
• Output Category: Compensation, growth opportunities, job security
• Compatibility: Skill match, value alignment, work environment

Step 3: Results Analysis

• Comprehensive scoring across all dimensions
• Visual analytics with radar and bar charts
• Personalized improvement recommendations

Score Interpretation:

• 90-100: Excellent job match
• 80-89: Good job with minor improvements needed
• 70-79: Average job with areas for enhancement
• 60-69: Below average, consider changes
• Below 60: Poor match, significant changes recommended

Currently focused on client-side functionality with potential for future integrations:

Setup Development Environment:

# Clone repository
git clone https://github.com/ChanMeng666/job-valuation.git
cd job-valuation

# Install dependencies
npm install

# Start development server
npm run dev

Development Scripts:

# Development
npm run dev          # Start dev server with hot reload
npm run build        # Production build
npm run start        # Start production server
npm run lint         # ESLint code analysis

1. Create Feature Branch:

git checkout -b feature/new-feature

2. Development Guidelines:

• ✅ Follow TypeScript best practices
• ✅ Maintain component reusability
• ✅ Update type definitions
• ✅ Test thoroughly across devices
• ✅ Follow existing code patterns

3. Assessment Logic Extensions:

// Add new dimension to DIMENSIONS array
export const DIMENSIONS: Dimension[] = [
  // ... existing dimensions
  {
    id: "new_dimension",
    title: "New Assessment Area",
    weight: 1.0,
    category: "付出" | "回报" | "匹配度",
    description: "Description of new dimension",
    metrics: [
      // Define metrics with scoring levels
    ]
  }
];

Manual Testing Checklist:

• Complete assessment flow works
• All form validations function
• Charts render correctly
• Mobile responsive design
• State persistence works
• Score calculations accurate

We welcome contributions! Here's how you can help improve this project:

Contribution Areas:

• 🐛 Bug Reports: Report issues with detailed reproduction steps
• 💡 Feature Requests: Suggest new assessment dimensions or UI improvements
• 📚 Documentation: Help improve user guides and technical docs
• 🌐 Internationalization: Add support for new languages
• 🎨 UI/UX: Enhance design and user experience

Development Process:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

This project is licensed under the Apache-2.0 License - see the LICENSE file for details.

Open Source Benefits:

• ✅ Commercial use allowed
• ✅ Modification allowed
• ✅ Distribution allowed
• ✅ Private use allowed

Chan Meng Creator & Lead Developer

Chan Meng

• LinkedIn: chanmeng666
• GitHub: ChanMeng666
• Email: [email protected]
• Website: chanmeng.live

🚀 Empowering Career Decisions Through Data 🌟
Making job satisfaction measurable and actionable

⭐ Star us on GitHub • 📖 Read the Documentation • 🐛 Report Issues • 💡 Request Features • 🤝 Contribute

Made with ❤️ by Chan Meng