{"id":42290683,"url":"https://github.com/lfariabr/excel-pilot-front","last_synced_at":"2026-01-27T09:38:54.167Z","repository":{"id":313575068,"uuid":"1051894251","full_name":"lfariabr/excel-pilot-front","owner":"lfariabr","description":"Chat system for Excel Pilot API built with Next.js, TypeScript, TailwindCSS, ShadCN, Apollo Client, Next.Auth, JWT ","archived":false,"fork":false,"pushed_at":"2025-10-15T00:23:44.000Z","size":363,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-15T05:14:49.910Z","etag":null,"topics":["apollo-server","jwt","nextauth","nextjs","shadcn-ui","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lfariabr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-07T00:16:30.000Z","updated_at":"2025-10-15T00:23:08.000Z","dependencies_parsed_at":"2025-10-15T05:06:53.137Z","dependency_job_id":null,"html_url":"https://github.com/lfariabr/excel-pilot-front","commit_stats":null,"previous_names":["lfariabr/excel-pilot-front"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/lfariabr/excel-pilot-front","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lfariabr%2Fexcel-pilot-front","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lfariabr%2Fexcel-pilot-front/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lfariabr%2Fexcel-pilot-front/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lfariabr%2Fexcel-pilot-front/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lfariabr","download_url":"https://codeload.github.com/lfariabr/excel-pilot-front/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lfariabr%2Fexcel-pilot-front/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28810899,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T07:41:26.337Z","status":"ssl_error","status_checked_at":"2026-01-27T07:41:08.776Z","response_time":168,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo-server","jwt","nextauth","nextjs","shadcn-ui","tailwindcss"],"created_at":"2026-01-27T09:38:54.070Z","updated_at":"2026-01-27T09:38:54.148Z","avatar_url":"https://github.com/lfariabr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ExcelPilot Frontend\n\nUI for guiding ExcelBM Concierges on daily tasks. Built with Next.js 14 (App Router), TypeScript, TailwindCSS, shadcn/ui, Apollo Client, and NextAuth.js — integrating with the ExcelPilot backend (GraphQL + Auth + Redis).\n\n## Tech Stack \u0026 Version Control:\n| Tech | Status | Version | Tags |\n| --- | --- | --- | --- |\n| Next.js 14 + TypeScript + TailwindCSS | ✅ | _v0.0.1_ | _Foundation_ |\n| shadcn/ui + Design System | ✅ | _v0.0.2_ | _UI/UX_ |\n| Apollo Client (GraphQL) | ✅ | _v0.0.3_ | _Data Integration_ |\n| NextAuth.js + JWT | ✅ | _v0.0.4_ | _Authentication_ |\n| AskAI Chat Widget | ✅ | _v0.0.5_ | _UI/UX_ |\n| Admin Features | 🏗️🧱🔨 | _v0.0.x_ | _UI/UX_ |\n| Docker | 🏗️🧱🔨 | TBD | _DevOps_ |\n| Jest + Testing | 🏗️🧱🔨 | TBD | _Testing_ |\n\n---\n\n## **Detailed Changelog** \n\u003e *Breakdown between ✅ **DONE**, 🔨 **WORK IN PROGRESS** and 📄 **BACKLOG***\n\n### ✅ **DONE**:\n**v0.0.1** - Foundation: Next.js 14 + App Router + TypeScript + TailwindCSS setup, base layout with sticky header, navigation structure, Providers component architecture ✅\n\n**v0.0.2** - Design System Layer\n- Install shadcn/ui CLI and configure components.json ✅\n- Set up core components: Button, Card, Input, Badge, Avatar, Dialog ✅\n- Create design tokens and theme configuration ✅\n- Build reusable UI primitives (Loading, ErrorBoundary, Toast) ✅\n- Implement responsive navigation with mobile menu ✅\n- Create component library documentation ✅\n\n**v0.0.3** - Apollo Client (GraphQL Integration)\n- Configure Apollo Client with backend GraphQL endpoint ✅\n- Set up authentication link for JWT token handling ✅\n- Create GraphQL codegen for type safety ✅\n- Implement error handling and retry policies ✅\n- Add optimistic updates configuration ✅\n- Create custom hooks for common queries/mutations ✅\n\n**v0.0.4** - Authentication\n- Configure NextAuth.js with JWT strategy ✅\n- Implement login/register pages with form validation ✅\n- Set up role-based access control (Admin, Concierge, Manager) ✅\n- Create session management and token refresh *(24h currently)* ✅\n- Add authentication middleware for protected routes ✅\n- Implement logout functionality with session cleanup ✅\n\n**v0.0.5** - AskAI Chat Widget\n- Integrate with backend OpenAI endpoints ✅\n- Implement conversation persistence and history ✅\n- Adjust chat title using MD format ✅\n- Add typing indicators and message status ✅\n- Add rate limiting UI feedback ✅\n- Add token limit UI feedback ✅\n- Customize ChatSidebar for logout ✅\n- Personalize Bot avatar ✅\n\n**v0.0.6** - Custom Hooks\n- Review useLimits and useChat, my powerful custom hooks implementation ✅\n- Document the feature's details on _docs/v006_ReviewingCustomHooks.md ✅\n- Come out with a refactor list to generate more backlog ✅\n\n---\n\n### 🔨**WORK IN PROGRESS**:\n\n**v0.0.7** - Custom Hooks Refactor\n1. add a `formatDuration(ms)` utility for “1h 23m” instead of raw hours. ✅\n2. extract a `LimitsNotice` component to render both rate and token props. ✅\n3. build Apollo ErrorLink to annotate errors with normalized `extensions` (ms, remaining, purpose).\n4. apply type satefy to the hooks\nExample:\n```typescript\n- type LimitKind = 'rate' | 'token';\n- interface RateLimit { kind: 'rate'; resetAt: number }\n- interface TokenLimit { kind: 'token'; resetAt: number; remaining?: number }\n```\n5. SSR safety with window guard `typeof window !== 'undefined'`.\n6. review `errorBag` is memoization (which has been already done). \n7. consider `useCallback` for handlers passed to deep children to reduce re-renders.\n8. add `aria-live=\"polite\"` to banners so screen readers announce changes in countdowns.\n\n---\n\n### 📄 **BACKLOG** - Production \u0026 Scale:\n\n#### Admin Features:\n\n**v0.0.x** - Dashboard Shell Architecture\n- Create main dashboard layout with sidebar navigation\n- Build Tasks section with status filtering and sorting\n- Implement Logs section with real-time updates\n- Add Search functionality with debounced queries\n- Create responsive grid system for dashboard widgets\n- Add breadcrumb navigation and page titles\n\n#### Advanced Features:\n\n**v0.0.x** - Protected Routes + Optimistic UI\n- Implement route guards with role-based permissions ✅\n- Add loading states and skeleton components\n- Create optimistic UI patterns for mutations\n- Implement error boundaries with retry mechanisms\n- Add offline detection and sync capabilities\n- Create progressive enhancement patterns\n\n#### Premium Features \u0026 Polish:\n\n**v0.0.x** - Concierge Smart Suggestions\n- Create motivational modal with dynamic content\n- Create achievement system integration\n- Add analytics tracking for engagement\n\n**v0.0.x** - Floating Chat Widget\n- Build floating chat widget with minimize/maximize\n- Create conversation export functionality\n\n**v0.0.x** - Performance \u0026 Optimization\n- Implement React.memo and useMemo optimizations\n- Add bundle analysis and code splitting\n- Create service worker for offline functionality\n- Implement image optimization and lazy loading\n- Add performance monitoring with Web Vitals\n- Create lighthouse CI integration\n\n**v0.0.x** - Testing \u0026 Quality\n- Jest + React Testing Library setup\n- Unit tests for components and hooks\n- Integration tests for user flows\n- E2E tests with Playwright\n- Visual regression testing\n- Accessibility testing with axe-core\n\n**v0.0.x** - DevOps \u0026 Deployment\n- Docker containerization with multi-stage builds\n- Docker Compose with backend integration\n- Environment variable management\n- CI/CD pipeline with GitHub Actions\n- Vercel deployment configuration\n- Error tracking with Sentry\n\n**v0.0.x** - Next Level Features\n- Real-time notifications with WebSockets\n- Advanced search with filters and facets\n- Data visualization with charts and graphs\n- Export functionality (PDF, Excel, CSV)\n- Internationalization (i18n) support\n- PWA capabilities with offline mode\n\n## **Architecture Principles**\n\n### **Component Architecture**\n```\nsrc/\n├── app/                  # Next.js 14 App Router\n│   ├── (auth)/           # Auth route group\n│   ├── (dashboard)/      # Protected dashboard routes\n│   └── api/              # API routes for NextAuth\n├── components/           # Reusable UI components\n│   ├── auth/             # Auth components\n│   ├── chat/             # Chat components\n│   ├── providers/        # Providers components\n│   ├── layout/           # Layout components\n│   └── ui/               # shadcn/ui primitives\n├── lib/                  # Utilities and configurations\n│   ├── apollo/           # GraphQL client setup\n│   ├── auth/             # NextAuth configuration\n│   ├── graphql/          # GraphQL codegen\n│   ├── hooks/            # Custom React hooks\n│   └── utils/            # Helper functions\n├── types/                # TypeScript type definitions\n└── styles/               # Global styles and themes\n```\n\n### **State Management Strategy**\n- Apollo Client for server state and caching\n- React Context for global UI state\n- Local component state for UI interactions\n- NextAuth session for authentication state\n\n### **Performance Targets**\n- First Contentful Paint \u003c 1.5s\n- Largest Contentful Paint \u003c 2.5s\n- Cumulative Layout Shift \u003c 0.1\n- First Input Delay \u003c 100ms\n- Bundle size \u003c 250KB gzipped\n\n### **Security Considerations**\n- JWT token secure storage and rotation\n- CSRF protection with NextAuth\n- XSS prevention with proper sanitization\n- Rate limiting on client-side API calls\n- Secure environment variable handling\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flfariabr%2Fexcel-pilot-front","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flfariabr%2Fexcel-pilot-front","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flfariabr%2Fexcel-pilot-front/lists"}