Frontend Foundations
This section covers the fundamentals needed to develop with OnSpot's frontend ecosystem. It includes both the core framework and the UI components system.
Sections
🏗️ Core Framework
Development fundamentals with Next.js and OnSpot's base architecture.
Main content:
- Frontend OnSpot - Project architecture and configuration
- App.tsx - Global application configuration
- LayoutMenu - Main navigation system
- Folder Structure - Project organization
- External Libraries - Specific dependencies usage
🎨 OnSpot-UX
Design system and reusable UI components library.
Main content:
- Introduction - Basic design system concepts
- Components - Complete component catalog
- Storybook - Interactive documentation
Technology Stack
Core Framework
- Next.js 13.5.1 - React framework with SSR/SSG
- React 18.2.0 - User interface library
- TypeScript 5 - Static typing for JavaScript
- Sass - CSS preprocessor for styling
- Apollo Client - GraphQL client for API communication
Component System
- @twlgroup/onspot-ux - UI component library
- @twlgroup/onspot-connections-ui-beta - Connection hooks and utilities
- Storybook - Component development tool
Development Tools
- ESLint - Code quality linter
- Prettier - Code formatter
- Bun/npm - Package managers
Recommended Learning Flow
For New Developers
Start with Core Framework
- Read OnSpot Frontend to understand the architecture
- Review App.tsx for global configuration
- Get familiar with Folder Structure
Explore OnSpot-UX
- Read the OnSpot-UX Introduction
- Explore the Component Catalog
- Experiment with Storybook
Practical Implementation
- Use External Libraries for connections
- Implement LayoutMenu for navigation
For Experienced Developers
- Review specific configuration files
- Explore advanced OnSpot-UX components
- Contribute to the design system
Best Practices
- Use OnSpot-UX components whenever possible
- Follow the folder structure established in Next.js
- Use TypeScript for strong typing
- Run linting and formatting before commits
- Document components in Storybook when creating them
- Maintain consistency with the established design system