Admin Portal - SvelteKit

A modern, responsive admin portal built with SvelteKit, TypeScript, and Tailwind CSS. This project provides a comprehensive foundation for building admin interfaces with user management, notifications, authentication, and more.

🚀 Features

Core Features

• User Authentication - Login/logout with session persistence
• User Management - Full CRUD operations for user accounts
• Notifications System - Real-time notifications with read/unread status
• Dark/Light Theme - Toggle between themes with system preference detection
• Responsive Design - Mobile-first design that works on all devices
• Form Validation - Client-side validation using Zod schemas
• Toast Notifications - Success, error, warning, and info messages
• Modal Components - Reusable modal dialogs for forms and confirmations

User Management Features

• ✅ Create new users
• ✅ Update user information
• ✅ Delete users
• ✅ List users with pagination
• ✅ Search and filter users
• ✅ Role-based access (Admin/User)
• ✅ Status management (Active/Inactive)

Technical Features

• TypeScript - Full type safety throughout the application
• Tailwind CSS - Utility-first CSS framework
• Svelte Stores - Reactive state management
• Form Validation - Zod schema validation
• Responsive Tables - Desktop table view, mobile card view
• Loading States - Proper loading indicators
• Error Handling - Comprehensive error handling and user feedback

🛠️ Tech Stack

• Framework: SvelteKit
• Language: TypeScript
• Styling: Tailwind CSS
• Validation: Zod
• Date Handling: date-fns
• Icons: Heroicons (SVG)
• State Management: Svelte Stores

📦 Installation

1. Clone the repository

   git clone <repository-url>
   cd learn-svelte
   

2. Install dependencies

   npm install
   

3. Start the development server

   npm run dev
   

4. Open your browser Navigate to http://localhost:5173

🔐 Default Login Credentials

For testing purposes, use these credentials:

• Email: [email protected]
• Password: password

📁 Project Structure

src/
├── lib/
│   ├── components/
│   │   └── ui/           # Reusable UI components
│   │       ├── Button.svelte
│   │       ├── Input.svelte
│   │       ├── Select.svelte
│   │       ├── Modal.svelte
│   │       └── Toast.svelte
│   ├── stores/           # Svelte stores for state management
│   │   ├── auth.ts       # Authentication state
│   │   ├── users.ts      # User management state
│   │   ├── notifications.ts # Notifications state
│   │   ├── toast.ts      # Toast notifications
│   │   └── theme.ts      # Theme management
│   ├── utils.ts          # Utility functions
│   └── validation.ts     # Zod validation schemas
├── routes/
│   ├── +layout.svelte    # Main layout with navigation
│   ├── +page.svelte      # Root page (redirects)
│   ├── login/
│   │   └── +page.svelte  # Login page
│   ├── dashboard/
│   │   └── +page.svelte  # Dashboard with overview
│   ├── users/
│   │   └── +page.svelte  # User management page
│   └── notifications/
│       └── +page.svelte  # Notifications page
└── app.css               # Global styles with Tailwind

🎨 UI Components

Button Component

<Button variant="primary" size="md" loading={false}>
  Click me
</Button>

Variants: primary, secondary, outline, ghost, destructive Sizes: sm, md, lg

Input Component

<Input
  label="Email"
  type="email"
  bind:value={email}
  error={errors.email}
  placeholder="Enter your email"
  required
/>

Select Component

<Select
  label="Role"
  bind:value={role}
  options={roleOptions}
  error={errors.role}
  required
/>

Modal Component

<Modal bind:open={showModal} title="Edit User" size="md">
  <p>Modal content goes here</p>
  
  <div slot="footer">
    <Button variant="outline" on:click={() => showModal = false}>
      Cancel
    </Button>
    <Button on:click={handleSave}>
      Save
    </Button>
  </div>
</Modal>

📊 State Management

The application uses Svelte stores for state management:

Authentication Store

import { authStore, login, logout } from '$lib/stores/auth';

