DevStack

Development Operations Center - Manage your technical infrastructure with elegance and efficiency

DevStack is a modern web application designed for developers who need to centralize the management of their systems, credentials, and technical tasks in a single place. Built with cutting-edge technologies and a focus on exceptional UX/UI.

🎨 Design Philosophy

DevStack implements a Bento UI design system inspired by Apple's modular and composable interfaces. Our philosophy is based on:

Visual Principles

24px Radius: All interactive elements use a consistent 24px border-radius, creating a smooth and modern aesthetic
8px Grid Spacing: Spacing system based on 8px multiples to maintain visual harmony
Clear Visual Hierarchy: Typography with 150% line-height for body text, 120% for headings
Intentional Whitespace Usage: Every element breathes, reducing cognitive load
Micro-interactions: Subtle animations with Framer Motion that enhance the experience

Color System

Neutral Palette: Design that prioritizes clarity and readability
6 Color Ramps: Primary, Secondary, Accent, Success, Warning, Error
Optimized Contrast: Contrast ratios meeting WCAG 2.1 AA standards
Native Dark Mode: Complete dark theme support

Responsive Design

Mobile First: Designed from mobile devices to desktop
Strategic Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)
Adaptive Components: Each element adjusts fluidly to any viewport

🚀 Tech Stack

Frontend Core

React 18.3.1                    // UI library with modern Hooks
TypeScript 5.5.3                // Type safety and developer experience
Vite 5.4.8                      // Ultra-fast build tool

UI Framework & Styling

Tailwind CSS 3.4.13             // Utility-first CSS framework
Radix UI                        // Accessible and unstyled components
shadcn/ui                       // Reusable component system
Framer Motion 12.33.0           // Fluid animations and transitions
Lucide React 0.446.0            // Consistent icon system

State Management

Context API (React)             // Global state without external libraries
Zustand 5.0.11                  // Lightweight state manager (fallback)
Custom Hooks Pattern            // Business logic encapsulation

Backend & Database

Supabase 2.58.0                 // Backend-as-a-Service
PostgreSQL                      // Relational database
Realtime Subscriptions          // Real-time updates

Forms & Validation

React Hook Form 7.53.0          // Performant form management
Zod 3.23.8                      // Schema validation with TypeScript

Utilities

date-fns 3.6.0                  // Date manipulation
clsx & tailwind-merge           // CSS class management
sonner 1.5.0                    // Toast notification system

✨ Key Features

📊 Intelligent Dashboard

360-Degree View: Real-time metrics of systems, credentials, and tasks
Modular Bento Cards: Information organized in intuitive visual blocks
Contextual Statistics: Automatic KPIs (active systems, pending bugs, deploys)
Recent Activity: Timeline of changes in your infrastructure
Quick Actions: Action buttons for common workflows

🔐 Security Vault

Credentials Management: Centralized storage of users and passwords
Visual Masking: Passwords hidden by default with visibility toggle
System Linking: Each credential is associated with a specific system
Instant Search: Real-time credential filtering
Complete CRUD: Create, read, update, and delete with validation

🖥️ Systems Management

Project Registry: Complete catalog of your infrastructure
Real-Time Status: Active, Maintenance, Down with visual indicators
Contextual Information: Project URL, server IP, description
CASCADE Relations: Deleting a system automatically removes its credentials
Grid/Card View: Presentation optimized for quick visual scanning

✅ Task System

Intelligent Prioritization: Low, Medium, High, Critical with colored badges
Work Types: Bug, Task, Deploy with specific iconography
Workflow States: Pending, In Progress, Completed
Due Dates: Temporal tracking with relative formatting
Optional Linking: Tasks can be associated with specific systems
Filtering and Sorting: Multiple organization criteria

⚡ Real-Time Updates

Postgres Changes Subscription: Active listening to INSERT, UPDATE, DELETE events
Reactive UI: Automatic updates without manual refresh
Multi-Tab Synchronization: Changes reflected in all open tabs
Optimistic Updates: UI updates instantly, rollback on error

⌨️ Command Palette

Keyboard Navigation: Cmd+K / Ctrl+K for quick access
Global Search: Find any element in the application
Contextual Actions: Execute commands without using the mouse

📦 Installation and Setup

Prerequisites

