S4 Bucket MVP Frontend

A modern React-based frontend application for managing S4 Bucket storage, built with TypeScript, Vite, and Tailwind CSS.

🚀 Features

• Authentication System: JWT-based login/logout with protected routes
• Bucket Management: Create and manage storage buckets
• File Management: Upload, download, and delete files
• Modern UI: Clean, responsive design with Tailwind CSS
• Type Safety: Full TypeScript support
• State Management: Zustand for lightweight state management
• Enterprise Ready: Follows React best practices and conventions

🛠️ Tech Stack

• Framework: React 18 + TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• State Management: Zustand
• Routing: React Router v6
• HTTP Client: Axios
• UI Components: Headless UI + Heroicons
• Form Handling: React Hook Form + Zod

📋 Prerequisites

• Node.js 18+
• npm or yarn
• S4 Bucket API running (see API Guide)

🚀 Quick Start

1. Install Dependencies

npm install

2. Environment Configuration

Create a .env file in the root directory:

API_BASE_URL=http://localhost:3000

Note: Replace the URL with your actual S4 Bucket API endpoint.

3. Start Development Server

npm run dev

The application will be available at http://localhost:5173

4. Build for Production

npm run build

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── ui/            # Base components (Button, Input, Card)
│   ├── layout/        # Layout components
│   └── features/      # Feature-specific components
├── hooks/              # Custom hooks
├── services/           # API services
├── stores/             # Zustand stores
├── types/              # TypeScript interfaces
├── utils/              # Helper functions
└── pages/              # Route components

🔐 Authentication

The application uses JWT tokens for authentication:

1. Login: Users authenticate with username/password
2. Token Storage: JWT tokens are stored in localStorage
3. Protected Routes: All main routes require authentication
4. Auto-logout: Tokens expire after 1 hour (handled by API)

🗂️ API Integration

The frontend integrates with the S4 Bucket API:

• Base URL: Configurable via environment variables
• Endpoints: Authentication, buckets, files, folders
• Error Handling: Comprehensive error handling with user feedback
• Interceptors: Automatic token management and 401 handling

🎨 UI Components

Base Components

• Button: Multiple variants (primary, secondary, danger) and sizes
• Input: Form inputs with validation and error states
• Card: Content containers with consistent styling

Layout Components

• Header: Navigation header with user menu
• Sidebar: Navigation sidebar with active states
• Layout: Main layout wrapper

📱 Responsive Design

The application is fully responsive and works on:

• Desktop (1024px+)
• Tablet (768px - 1023px)
• Mobile (320px - 767px)

🧪 Development

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint

Code Quality

• ESLint: Code linting and formatting
• Prettier: Code formatting
• TypeScript: Static type checking
• Conventional Commits: Commit message standards

🔧 Configuration

Environment Variables

The application uses the following environment variables:

• API_BASE_URL: Base URL for the S4 Bucket API (required)
• API_TIMEOUT: Request timeout in milliseconds (optional, default: 10000)

Tailwind CSS

Custom configuration in tailwind.config.js with:

• Primary color palette
• Custom component classes
• Responsive breakpoints

Vite

Build configuration in vite.config.ts with:

• React plugin
• TypeScript support
• Environment variable handling

🚧 Development Status

✅ Completed (Phase 1)

• Project setup with Vite + TypeScript
• Tailwind CSS configuration
• Authentication system
• Basic UI components
• Layout structure
• Dashboard page
• API service layer
• State management with Zustand
• Environment variable configuration

🚧 In Progress (Phase 2)

• Bucket management pages
• File upload/download
• File management interface

📋 Planned (Phase 3)

• Advanced error handling
• Performance optimization
• Testing setup
• Additional features

🤝 Contributing

1. Follow the established project structure
2. Use TypeScript for all new code
3. Follow the existing component patterns
4. Add proper error handling
5. Include loading states for async operations

📚 Documentation

• Frontend API Guide - API integration details
• Development Plan - Project roadmap and phases
• Configuration Guide - Environment setup instructions

🐛 Troubleshooting

Common Issues

1. API Connection Errors: Check your .env file and API server status
2. Build Errors: Ensure all dependencies are installed
3. Type Errors: Run npm run build to check TypeScript compilation
4. CSS Not Loading: Verify Tailwind CSS configuration

Getting Help

• Check the console for error messages
• Verify API endpoint configuration in .env
• Ensure all dependencies are properly installed

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with ❤️ using modern React best practices

open ticket for mochahost

Serves your React app (static files) Handles React Router (SPA routing) Doesn't interfere with external API calls