RoleReady - Job Search Tracking Tool

RoleReady is a modern, open-source job search tracking application built with React, TypeScript, and Tailwind CSS. It provides a comprehensive solution for managing job applications with a beautiful, intuitive interface.

🚀 Features

• Job Application Tracking: Organize jobs across different stages (Wishlist, Applied, Interview, Offer, Rejected)
• Multiple Job Trackers: Create and manage multiple job search campaigns
• Beautiful UI: Clean, professional interface with light and dark themes
• Responsive Design: Works perfectly on desktop, tablet, and mobile devices
• Real-time Updates: Track application progress with live status updates
• Professional Dashboard: Kanban-style board for visual job management

🛠️ Technology Stack

• Frontend: React 18 with TypeScript
• Styling: Tailwind CSS with shadcn/ui components
• State Management: React Context API with useReducer
• Local Storage: Persistent data storage
• Icons: Lucide React
• Build Tool: Vite

📦 Installation

1. Clone the repository

   git clone <repository-url>
   cd roleready

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env.local

4. Start the development server

   npm start

5. Open your browser The application will automatically open at http://localhost:5173

🚀 Quick Start

After installation, you can immediately start using RoleReady:

1. View the Job Board - See your job applications organized in a Kanban-style board
2. Add New Jobs - Click the "+" button in any column to add job applications
3. Switch Themes - Toggle between light and dark themes using the theme switcher
4. Navigate Features - Use the sidebar to explore different sections
5. Manage Trackers - Create multiple job search campaigns in the sidebar

🛠️ Development

For detailed development instructions, see DEVELOPMENT.md.

Quick Commands

npm start          # Start development server
npm run build      # Build for production
npm run lint       # Check code quality
npm run format     # Format code
npm run type-check # Check TypeScript types

🏗️ Project Structure

src/
├── components/          # Reusable UI components
│   ├── ui/             # shadcn/ui components
│   ├── layout/         # Layout components (Sidebar, TopNavigation)
│   └── job-board/      # Job board specific components
├── contexts/           # React Context providers
├── hooks/              # Custom React hooks
├── lib/                # Utility functions and constants
│   ├── constants.ts    # App constants and configuration
│   ├── types.ts        # TypeScript type definitions
│   └── utils.ts        # Utility functions
└── App.tsx             # Main application component

🎨 Design System

RoleReady follows a comprehensive design system with:

• Color Palette: Carefully chosen colors for both light and dark themes
• Typography: Inter font family with consistent sizing and weights
• Spacing: 8px base unit system for consistent spacing
• Components: Reusable, accessible components built on shadcn/ui
• Responsive Breakpoints: Mobile-first approach with tablet and desktop layouts

See DESIGN_SYSTEM.md for complete design guidelines.

📱 Responsive Design

• Mobile (0-767px): Collapsible sidebar, optimized touch interactions
• Tablet (768-1023px): Balanced layout with readable text and comfortable spacing
• Desktop (1024px+): Full sidebar, multi-column layout for maximum productivity

🌙 Theme Support

RoleReady includes both light and dark themes:

• Light Theme: Clean, professional appearance suitable for office environments
• Dark Theme: Twilight-inspired dark theme that's easy on the eyes during extended use

Toggle between themes using the theme switcher in the top navigation.

🔧 Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Code Quality

The project maintains high code quality through:

• TypeScript: Strict typing for better development experience
• ESLint: Code linting and formatting rules
• Consistent Architecture: Clear separation of concerns
• Component Documentation: Inline comments and examples

🤝 Contributing

We welcome contributions! Please follow these guidelines:

1. Fork the repository and create a feature branch
2. Follow the coding standards outlined in the project
3. Write tests for new functionality
4. Update documentation as needed
5. Submit a pull request with a clear description

Development Guidelines

• Use TypeScript for all new code
• Follow the established component patterns
• Maintain responsive design principles
• Add proper accessibility attributes
• Test across different browsers and devices

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Built with shadcn/ui for beautiful, accessible components
• Icons provided by Lucide
• Inspired by modern job search tools and productivity applications

📞 Support

If you encounter any issues or have questions:

1. Check the documentation
2. Search existing GitHub issues
3. Create a new issue with detailed information

---

RoleReady - Empowering your job search journey with modern technology and beautiful design.