Node.js >= 18.x
npm >= 9.x

Step 1: Clone the Repository

git clone https://github.com/your-username/devstack.git
cd devstack

Step 2: Install Dependencies

npm install

Step 3: Configure Environment Variables

Create a .env file in the project root:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

Get these credentials from your Supabase Dashboard.

Step 4: Configure Database

Supabase migrations are in supabase/migrations/. If using Supabase CLI:

supabase db push

Or manually execute the SQL from 20260207065428_create_devstack_schema.sql in your database.

Step 5: Run in Development

npm run dev

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

Step 6: Build for Production

npm run build
npm run preview

📁 Project Structure

devstack/
├── src/
│   ├── components/          # Reusable React components
│   │   ├── dialogs/        # Modals (System, Credential, Task)
│   │   ├── layout/         # Header, Sidebar
│   │   └── ui/             # shadcn/ui components
│   ├── hooks/              # Custom hooks (useSistemas, useBoveda, useTareas)
│   ├── lib/                # Utilities and helpers
│   │   ├── supabase.ts    # Supabase client
│   │   ├── helpers.ts     # Auxiliary functions
│   │   └── utils.ts       # Tailwind utilities
│   ├── pages/              # Main pages
│   │   ├── dashboard.tsx  # Main panel
│   │   ├── sistemas.tsx   # Systems management
│   │   ├── boveda.tsx     # Credentials vault
│   │   └── tareas.tsx     # Task list
│   ├── stores/             # Context API providers
│   │   ├── app-provider.tsx
│   │   ├── sistemas-store.tsx
│   │   ├── boveda-store.tsx
│   │   └── tareas-store.tsx
│   ├── types/              # TypeScript definitions
│   └── App.tsx             # Root component
├── supabase/
│   └── migrations/         # Database migrations
├── public/                 # Static assets
└── package.json

🎯 Use Cases

For Freelance Developers

Keep track of all your active projects
Quick access to client credentials
Track pending bugs and deploys

For Small Teams

Centralized infrastructure knowledge base
Simplified onboarding for new members
Shared visibility of system status

For DevOps Engineers

Complete inventory of servers and services
Access credentials management
Maintenance task tracking

🔒 Security

⚠️ Important Note: This version is an MVP without authentication. For production use:

Implement authentication with Supabase Auth
Enable Row Level Security (RLS) on all tables
Implement AES-256 encryption for passwords in boveda
Use secure environment variables (never commit .env)

See SECURITY.md for complete details.

📚 Additional Documentation

ARCHITECTURE.md - Detailed technical architecture
SECURITY.md - Security guide and best practices

🛠️ Available Scripts

npm run dev          # Development server
npm run build        # Production build
npm run preview      # Build preview
npm run lint         # Run ESLint
npm run typecheck    # TypeScript type checking

🤝 Contributing

Contributions are welcome. Please:

Fork the project
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

Developed with technical precision and attention to detail for the developer community.

DevStack - Where infrastructure management meets exceptional design.

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
.bolt		.bolt
src		src
supabase/migrations		supabase/migrations
.gitignore		.gitignore
ARCHITECTURE.es.md		ARCHITECTURE.es.md
ARCHITECTURE.md		ARCHITECTURE.md
README.es.md		README.es.md
README.md		README.md
SECURITY.md		SECURITY.md
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

DevStack

🎨 Design Philosophy

Visual Principles

Color System

Responsive Design

🚀 Tech Stack

Frontend Core

UI Framework & Styling

State Management

Backend & Database

Forms & Validation

Utilities

✨ Key Features

📊 Intelligent Dashboard

🔐 Security Vault

🖥️ Systems Management

✅ Task System

⚡ Real-Time Updates

⌨️ Command Palette

📦 Installation and Setup

Prerequisites

Step 1: Clone the Repository

Step 2: Install Dependencies

Step 3: Configure Environment Variables

Step 4: Configure Database

Step 5: Run in Development

Step 6: Build for Production

📁 Project Structure

🎯 Use Cases

For Freelance Developers

For Small Teams

For DevOps Engineers

🔒 Security

📚 Additional Documentation

🛠️ Available Scripts

🤝 Contributing

📄 License

👨‍💻 Author

About

Resources

Security policy

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages