Maintaining Code Hygiene: Lessons from AdministracionDeEdificiosFront

Even in smaller projects, keeping your repository clean is the difference between a productive afternoon and a chaotic maintenance cycle. I recently spent time organizing the AdministracionDeEdificiosFront project to improve our development flow and ensure the codebase remains maintainable as the React-based frontend grows.

The Challenge of Growing Codebases

When working on frontend applications, it is easy for CSS files to become bloated and for JavaScript components to lose their structural clarity. We often focus on the "what"—shipping the next feature—and neglect the "how," leading to a gradual accumulation of technical debt.

Establishing Best Practices

In this iteration of the project, the goal was to standardize how we organize our styles and components. By enforcing a cleaner directory structure and splitting large files, we reduce the cognitive load for anyone jumping into the codebase.

For example, instead of monolithic style sheets, we moved toward modular CSS patterns:

/* Instead of one global styles.css */
.sidebar-container {
  display: flex;
  flex-direction: column;
}

.sidebar-item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

And in our React components, we focused on props validation and cleaner lifecycle management to prevent memory leaks in our state-heavy views:

import React, { useEffect } from 'react';

const DashboardWidget = ({ data }) => {
  useEffect(() => {
    // Initialize tracking or timers
    return () => {
      // Cleanup logic is essential
    };
  }, [data]);

  return <div>{data.title}</div>;
};

The Result

By taking the time to prune redundant code and enforce a consistent folder structure, we have created a more predictable environment. The build times are more stable, and tracking down issues in our UI components has become significantly faster.

Takeaway

Do not wait for a major refactor to clean your code. Schedule regular "housekeeping" commits in your workflow to organize files, remove dead code, and ensure your project structure scales. Your future self—and your teammates—will thank you.

Generated with Gitvlg.com