Officener
Officener Web Platform
A project that expands the existing Officener mobile app service to the web, allowing users to conveniently use it on multiple platforms. Developed complaint modification/deletion and image upload components, and implemented fast development in parallel with backend development using MSW for API Mocking.Improved user experience by implementing form state management and validation using React Hook Form & Zod. This project was developed through an industry collaboration program and was eventually launched as a real service.
TIMELINE
24.09.02 ~ 24.09.26
TEAM
5 Frontend
ROLE
Frontend Developer
SCOPE
· Development : 100%
Frontend
Next.js, TypeScript, TanStack Query, Zustand, Zod, React Hook Form, TailwindCSS, Shadcn/UI, MSW
Collaboration
Git, Notion, Discord, Linear, Figma
How can we provide optimized web experiences for mobile app features?
While expanding features that were only available in the app to the web version, UX optimization for PC environment was needed.Improved development speed by proceeding with frontend development before backend completion using MSW for API Mocking.
Providing an Optimized User Experience for Web
As the project involved transitioning the existing mobile app to a web environment, we adopted Next.js as the development framework. This decision was based on SEO considerations and the need to handle dynamic data per building using Next.js's dynamic routing and server-side rendering (SSR). The project also implemented responsive design to ensure a seamless experience across different devices. Additionally, form validation using Zod and React Hook Form reduced user input errors, while server state management with TanStack Query improved data synchronization and caching strategies for better performance.
Complaint Management
Registration and Status Management of Complaints
Users can register complaints and check processing status, write details with image uploads, communicate through replies with administrators, and modify or delete existing complaints.
Parking Registration Management
Registration and Status Management of Parking
Users can register complaints and check processing status, write details with image uploads, communicate through replies with administrators, and modify or delete existing complaints.
Increased user convenience through improved multi-platform accessibility
Improved development productivity using MSW for API Mocking
Experience in Handling API Deficiencies as a Frontend Developer
Our team was primarily responsible for developing the comment and complaint submission features, including image uploads, modification, and deletion functionalities. These features required not just UI implementation but also real-time data updates, proper alerts after modifications or deletions, and seamless user interactions. However, in the early stages of the project, the API was not fully developed, which led us to adopt MSW (Mock Service Worker) to continue frontend development efficiently.
Instead of simply using static mock data, we opted for API Mocking that closely mirrored the actual API structure, enabling more accurate development and testing. Additionally, using MSW facilitated better communication with designers and planners. Through live demos, we could showcase implemented features, discuss UX and flow improvements, and quickly integrate feedback to refine the user experience.
Ultimately, this experience allowed us to successfully develop features even in the absence of a fully implemented API, while gaining hands-on knowledge of practical API Mocking strategies for real-world frontend development.