A modern Next.js application for visualizing and managing team activity data from Everhour. Built with Next.js 14, Shadcn UI, and Tailwind CSS.
- Framework: Next.js 14 with App Router
- UI Components: Shadcn UI (based on Radix UI)
- Styling: Tailwind CSS
- Data Visualization: Recharts
- Icons: Lucide React
├── app/ # Next.js App Router directory
│ ├── dashboard/ # Dashboard page
│ ├── projects/ # Projects section
│ ├── reports/ # Reports and analytics
│ ├── team/ # Team management
│ ├── time/ # Time tracking
│ └── ui-kit/ # UI components showcase
├── components/ # Reusable components
│ ├── ui/ # Shadcn UI components
│ └── [feature]/ # Feature-specific components
├── lib/ # Utility functions and services
└── docs/ # Project documentation
- Clone the repository:
git clone [repository-url]
- Install dependencies:
npm install
- Set up environment variables:
cp .env.example .env.local
Required environment variables:
EVERHOUR_API_KEY
: Your Everhour API key
- Start the development server:
npm run dev
- Use the App Router directory structure (
app/
folder) - Place reusable components in
components/
directory - Use
page.tsx
for route components - Use
layout.tsx
for shared layouts - Use
loading.tsx
for loading states - Use
error.tsx
for error boundaries
- Use functional components and hooks
- Prefer Server Components by default
- Use 'use client' directive only when needed
- Use ES6+ syntax and features
- Implement proper TypeScript types
We use Shadcn UI components, which are built on top of Radix UI primitives:
- Import from
@/components/ui
- Use Radix UI primitives for complex interactive components
- Customize using the provided configuration options
- Use Tailwind CSS utility classes
- Follow the established color scheme and design system
- Use the
cn()
utility for conditional class names - Maintain responsive design principles
- Use Server Components for data fetching when possible
- Implement loading states with React Suspense
- Use
loading.tsx
files for loading UI - Handle errors gracefully with error boundaries
- Use React hooks (useState, useReducer) for local state
- Consider server-side state management with Server Components
- Use context for global state when necessary
- Implement code splitting with dynamic imports
- Use Next.js Image component for optimized images
- Utilize Next.js built-in optimizations
- Monitor and optimize bundle size
- Use semantic HTML elements
- Implement proper ARIA attributes
- Test with screen readers
- Ensure keyboard navigation works
- Located in the dashboard section
- Uses Recharts for visualization
- Shows team activity patterns over time
- Customizable color scale for activity intensity
- Responsive design
- Task tracking and organization
- Time tracking integration
- Team member assignments
- Progress monitoring
- Budget tracking
- Real-time timer functionality
- Manual time entry
- Detailed time reports
- User activity monitoring
- Project time allocation
- Follow the established code style
- Write clear commit messages
- Update documentation as needed
- Test thoroughly before submitting changes
npm run dev
- Start development servernpm run build
- Build for productionnpm run start
- Start production servernpm run lint
- Run ESLintnpm run test
- Run tests
Additional documentation can be found in the docs/
directory:
[License Type] - See LICENSE file for details