Artive - Smart Classroom & AV Solutions

• Designed responsive frontend solutions for the AV platform using Vue.js, HTML, and CSS. • Connected REST APIs to fetch and display digital signage and product data efficiently. • Improved app performance and UX by implementing a modular component-based architecture. • Enhanced accessibility by adopting modern design patterns and best practices.

Oct 2024 - Dec 2024

live Demo

Technologies

#vue.js#Django(Python)#JavaScript#CSS#HTML#REST API

Live Demo

Case Study Overview

# Artive - Smart Classroom & Corporate AV Solutions **Artive** is a premier technology provider modernizing educational and corporate spaces with high-end audio-visual solutions. The platform serves as a professional product showcase for interactive displays, digital signage, and conference systems. **My Role (Professional Experience):** Working as a **Junior Frontend Developer & UI/UX Expert** within the company, I played a key role in shaping the digital identity of the brand. I bridge the gap between design and code, taking responsibility for both the visual experience and the technical implementation of the user interface. This project was a significant milestone in my professional journey, allowing me to refine my skills in real-world production environments. ### **Key Contributions:** * **UI/UX Leadership:** Led the visual design implementation, ensuring a premium, user-centric experience that improved engagement. * **Professional Development:** Transitioned designs into high-quality Vue.js components, adhering to professional coding standards. * **API & Data Handling:** Collaborated with backend teams to integrate REST APIs, ensuring dynamic data was presented beautifully. * **Testing & QA:** Conducted rigorous visual testing to ensure flawless performance across all corporate and consumer devices. ### **Tech Stack:** * **Frontend:** Vue.js, JavaScript, HTML5, CSS3, SCSS * **Design Tools:** Figma / Adobe XD (for UI/UX planning) * **Collaboration:** Git, VS Code, Postman

The Challenge

• Balancing Design & Code: Acting as both the UX expert and developer required constantly balancing creative freedom with technical constraints to ensure feasible, high-performance implementations. • Professional Standards: Adapting to industry-standard workflows and writing clean, maintainable code for a live commercial product was a significant step up from personal projects. • Complex Component Logic: Managing state and logic for interactive components (like dynamic product filtering) while maintaining a seamless user experience was a challenging but rewarding learning experience.

My Solution

• Pixel-Perfect Implementation: Applied a keen eye for design to ensure the final coded product matched the UX vision 100%, delivering a polished, professional-grade interface. • Skill Acquisition: Leveraged this opportunity to deeply understand Vue.js lifecycles and advanced CSS techniques, significantly leveling up my frontend expertise. •Iterative Testing: Implemented a continuous feedback loop of design-code-test, allowing me to catch UI bugs early and deliver a robust, error-free user interface.