A modern, feature-rich frontend application for document management built with Next.js 16. This application provides a Google Drive-like experience with document organization, sharing, search, and preview capabilities.
- Authentication: Secure sign-in/sign-up with email/password and OAuth (Google, GitHub)
- Document Management: Upload, download, organize, rename, and delete documents
- Folder System: Create, navigate, and manage hierarchical folders
- Document Preview: Inline preview for PDFs and images
- PDF Splitting: Split PDF documents into individual pages
- Sharing: Share documents and folders with email-based permissions
- Search: Global search with ⌘K shortcut and suggestions
- Multiple Views: Toggle between table and grid (card) layouts
- Trash Management: View, restore, and permanently delete trashed items
- Filtering & Sorting: Filter by file type/status and sort by various criteria
- Responsive Design: Mobile-friendly interface
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- UI Library: shadcn/ui components
- State Management: Zustand
- Data Fetching: TanStack Query (React Query)
- Forms: React Hook Form + Zod
- Authentication: Better Auth
- Styling: Tailwind CSS v4
- Icons: Lucide React
- Notifications: Sonner
- URL State: nuqs (URL query string management)
- Tables: TanStack Table
- Drag & Drop: @dnd-kit
- Node.js (v18 or higher)
-
Clone the repository
git clone <repository-url> cd dms-be/dms_frontend
-
Install dependencies
npm install
-
Set up environment variables Create a
.env.localfile in the root directory:NEXT_PUBLIC_API_URL=http://localhost:4000
npm run devThe application will be available at http://localhost:8000
# Build the application
npm run build
# Start production server
npm run start- Email/password authentication
- OAuth with Google and GitHub
- Protected routes via Next.js middleware
- Session management
- Upload: Drag & drop or click to upload files
- View Modes: Toggle between table and grid views
- Actions: Download, rename, move, share, split (PDFs), preview, delete
- Pagination: Server-side pagination
- Filtering: By file type and status
- Sorting: By date, name, size
- Create nested folders
- Navigate with breadcrumbs
- Move documents/folders between folders
- View folder contents
- PDF preview in iframe
- Image preview with zoom controls
- Download fallback for unsupported types
- Trigger PDF split jobs
- View processing status
- Download individual pages
- List all split pages
- Share documents/folders by email
- Set permissions (VIEW/EDIT)
- View shared items
- Manage access (revoke)
- Global search with ⌘K shortcut
- Real-time suggestions
- Search results page
- Filter by folder and file type
- View trashed documents and folders
- Restore items
- Permanently delete items
- Empty trash
⌘K/Ctrl+K: Open global search
- Click "Upload" button or use drag & drop
- Select files (max 100MB per file)
- Files are uploaded to S3 and metadata is saved
- Confirm upload to mark as ready
- Create folders using "New Folder" button
- Move documents using "Move to..." action
- Navigate folders by clicking on them
- Click "Share" on a document or folder
- Enter email address
- Select permission level (VIEW/EDIT)
- Manage access from the share dialog
- Open a PDF document
- Click "Split PDF" from the menu
- Wait for processing to complete
- Download individual pages
- All API requests include authentication cookies
- Protected routes redirect to sign-in if not authenticated
- CORS configured on backend
- Input validation on forms
- Feature-based architecture: Each feature has its own folder with components, queries, mutations, and services
- Shared components: Reusable UI components in
components/shared - Type safety: Full TypeScript coverage
- Form validation: Zod schemas for all forms
- Create feature folder in
features/ - Add service, queries, mutations, and components
- Create page in
app/(dashboard)/if needed - Add navigation item in sidebar if needed
NEXT_PUBLIC_API_URL: Backend API URL (default:http://localhost:4000)
- Set
NEXT_PUBLIC_API_URLto production API URL - Build the application:
npm run build - Start the server:
npm run start
For Vercel deployment:
vercelEnsure backend CORS is configured to allow your frontend origin.
Check that NEXT_PUBLIC_API_URL matches your backend URL.
Clear .next folder and rebuild:
rm -rf .next
npm run buildChance Desire
- GitHub: @chanceDira
- Email: chancedesire60@gmail.com