mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 06:12:09 +01:00
Kaj Kowalski
93fbb44eec
Major code quality overhaul addressing 58% of all linting issues: • Type Safety Improvements: - Replace all any types with proper TypeScript interfaces - Fix Map component shadowing (renamed to CountryMap) - Add comprehensive custom error classes system - Enhance API route type safety • Accessibility Enhancements: - Add explicit button types to all interactive elements - Implement useId() hooks for form element accessibility - Add SVG title attributes for screen readers - Fix static element interactions with keyboard handlers • React Best Practices: - Resolve exhaustive dependencies warnings with useCallback - Extract nested component definitions to top level - Fix array index keys with proper unique identifiers - Improve component organization and prop typing • Code Organization: - Automatic import organization and type import optimization - Fix unused function parameters and variables - Enhanced error handling with structured error responses - Improve component reusability and maintainability Results: 248 → 104 total issues (58% reduction) - Fixed all critical type safety and security issues - Enhanced accessibility compliance significantly - Improved code maintainability and performance
LiveDash-Node
A real-time analytics dashboard for monitoring user sessions and interactions with interactive data visualizations and detailed metrics.
.*%22&replace=%24%3Cversion%3E&logo=nextdotjs&label=Nextjs&color=%23000000){kind=icon}
.*%22&replace=%24%3Cversion%3E&logo=react&label=React&color=%2361DAFB){kind=icon}
.*%22&replace=%24%3Cversion%3E&logo=typescript&label=TypeScript&color=%233178C6){kind=icon}
.*%22&replace=%24%3Cversion%3E&logo=prisma&label=Prisma&color=%232D3748){kind=icon}
.*%22&replace=%24%3Cversion%3E&logo=tailwindcss&label=TailwindCSS&color=%2306B6D4){kind=icon}
Features
- Real-time Session Monitoring: Track and analyze user sessions as they happen
- Interactive Visualizations: Geographic maps, response time distributions, and more
- Advanced Analytics: Detailed metrics and insights about user behavior
- User Management: Secure authentication with role-based access control
- Customizable Dashboard: Filter and sort data based on your specific needs
- Session Details: In-depth analysis of individual user sessions
Tech Stack
- Frontend: React 19, Next.js 15, TailwindCSS 4
- Backend: Next.js API Routes, Node.js
- Database: Prisma ORM with SQLite (default), compatible with PostgreSQL
- Authentication: NextAuth.js
- Visualization: Chart.js, D3.js, React Leaflet
- Data Processing: Node-cron for scheduled tasks
Getting Started
Prerequisites
- Node.js (LTS version recommended)
- pnpm (recommended package manager)
Installation
- Clone this repository:
git clone https://github.com/kjanat/livedash-node.git
cd livedash-node
- Install dependencies:
pnpm install
- Set up the database:
pnpm run prisma:generate
pnpm run prisma:migrate
pnpm run prisma:seed
- Start the development server:
pnpm run dev
- Open your browser and navigate to http://localhost:3000
Environment Setup
Create a .env file in the root directory with the following variables:
DATABASE_URL="file:./dev.db"
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-here
Project Structure
app/: Next.js App Router components and pagescomponents/: Reusable React componentslib/: Utility functions and shared codepages/: API routes and server-side codeprisma/: Database schema and migrationspublic/: Static assetsdocs/: Project documentation
Available Scripts
pnpm run dev: Start the development serverpnpm run build: Build the application for productionpnpm run start: Run the production buildpnpm run lint: Run ESLintpnpm run format: Format code with Prettierpnpm run prisma:studio: Open Prisma Studio to view database
Contributing
- Fork the repository
- Create your feature branch:
git checkout -b feature/my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin feature/my-new-feature - Submit a pull request
License
This project is not licensed for commercial use without explicit permission. Free to use for educational or personal projects.