angular library

MEAN Stack Angular Component Library + NodeJS /Backend 🧬

fahrnbach
0
0
TypeScript

🧩 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

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