A modern React application demonstrating integration with DevRev's REST API. Built specifically for Solutions Engineering interview showcase.

• Authentication: Secure connection using DevRev Personal Access Tokens
• Work Item Management: View and list tickets, issues, and other work items
• Create Functionality: Create new tickets and issues directly from the dashboard
• Real-time Updates: Refresh work items list with latest data
• Professional UI: Modern, responsive design with gradient backgrounds and smooth animations
• Error Handling: Comprehensive error handling with user-friendly messages
• TypeScript: Fully typed for better development experience

• Frontend: React 18 with TypeScript
• HTTP Client: Axios for API requests
• Styling: Custom CSS with modern design patterns
• API Integration: DevRev REST API v1

1. Clone the repository

   git clone <your-repo-url>
   cd devrev-interview-project

2. Install dependencies

   npm install

3. Start the development server

   npm start

4. Open in browser Navigate to http://localhost:3000

1. Sign up at DevRev.ai
2. Navigate to Settings → Account → Personal Access Token
3. Click "New token" and copy the generated token
4. Paste it into the dashboard authentication form

• Validates PAT token against DevRev's /dev-users.self endpoint
• Stores authentication state securely in component state
• Provides clear instructions for obtaining API tokens

• Fetches work items using /works.list endpoint
• Displays items in a responsive card grid layout
• Shows key information: ID, type, title, stage, and creation date
• Color-coded badges for different work item types

• Form-based creation of tickets and issues
• Uses /works.create endpoint
• Validates required fields before submission
• Automatically refreshes list after successful creation

App.tsx
├── Authentication Screen
│   ├── Token Input Form
│   └── Instructions Panel
└── Main Dashboard
    ├── Header with Actions
    ├── Create Form (conditional)
    └── Work Items Grid

• Base URL: https://api.devrev.ai
• Authentication: Bearer token in Authorization header
• Content-Type: application/json
• Error Handling: Comprehensive try-catch with user feedback

• React hooks for local state management
• Separate state for authentication, loading, errors, and form data
• Optimistic UI updates for better user experience

• Mobile-first approach
• Flexible grid layout adapts to screen size
• Touch-friendly buttons and form elements
• Readable typography across all devices

• Color Scheme: Professional purple gradient background
• Cards: Elevated cards with hover effects
• Typography: System font stack for optimal readability
• Animations: Smooth transitions and micro-interactions
• Accessibility: High contrast ratios and semantic HTML

• npm start: Runs the app in development mode
• npm run build: Builds the app for production
• npm test: Launches the test runner
• npm run eject: Ejects from Create React App (not recommended)

• TypeScript for type safety
• ESLint for code linting
• Responsive design principles
• Modern React patterns with hooks

This app can be deployed to any static hosting service:

• Vercel: Connect GitHub repo for automatic deployments
• Netlify: Drag and drop build folder
• GitHub Pages: Use npm run build and deploy /build folder
• AWS S3: Static website hosting

This project demonstrates understanding of:

• DevRev's REST API structure and authentication
• Work item lifecycle management
• Professional front-end development practices
• Real-world application architecture
• User experience design for developer tools

• Search & Filtering: Add search functionality for work items
• Real-time Updates: WebSocket integration for live updates
• Bulk Operations: Select and update multiple work items
• Advanced Forms: Rich text editor for work item descriptions
• Analytics Dashboard: Charts and metrics for work item trends
• Export Functionality: Download work items as CSV/PDF

This project showcases:

1. Technical Skills: React, TypeScript, REST API integration
2. DevRev Knowledge: Understanding of their platform and API
3. UX Design: Professional, user-friendly interface
4. Code Quality: Clean, maintainable, well-documented code
5. Problem Solving: Comprehensive error handling and edge cases

Built with ❤️ for DevRev Solutions Engineering Interview