Get Started in 5 Minutes
This guide will walk you through logging into Hive, creating your first project, and adding your first task. You’ll be managing your team’s work in no time!This quickstart assumes you already have access to a Hive instance. If you need to deploy your own, see the Installation Guide.
Prerequisites
Before you begin, make sure you have:- A Hive account (username/email and password)
- A modern web browser (Chrome, Firefox, Safari, or Edge)
- Internet connection for real-time synchronization
Navigate to your Hive instance URL and enter your credentials. You can log in using either your username or email address.
// Hive supports login with username or email
async function handleSupabaseLoginMain() {
const usernameOrEmail = document.getElementById('loginUsernameMain')?.value.trim();
const password = document.getElementById('loginPasswordMain')?.value.trim();
if (!usernameOrEmail || !password) {
alert('Por favor completa todos los campos');
return;
}
// If input is not an email, resolve username to email
let correo = usernameOrEmail;
if (!correo.includes('@')) {
const { data: rec } = await supabase
.from('usuarios')
.select('correo')
.eq('nombre_usuario', usernameOrEmail)
.maybeSingle();
if (!rec || !rec.correo) {
throw new Error('Usuario o contraseña incorrectos');
}
correo = rec.correo;
}
// Authenticate with Supabase Auth
const { data, error } = await supabase.auth.signInWithPassword({
email: correo,
password
});
if (error) throw error;
// Navigate to projects view
navigateTo('projects');
}
Hive automatically resolves usernames to email addresses during login, so users can log in with their preferred identifier.
After successful login, you’ll see the main Hive interface with the sidebar navigation on the left.
- Name - Give your project a descriptive name
- Description - Add context about what this project is for
- Start Date - When the project begins
- End Date - Target completion date
- Color - Choose a color to visually identify this project
async function createProject() {
const projectName = document.getElementById('newProjectName')?.value.trim();
const projectDescription = document.getElementById('newProjectDescription')?.value;
const projectStartDate = document.getElementById('newProjectStartDate')?.value;
const projectEndDate = document.getElementById('newProjectEndDate')?.value;
// Validate required fields
if (!projectName) {
alert('Por favor ingrese un nombre para el proyecto');
return;
}
if (!projectStartDate || !projectEndDate) {
alert('Por favor introduzca Fecha de Inicio y Fecha de Fin');
return;
}
// Validate dates
const startDate = new Date(projectStartDate);
const endDate = new Date(projectEndDate);
if (startDate > endDate) {
alert('La Fecha de Inicio no puede ser posterior a la Fecha de Fin');
return;
}
// Create project in database
const projectData = {
nombre: projectName,
descripcion: projectDescription,
estado: 'activo',
fecha_inicio: projectStartDate,
fecha_fin: projectEndDate,
creador_id: getCurrentUsuariosIdInt()
};
const { data, error } = await supabase
.from('proyectos')
.insert([projectData])
.select()
.single();
if (error) {
console.error('Error creating project:', error);
alert('Error al crear el proyecto');
return;
}
// Update local state and UI
projects.push(data);
renderProjects();
closeCreateProjectModal();
}
Project names must be unique within your Hive instance. If you try to create a project with a duplicate name, you’ll see an error message.
- Title - Short, descriptive name for the task
- Description - Detailed information about what needs to be done
- Due Date - When this task should be completed
- Priority - Low, Medium, or High
- Assignees - Select team members to work on this task
- Tags - Add labels to categorize the task
async function createTaskFromForm() {
// Gather form data
const title = document.getElementById('taskTitle')?.value.trim();
const description = document.getElementById('taskDescription')?.value;
const dueDate = document.getElementById('taskDueDate')?.value;
const priority = document.getElementById('taskPriority')?.value || 'media';
const projectId = document.getElementById('taskProjectSelect')?.value;
// Validate required fields
if (!title) {
alert('El título es obligatorio');
return;
}
if (!projectId) {
alert('Debe seleccionar un proyecto');
return;
}
// Create task data
const taskData = {
titulo: title,
descripcion: description,
fecha_vencimiento: dueDate,
prioridad: priority,
proyecto_id: parseInt(projectId),
estado: 'pendiente',
porcentaje_completado: 0,
fecha_creacion: new Date().toISOString()
};
// Insert into database
const { data: newArr, error: createErr } = await supabase
.from('tareas')
.insert([taskData])
.select()
.limit(1);
if (createErr) {
console.error('Error creating task:', createErr);
alert('Error creando tarea');
return;
}
const newTask = newArr[0];
// Update local state
tasks.push(newTask);
// Refresh UI
renderTasks();
closeCreateTaskModal();
alert('Tarea creada exitosamente');
}
You can assign multiple team members to a single task. Hive will show all assigned members’ avatars on the task card.
Click on the task card to open the task details modal. You’ll see a progress slider—drag it to update the completion percentage.
async function updateTaskProgress(taskId, percentage) {
const percent = Math.max(0, Math.min(100, parseInt(percentage) || 0));
const { data, error } = await supabase
.from('tareas')
.update({ porcentaje_completado: percent })
.eq('id', taskId)
.select()
.single();
if (error) {
console.error('Error updating progress:', error);
return;
}
// Update local state
const task = tasks.find(t => t.id === taskId);
if (task) {
task.porcentaje_completado = percent;
}
// Refresh UI
renderTasks();
}
Drag and drop the task card to a different project column. Hive will automatically update the task’s project assignment.
async function handleTaskDrop(containerEl, projectId, taskId) {
const { data, error } = await supabase
.from('tareas')
.update({ proyecto_id: projectId })
.eq('id', taskId)
.select()
.single();
if (error) {
console.error('Error moving task:', error);
return;
}
// Update local state
const task = tasks.find(t => t.id === taskId);
if (task) {
task.proyecto_id = projectId;
}
// Refresh UI
renderProjects();
}
Click the status indicator (colored dot) on the task card to cycle through: Pendiente → En Progreso → Completada.
Real-time updates use WebSocket connections through Supabase Realtime. No polling or manual refreshing required!
// Realtime subscription for task changes
const ch = client.channel('rt-pmh-tareas-global');
ch.on('postgres_changes', {
event: 'UPDATE',
schema: 'public',
table: 'tareas'
}, async (payload) => {
const taskId = payload.new.id;
// Skip if this was a local change (avoid double-update)
if (isTaskMuted(taskId)) {
console.log('Skipping realtime update for local change');
return;
}
// Fetch fresh task data and update UI
await refreshTaskData(taskId);
// Show subtle notification
const task = tasks.find(t => t.id === taskId);
createToast(`${task.titulo} actualizada`, 'info', 1600);
});
ch.subscribe();
What’s Next?
Congratulations! You’ve created your first project and task in Hive. Here are some next steps:Explore Features
Learn about advanced features like tags, calendar view, and analytics
Team Collaboration
Invite team members and manage permissions
Profile Setup
Customize your profile with a photo and contact information
Dashboard Analytics
View project progress and team workload metrics
Tips for Success
Need Help?
If you encounter any issues:- Check the browser console (F12) for error messages
- Verify your internet connection for real-time sync
- Contact your Hive administrator through the “Contactar al administrador” button
- Review the User Guide for detailed instructions