A comprehensive Angular 17 web application for the Noesis platform - an AI-powered interactive platform designed to strengthen reading comprehension through gamified learning experiences. The platform facilitates book club management, reading resource sharing, and interactive quiz-based assessment with intelligent scoring systems.
- 🎯 Project Overview
- 🏗️ Architecture
- 🚀 Core Features
- 🛠️ Technical Stack
- 📁 Project Structure
- Authentication & Security
- 🎯 Key Components
- 📊 Data Management
- 🔧 Development Setup
- 📈 Performance Features
- 🔗 API Integration
- 🎨 UI/UX Design
- 🔮 Future Enhancements
- 🤝 Contributing
- 👥 Authors
- License
Noesis Frontend is a modern single-page application that provides users with an engaging platform for collaborative reading and comprehension assessment. The application leverages AI-generated quizzes, gamification elements, and social features to create an immersive learning environment for book clubs and individual readers.
The application follows Angular's modular architecture with clear separation of concerns:
The following diagram illustrates the high-level architecture of the Noesis Frontend application, showing the relationship between modules, components, services, and external systems:
- Auth Module - Handles user authentication and registration
- Clubs Module - Manages book clubs, resources, and quizzes
- Explore Module - Provides club discovery and browsing
- Profile Module - User profile management and statistics
- Core Module - Shared services, guards, and business logic
- Shared Module - Reusable components and utilities
- Lazy Loading - Route-based code splitting for optimal performance
- Reactive Forms - Form validation with custom validators
- HTTP Interceptors - Automatic JWT token injection
- Route Guards - Authentication and authorization protection
- Standalone Components - Modern Angular 17+ component architecture
- Components: UI components implementing Angular's reactive patterns
- Templates: HTML templates with data binding and directives
- Routing: Client-side navigation with lazy-loaded modules
- Services: Injectable services handling business operations
- State Management: RxJS observables for reactive data flow
- Form Management: Reactive forms with custom validators
- HTTP Client: RESTful API communication with interceptors
- Local Storage: Browser storage for session persistence
- Error Handling: Comprehensive error management and user feedback
- Authentication Guards: Route protection based on login status
- Authorization Guards: Role-based access control (Founder/Member)
- JWT Interceptors: Automatic token injection for API calls
- Input Validation: XSS prevention and data sanitization
The following sequence diagram illustrates the main data flow and user interactions within the Noesis Frontend application:
- Club Creation - Users can create public or private book clubs
- Role-Based Access - Founder and Member roles with different permissions
- Membership Requests - Approval system for club joining
- Club Discovery - Browse and search available public clubs
- PDF Integration - Built-in PDF viewer using ng2-pdf-viewer
- Resource Management - Upload, organize, and share reading materials
- Metadata Support - Author, title, bibliographic references
- Access Control - Token-based resource access within clubs
- Automated Quiz Generation - AI creates comprehension quizzes from reading materials
- Interactive Assessment - Multiple-choice questions with real-time feedback
- Timer-Based Challenges - Configurable time limits for quiz completion
- Performance Analytics - Detailed scoring and statistics tracking
- Quiz Regeneration - Founders can generate new quiz versions
- Adaptive Difficulty - Questions tailored to reading material complexity
- Medal System - Achievement badges for various accomplishments
- Global Scoring - Comprehensive point system across all activities
- Leaderboards - Club and platform-wide ranking systems
- Progress Statistics - Detailed analytics on reading and quiz performance
- Achievement Milestones - Bronze, silver, gold medal classifications
- Responsive Design - Mobile-first approach with adaptive layouts
- Real-Time Feedback - Instant validation and progress updates
- Accessibility - Screen reader support and keyboard navigation
- Progressive Loading - Optimized loading states and spinners
- Angular 17 - Latest Angular framework with standalone components
- TypeScript 5.4 - Strong typing and modern JavaScript features
- RxJS 7.8 - Reactive programming for asynchronous operations
- Angular Router - Client-side routing with lazy loading
- Reactive Forms - Form handling with validation
- ng2-pdf-viewer 10.3 - PDF document rendering
- date-fns 4.1 - Date manipulation utilities
- xlsx 0.18 - Excel file processing capabilities
- Angular CLI 17.3 - Project scaffolding and build tools
- TypeScript Compiler - Code compilation and type checking
- ESLint - Code quality and style enforcement
- Auth API - User authentication and JWT token management
- Core API - Business logic, club management, and quiz processing
- RESTful Services - HTTP-based API communication
- JWT Authentication - Secure token-based authorization
src/
├── app/
│ ├── auth/ # Authentication module
│ │ ├── login/ # Login component
│ │ ├── signup/ # User registration
│ │ └── welcome/ # Landing page
│ ├── clubs/ # Club management module
│ │ ├── home/ # Club dashboard
│ │ ├── quizzes/ # Quiz system
│ │ ├── resources/ # Reading materials
│ │ └── ranking-requests/ # Member management
│ ├── core/ # Core services and utilities
│ │ ├── data/ # Data models and interfaces
│ │ ├── domain/ # Business entities
│ │ ├── guards/ # Route protection
│ │ ├── interceptors/ # HTTP interceptors
│ │ ├── services/ # Business services
│ │ └── validators/ # Custom form validators
│ ├── explore/ # Club discovery
│ ├── profile/ # User profile management
│ └── shared/ # Shared components
│ ├── components/ # Reusable UI components
│ └── constants/ # Application constants
├── assets/ # Static resources
│ ├── ico/ # Icons and images
│ └── img/ # Background images
└── environments/ # Environment configurations
- Registration - Users create accounts with username/password
- Login - JWT token generation and storage
- Token Management - Automatic token injection via HTTP interceptors
- Role Authorization - Founder/Member role-based access control
- Session Management - Token expiration and refresh handling
- JWT Token Protection - Secure API communication
- Route Guards - Unauthorized access prevention
- Input Validation - XSS and injection attack prevention
- Custom Validators - Form security and data integrity
- HTTPS Communication - Encrypted data transmission
- Interactive quiz interface with timer functionality
- Real-time question navigation and option selection
- Automatic scoring and performance feedback
- Edit mode for club founders
- Statistics display with detailed analytics
- Seamless PDF document rendering
- Navigation controls and zoom functionality
- Resource metadata display
- Direct quiz access from reading materials
- Club creation and configuration
- Member invitation and approval system
- Resource sharing and organization
- Activity tracking and statistics
- Personal information management
- Achievement and medal display
- Progress tracking and analytics
- Account settings and preferences
- Local Storage - User session and preferences
- Service-Based State - Shared data across components
- Observable Patterns - Reactive data flow
- Form State - Reactive form management
- HTTP Client - RESTful API communication
- Error Handling - Comprehensive error management
- Loading States - User feedback during operations
- Caching Strategies - Optimized data retrieval
- Node.js (LTS version 18+ recommended)
- npm (comes with Node.js)
- Angular CLI version 17.3.6
# Clone the repository
git clone https://github.com/NoesisTeam/noesis-frontend.git
# Navigate to project directory
cd noesis-frontend
# Install dependencies
npm install
# Start development server
ng serve --open
# The application will be available at http://localhost:4200npm start- Start development server with hot reloadnpm run build- Build for production with optimizationsnpm test- Run unit tests with Karmanpm run watch- Build in watch mode for developmentng generate- Generate new components, services, etc.
The application uses environment-specific configurations:
- Development -
src/environments/environment.ts - Production -
src/environments/environment.prod.ts
- Output Path -
dist/noesis-frontend - Asset Optimization - Automatic image and code optimization
- Bundle Analysis - Size budgets and performance monitoring
- Environment Variables - API endpoint configuration
- Lazy Loading - Route-based code splitting
- OnPush Change Detection - Optimized component rendering
- TrackBy Functions - Efficient list rendering
- Async Pipe - Memory leak prevention
- Image Optimization - WebP format usage
- Tree Shaking - Unused code elimination
- Code Splitting - Modular loading
- Compression - Gzip compression support
- Caching - Browser and CDN caching strategies
-
Auth API -
https://authapi-dvz6.onrender.com/auth/- User registration and authentication
- JWT token management
- Role-based authorization
-
Core API -
https://noesis-coreapi.onrender.com/club/- Club management operations
- Reading resource handling
- Quiz generation and scoring
- User statistics and achievements
- HTTP Interceptors - Automatic token injection
- Error Handling - Comprehensive error management
- Loading States - User feedback during operations
- Retry Logic - Network resilience
- Custom CSS Variables - Consistent theming
- Responsive Grid - Mobile-first layout
- Component Library - Reusable UI elements
- Accessibility Standards - WCAG compliance
- Loading Spinners - Visual feedback for operations
- Dialog Components - Modal interactions
- Form Validation - Real-time input validation
- Navigation - Intuitive routing and breadcrumbs
Here are some representative snaps of the application:
- Real-time collaboration features
- Advanced AI-powered recommendations
- Mobile application development
- Enhanced accessibility features
- Multi-language support
- Advanced analytics dashboard
- Follow Angular style guide conventions
- Implement comprehensive unit tests
- Use TypeScript strict mode
- Follow reactive programming patterns
- Maintain component isolation
- ESLint Configuration - Code style enforcement
- TypeScript Strict Mode - Enhanced type safety
- Component Architecture - Single responsibility principle
- Service Patterns - Dependency injection best practices
Developed by the Noesis Team
For questions, suggestions, or contributions, please contact the development team or create an issue in the repository.
This project is licensed under the MIT License - see the LICENSE file for details.