🧩 Component Library App (Angular + Node.js)

Live Site: library.fahrnbach.one
Repo: github.com/fahrnbach/angular-library

A custom-built Angular + Node.js application showcasing a growing collection of reusable UI components. Designed for speed, scalability, and elegant user experience, this tool is built to serve as both a personal design system and a technical demonstration of frontend performance, component reuse, and backend integration.

---

🧠 Case Study: Building a Full-Stack Component Library

🎯 Objective

To design and implement a full-stack web application that demonstrates my ability to architect reusable UI components in Angular while also integrating a backend API using Node.js. The goal was to build a tool I could use to prototype and reuse UI elements in future projects and to display this skillset to prospective employers.

🔍 Discovery

In building various projects, I noticed I was often re-creating similar UI elements — cards, tabs, modals, etc. — without a central place to store and test them. I realized that creating a standalone component library would not only improve my workflow but also serve as a strong technical showcase.

🛠️ Development

• Frontend (Angular):
  I structured the Angular app using feature modules, isolated component styles, and strict typing. Components are filterable via a live search box, and each includes its own preview + optional documentation panel.
  Features include:

  • Dark mode toggle (CSS custom properties)
  • Routing to each component demo
  • Local storage for user settings

• Backend (Node.js + Express):
  The backend serves metadata and is designed for future database expansion. Right now, it's a simple Express API with JSON-based mock data, but the app is structured to easily plug in MongoDB or PostgreSQL later.

• Performance & Design:
  Each component is built to be modular and fast. SCSS theming, accessibility best practices, and mobile responsiveness were core priorities.

🧪 Challenges Overcome

• Built reusable styles without adding dependencies
• Created a dark mode system that persists across sessions
• Developed a scalable folder and route architecture in Angular

🌱 What's Next

• Add code snippets and copy buttons per component
• Connect with a CMS (like my Python blog backend) for live documentation
• Build a favorites system to "star" components
• Add test suites with Jasmine + Karma

---

🚀 Project Highlights

• Angular 16+ frontend with component sandboxing
• Express.js backend API
• Live search + dark mode
• Mobile responsive layout
• Built for real-world reuse and fast prototyping

---

🛠️ Technologies Used

Frontend:

• Angular
• RxJS
• SCSS
• TypeScript
• Angular CLI
• LocalStorage API

Backend:

• Node.js
• Express
• (Optional MongoDB planned)

---

📦 Getting Started

# Frontend
cd frontend
npm install
ng serve

# Backend
cd backend
npm install
npm start

Portfolio Links:

🗃️ Live Demo (Angular Library)

🌐 Portfolio Site

🎨 Art App

📖 Blog App w/ Python CMS

📬 Let’s Connect

• 🌐 Portfolio: fahrnbach.one
• 💼 LinkedIn: https://www.linkedin.com/in/fahrnbach
• 📧 Email: [email protected]

---

“Code is craft. Design is empathy. My goal is to bridge the two.”