Core Framework
This section covers the fundamentals of development with OnSpot's frontend framework, based on Next.js and its main components.
Content
🏗️ Frontend OnSpot
Main architecture, available scripts, dependencies, and best practices for frontend development.
Includes:
- Project configuration
- Development and build scripts
- Sass and styles management
- Main dependencies
- Development best practices
🖇️ External Libraries
Complete guide to use OnSpot's specific libraries: @twlgroup/onspot-connections-ui-beta and @twlgroup/onspot-ux.
Includes:
- Hooks for API connections
- Reusable UI components
- Practical implementation examples
⚙️ App.tsx in Next.js
Detailed documentation of the _app.tsx file, which functions as the main component that wraps the entire application.
Includes:
- Apollo Client configuration
- Authentication and theme management
- Global error handling
- Layout structure
🧭 LayoutMenu
Main application navigation system with adaptation for desktop and mobile according to user role.
Includes:
- Main navigation menu
- Mobile menu with modal
- User role customization
- Session management
📁 Folder Structure and Routes
Correlation between the centralized routing system and the physical folder structure in Next.js.
Includes:
- Next.js routing system
- Dynamic and nested routes
- Page organization
- Structure best practices
Core Technologies
- Next.js 13.5.1 - React framework with SSR/SSG
- React 18.2.0 - User interface library
- TypeScript 5 - Static typing
- Sass - CSS preprocessor
- Apollo Client - GraphQL client
Getting Started
- Start with Frontend OnSpot to understand the architecture
- Review App.tsx for global configuration
- Get familiar with LayoutMenu for navigation
- Explore the available External Libraries