Frontend web application of the OSM Full-Stack Platform, developed with Angular as part of my Bachelor's Final-Year Project (PFE).
The application provides a user-friendly interface for administrators, sales representatives and commercial users to interact with product catalogs, contracts, statistics and automated upload processes.
It communicates with the OSM Spring backend through HTTP services.
The frontend was designed to provide a centralized and intuitive interface for managing and monitoring business operations related to product catalogs and automated data transfers.
The platform allows users to easily navigate product catalogs, search for specific products, monitor statistics and access information according to their roles.
- User authentication
- Profile management
- Role-based access to application functionality
Administrator features include:
- User management
- Profile management
- User activity and history consultation
- Browse product catalogs
- Search for specific products
- View product information
- Consult validated catalogs
- Catalog validation workflows
- View contracts
- Manage contract-related information
- Personalized experience for commercial users
- Sales statistics visualization
- Upload process monitoring
- Business activity tracking
- Graphical representation of operational data
- View upload history
- Monitor automated product upload processes
- Track the progress and status of operations
- Display information related to failed operations
- Support monitoring of automated file transfer processes
- Facilitate identification of processing issues
The application supports different business profiles:
- Authenticate
- Manage profiles
- Manage users
- View operation history
- View statistics
- Consult and validate catalogs
- View products
- Authenticate
- View sales statistics
- Consult and validate catalogs
- Authenticate
- Consult validated catalogs
- Manage and consult contracts
The Angular application follows a component and service-based architecture:
Templates ↔ Components → Services → HTTP Client → Spring Backend API
This architecture separates:
- User interface components
- Application logic
- API communication
- Reusable services
- Angular
- TypeScript
- HTML
- CSS
- Angular HTTP Client
- REST API Integration
The frontend communicates with the OSM Spring Backend through HTTP requests.
The backend provides access to:
- Authentication
- User management
- Product and catalog data
- Contracts
- Statistics
- Upload history
- Automated process information
The solution consists of:
- 🌐 OSM Frontend — Angular web application
- ⚙️ OSM Backend — Spring backend and REST services
- 📂 FTP Server — Automated CSV/TXT file exchange
- 🗄️ Database — Application and business data storage
This application was developed as part of my Bachelor's Final-Year Project (PFE).
The project gave me practical experience in developing a complete Full-Stack solution using Angular and Spring, integrating REST APIs and implementing interfaces for different business user roles.
Meriem Bembli
Full-Stack & Mobile Application Developer