Overview Frontend
This documentation provides a comprehensive guide to understanding Terra’s frontend architecture, demonstrating how design in Figma translates directly into production code. The project is built with Astro, SCSS, and JavaScript, following a modular, component-based architecture.
What You’ll Learn
Section titled “What You’ll Learn”- How Figma serves as the source of truth for design
- The connection between design system and code structure
- How to work with foundations, components, and modules
- JavaScript architecture and interaction patterns
- Best practices for maintaining design-code consistency
Tech Stack
Section titled “Tech Stack”- Framework: Astro (Static Site Generator)
- Styling: SCSS (Sass)
- Scripting: Vanilla JavaScript (ES6+)
- Design Components: Terra’s internal NPM libraries (
@terrahq/astro-core, Global Componets, etc.)