Learning to Build on Existing Foundations

During my time in college, I held onto the belief that I needed to personally create every component of my projects. From backend systems to UI design, I felt compelled to reinvent every wheel. You'd be shocked at the countless hours I devoted to designing, refining, and altering my React UI components—over 500 hours, to be precise.

Despite my efforts, something always felt off with my designs. Luckily, my curriculum included a course taught by a well-regarded Interface Designer, which proved to be a game-changer. The course was challenging but not in the conventional sense. I could sense when a design worked well; however, articulating the flaws and determining how to rectify them was a struggle.

A successful interface should be visually appealing and highly usable. Yet, understanding aesthetics and building something from the ground up are entirely different skills. While I appreciate the time I invested in enhancing my design and UX abilities, I can't help but think that my projects could have been far more productive had I simply built upon existing solutions instead of trying to reinvent the wheel.

Hands-On Experience: A Double-Edged Sword

Even though it may take longer, hands-on experience is invaluable for skill development—if approached correctly. As a practical learner, I spent countless hours experimenting without clear direction until that pivotal course helped me focus my efforts. I recommend pairing your design and coding endeavors with a course or reading material to avoid wasting time in a fruitless cycle.

When Is Starting from Scratch Justified?

Naturally, there are exceptions in software development; you might feel compelled to create a unique solution in certain circumstances. Here are some scenarios where starting from scratch could be warranted:

1. You are a UI/UX designer with the expertise to implement designs effectively.
2. Complete control over specifics like bundle size is crucial.
3. You are a student with ample time to learn and explore.
4. The project is not bound by tight deadlines.
5. You're attempting to create a component that lacks existing alternatives.

Otherwise, I strongly advise against building your UI components from the ground up.

Navigating My Startup Journey

As I embark on developing a SaaS startup, I've come to realize that creating UI components from scratch would be a significant drain on my time. Here are some reasons to reconsider:

• You're likely not an expert designer.
• Your project has a deadline, especially if you aim to launch a Minimum Viable Product (MVP) swiftly.
• You're balancing multiple responsibilities within a startup or side project.
• Time and resources are limited, requiring you to wear many hats.

From past experiences, I've estimated that over half of my project time was consumed by designing and refining the UI. In contrast, I could complete the backend in just a week or two, only to spend the remainder on UI adjustments.

Assessing a Library's Longevity

If you intend to use a library for multiple projects, checking its future support and maintainability is vital. As Pål Thingbø highlighted, selecting the wrong library can lead to complications such as license conflicts, lack of updates, and security vulnerabilities.

Strategies to Reduce Bundle Size

When deploying your site, bundle size can become a significant concern. Here are some strategies for React users:

1. Lazy Load Components: Newer React versions allow for lazy loading, which separates components into smaller bundles that load only as needed. This reduces the initial bundle size and improves the loading experience.
2. Omit Source Maps in Production: While source maps are beneficial during development for debugging, they can bloat your production bundle size. For instance, my project's source maps inflated the bundle to 15MB, far exceeding the recommended size.
3. Segment Your Project into Subdomains: My project comprises a login page, dashboard, and landing page. By separating the landing page from the dashboard, I managed to cut down the initial bundle size to around 570KB.

The second video, "Building a Great UI is Easy with this React Library," discusses how leveraging existing libraries can streamline your UI development process.

My Current Approach

In the end, I've opted for MUI (React) for my startup project. This comprehensive component library alleviates much of the stress associated with creating components from scratch. Need a date picker, a search bar with autocomplete, or a responsive grid system? MUI has you covered, while still allowing customization of the base CSS.

This approach enables me to iterate quickly and focus on developing my MVP. While I could code these elements from scratch, the time investment would delay my project's launch and add no real value for future users.

Conclusion: The Best Choice for My Needs

If you're questioning whether to build from scratch, it ultimately depends on your specific situation. As the sole developer on my project, I need production-ready components that allow me to concentrate on the larger picture. Balancing design, backend development, and infrastructure demands that I optimize my time effectively.

Even if your circumstances differ, I hope this article provides a useful perspective for those who aren't full-time front-end developers but need to bring their ideas to life quickly. For many scenarios, building a UI from scratch can hinder progress and prevent your ideas from becoming reality.

Share Your Thoughts

This approach might not resonate with everyone, but based on my experiences, it has saved me considerable time and effort. I can now assemble a visually appealing interface and dedicate the remainder of my time to backend integration. I welcome your thoughts on component libraries or experiences with building solutions from the ground up—please leave a comment!