Files Admin Frontend

This is the admin frontend for the Files project, built using React, TypeScript, and Vite for a fast and modern development experience. It is styled with TailwindCSS and features GraphQL integration.

Table of Contents

• Features
• Getting Started
• Project Structure
• Technical Details
• Scripts
• Linting & Code Standards
• License

---

Features

• React + TypeScript SPA architecture
• Vite for fast development and builds
• TailwindCSS for utility-first styling
• GraphQL Codegen for typed queries and mutations
• Authentication context and protected routes
• Apollo Client integration for GraphQL
• Toast notifications via sonner
• Custom utility functions and styling

---

Getting Started

Prerequisites

• Node.js >= 18
• Yarn or npm

Install dependencies

npm install
# or
yarn install

Start the development server

npm run dev
# or
yarn dev

Open http://localhost:5173 (default) to view the app.

---

Project Structure

.
├── src/
│   ├── App.tsx                  # Main App component, sets up routes
│   ├── main.tsx                 # App entrypoint, context providers
│   ├── pages.tsx/               # Page components (Index, Users, Login, Files)
│   ├── hooks/                   # Custom hooks (e.g., use-auth)
│   ├── utils/                   # Apollo client setup, route protection
│   ├── lib/                     # Utility functions (e.g., cn for classnames)
│   ├── __generated__/           # GraphQL codegen output
│   ├── index.css                # Global styles and Tailwind config
│   ├── App.css                  # Component-level styles
├── codegen.ts                   # GraphQL codegen config
├── vite.config.ts               # Vite config, alias setup
├── eslint.config.js             # ESLint configuration
├── index.html                   # App HTML template
└── README.md                    # Project documentation

---

Technical Details

• Routing: Uses react-router-dom for navigation, with route protection for authenticated areas.
• Authentication: Provided via a context (use-auth).
• GraphQL: Apollo Client setup in utils/apolloClient.tsx. Code generation configured via codegen.ts connecting to your backend at http://localhost:8888/query.
• Styling: TailwindCSS is imported and configured in index.css. Utility function cn merges classnames using clsx and tailwind-merge.
• Notifications: sonner provides rich toast notifications.

---

Scripts

• dev: Start local development server
• build: Build for production
• codegen: Generate GraphQL types
• lint: Run ESLint

---

Linting & Code Standards

• ESLint is configured for TypeScript and React, including recommended hooks and refresh plugins.
• See eslint.config.js for details and customization options.