// Login
const result = await login(email, password);

// Logout
logout();

// Access current user
$authStore.user

Users Store

import { 
  usersStore, 
  loadUsers, 
  createUser, 
  updateUser, 
  deleteUser,
  setFilter,
  setPagination 
} from '$lib/stores/users';

// Load users
await loadUsers();

// Create user
await createUser(userData);

// Filter users
setFilter({ search: 'john', role: 'admin' });

// Pagination
setPagination({ page: 2 });

Toast Notifications

import { showSuccess, showError, showWarning, showInfo } from '$lib/stores/toast';

showSuccess('Success!', 'Operation completed successfully');
showError('Error!', 'Something went wrong');

🎯 Best Practices

1. Component Design

• Single Responsibility: Each component has a clear, single purpose
• Reusability: Components are designed to be reused across the application
• Props Interface: Clear and typed props for all components
• Event Handling: Proper event forwarding and custom events

2. State Management

• Centralized Stores: All application state is managed in Svelte stores
• Derived Stores: Use derived stores for computed values
• Reactive Updates: Leverage Svelte's reactivity for automatic UI updates
• Error Handling: Proper error states and user feedback

3. Form Handling

• Validation: Use Zod schemas for type-safe validation
• Error Display: Show validation errors inline with form fields
• Loading States: Indicate when forms are being submitted
• Reset Forms: Clear forms after successful submission

4. Responsive Design

• Mobile First: Design for mobile devices first
• Breakpoints: Use Tailwind's responsive utilities
• Touch Friendly: Ensure interactive elements are touch-friendly
• Accessibility: Follow WCAG guidelines for accessibility

5. Performance

• Lazy Loading: Load data only when needed
• Debouncing: Debounce search inputs to reduce API calls
• Pagination: Implement pagination for large datasets
• Optimistic Updates: Update UI immediately for better UX

6. Code Organization

• TypeScript: Use TypeScript for type safety
• Consistent Naming: Follow consistent naming conventions
• File Structure: Organize files logically by feature
• Comments: Document complex logic and business rules

7. Error Handling

• User Feedback: Always provide feedback for user actions
• Graceful Degradation: Handle errors gracefully
• Loading States: Show loading indicators during async operations
• Retry Logic: Implement retry mechanisms where appropriate

8. Security

• Input Validation: Validate all user inputs
• Authentication: Implement proper authentication flows
• Authorization: Check user permissions before actions
• Data Sanitization: Sanitize data before display

🔧 Development

Available Scripts

# Development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run tests
npm run test

# Run linting
npm run lint

# Format code
npm run format

Adding New Features

1. Create Store (if needed)

   // src/lib/stores/feature.ts
   import { writable } from 'svelte/store';
      
   export const featureStore = writable(initialState);
   

2. Add Validation Schema

   // src/lib/validation.ts
   export const featureSchema = z.object({
     // Define schema
   });
   

3. Create Components

   <!-- src/lib/components/Feature.svelte -->
   <script lang="ts">
     // Component logic
   </script>
      
   <!-- Component template -->
   

4. Add Routes

   <!-- src/routes/feature/+page.svelte -->
   <script lang="ts">
     // Page logic
   </script>
      
   <!-- Page template -->
   

🚀 Deployment

Build for Production

npm run build

Environment Variables

Create a .env file for environment-specific configuration:

# API Configuration
PUBLIC_API_URL=https://api.example.com
PRIVATE_API_KEY=your-secret-key

# Database Configuration
DATABASE_URL=your-database-url

Deployment Platforms

This SvelteKit application can be deployed to various platforms:

• Vercel: Zero-config deployment
• Netlify: Static site hosting
• Railway: Full-stack deployment
• Docker: Containerized deployment

📝 License

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

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📞 Support

If you have any questions or need help with the project, please:

1. Check the documentation above
2. Search existing issues
3. Create a new issue with detailed information
4. Contact the development team

Happy coding! 🎉