This project is a Modern Digital Ecosystem Interface built with React.js. It simulates a comprehensive dashboard for a telecommunications and financial services provider, allowing users to manage:
- Telecom Plans: Tracking fiber internet (Fibra) and mobile data usage.
- Financial Services: A digital wallet simulation (MarVin Pay), personal loans, and Open Finance integrations.
- Value-Added Services: Device insurance and subscription management (e.g., Disney+).
The system was built with a focus on Mobile-First design, providing an "App-like" experience directly in the web browser, featuring bottom navigation and dynamic side drawers.
- Dynamic Modals & Sidebars: Centralized state management to smoothly transition between dozens of different screens (Invoices, Recharges, Profile, Store) without reloading.
- Typewriter Animation: Custom React
useEffecthook that greets the user with an animated text effect. - App-Like Navigation: Features a sticky bottom navigation bar and a responsive side-drawer menu for advanced settings.
- Real-Time UI Updates: State-driven interfaces that instantly reflect user interactions, powered by React Hooks (
useState). - Modern Iconography: Integration with
lucide-reactfor clean, scalable, and professional SVG icons.
- Access the Live Version: Click here to view the App (Update link if necessary)
- Interact with Cards: Click on the main dashboard cards (Fibra, Móvel, Pay, Seguros) to open detailed modals.
- Navigate: Use the bottom navigation bar to switch between "Pra você", "Assinaturas", "Loja", "Benefícios", and "Pay".
- Open Sidebar: Click the Hamburger Menu icon (top right) to access billing (Central de faturas) and Open Finance options.
1. index.html Main application structure (Vite entry point)
2. App.jsx Core React component (States, Modals, Layout)
3. App.css Styles, CSS Variables, and Responsive Layouts
4. main.jsx React DOM rendering and StrictMode wrapper
5. README.md Project documentation
Marcos Vinicius
Software Engineering Student & Trainee Full Stack
Founder of Marvin Site Builders — Focusing on creating high-performance digital ecosystems and landing pages.
