Frontend and Backend Development
Web app for sharing proposals, plans, documents, media and more
Roombriks
Web platform built with InertiaJS and Laravel
Everything shared in one place! Create onboarding portals, client portals and sales rooms that customers love.
Getting the MVP done
- .5 months
Unique Pages in the Application
- +
The Development Phases
To kick things off, given the tighter deadline, we decided against developing two separate applications (back-end and front-end) and instead opted to utilize InertiaJS along with Laravel. This approach has the advantage of accelerating the development process and minimizing errors along the way. For integrating the editor, we chose Tiptap, a very popular editor that allows for the extension with custom components.
Initially, we decided to segment the editor into several smaller editors, meaning we had defined blocks each containing an editor. This version proved more challenging to maintain. Eventually, we opted for a single editor across the entire page, which, from what we've observed so far, offers us a great deal of flexibility.
Of course, we're still exploring all the possibilities with Tiptap, but at this point, we can confidently say that it was the right choice. We've already begun to implement it in other projects, now equipped with the expertise gained.
The Challenge
The challenge we're facing involves integrating an editor, Tiptap, with some custom features such as Header and Project Plan. This task requires us to delve deep into both the editor's existing capabilities and our custom requirements to ensure seamless functionality.
The goal is not only to incorporate these features but to do so in a way that they feel intuitively integrated, enhancing the user experience and offering a cohesive and efficient workflow. To tackle this, we plan to leverage Tiptap's extensibility, allowing us to custom-build and integrate these features as naturally as if they were part of the editor's core offering.
This process involves a detailed analysis of user interaction with these features, ensuring that they are accessible and user-friendly while meeting the specific needs of our project.
Our approach is to treat this not just as a technical integration but as an opportunity to refine and elevate the overall functionality and user interface of the editor, making it a more powerful and versatile tool for our users.
The Process
- Discovery process - we sat with the client to identify his needs, user roles and features. the client presented us with a similar application, which they likely use themselves, detailing what aspects of the application they wanted and what elements did not meet their satisfaction, inquiring if we could develop something similar to it.
- Estimation - After 1-2 days, we provide an accurate estimation of time and costs.
- Timeline - We created a timeline in Jira, so the customer could see exactly what would be the deliverables in each sprint and we set the expectations and goals.
- First sprint - We kicked off with the setup and provided ways for the client to always see the latest developed version (preview of the work)
- Second sprint - contained the most critical part, the core of the application (which is the editor itself) - it's important to start with the core because we validate the business ASAP so the client doesn't spend money for other features if the core is not validated 100%
- The rest of 3 sprints (after validating the idea in the second sprint) - were for active development of all the remaining features
The Duration
The project officially started at the beginning of February and was initially estimated to be completed by the end of April.
We finished the first stage with everything we agreed upon, and now we are working on new features as the client requested an extended timeline.
The Outcome
Our project developed a collaborative text editor using Tiptap within a multi-room environment. Key features included:
Multi-room functionality:
- Create, manage, and customize multiple rooms and separate collaborative spaces for different groups or projects.
User invitations and collaboration:
- Invite users via email or direct links and real-time editing of text and images and permissions management for content security.
Tiptap editor integration:
- Rich text editing with added images, links, and media and custom extensions for enhanced collaboration tools.
Real-time synchronization:
- WebSockets for instant content updates across users and consistent and synchronized editing experience.
Robust backend infrastructure:
- Scalable backend for multiple rooms and users and efficient database management for room data and content.
User experience and interface design:
- User-friendly interface with easy navigation and editing tools.
Security and privacy:
- Strong security measures for data protection and access control and authentication to prevent unauthorized access.
Benefits and impact:
- Enhanced team collaboration and productivity and scalable architecture for growing user base and high user satisfaction with real-time capabilities and rich features.
Sneak Peak 🙌
If you're interested in learning more about the project, feel free to create an account and test it!