We are good at B2B solutions for productivity, analytics, marketing, sales, and engineering. With strong business and tech expertise, we actually create time for you and your clients.  Have a look at our selected projects.

Rely on us as your technical co-founder with a team that will deliver your product to the market without equity requirements.

WE DELIVER TURNKEY PROJECTS

React

<h2>Overview&nbsp;</h2><p><a href="https://www.smartsuite.com/">SmartSuite</a> is a web and mobile no-code platform that serves as a tool for managing everything needed to get work done: spreadsheets, documents, collaboration tools, databases, file management products and automation capabilities — all in one place.</p><p>SmartSuite work management system is transforming how organizations get work done by providing a collaborative Work Management platform that enables teams to plan, track and manage workflows - whether it be a project, an ongoing process or routine everyday tasks.</p><h2>Purpose and Need</h2><p>SmartSuite, if you study the market, has proven to be what the no-code market needs, as it is not just beautifully designed with cool features. SmartSuite work management software was conceived as a deeply customizable tool. All its functions are configured by the development team so that they are as useful and convenient as possible. Of course, to set up these functions, we needed high technical skills, as well as deep knowledge of business analysis, quality assurance, and project management. Its wide functionality, which we will discuss below, is accompanied by wide scalability, use of two databases, and multilingualism.</p><h2>Workflow</h2><p>Our story with the project began when the SmartSuite founder Jon Darbyshire approached us. He was looking for a development team to implement his business idea and drew attention to one of the work management tools we implemented. It was a project management tool called <a href="https://gearheart.io/projects/transpose/">Transpose</a>. So Jon realized that our team had enough expertise. We had a very warm and pleasant acquaintance story. Jon flew to Ukraine, where he met us personally, and we realized that the same perfect match had happened.</p><p>It's important to say that we had a lot of work to do, as our team started the project from scratch, and worked at all stages from requirements creation, development, testing, and deployment to production.</p><p>SmartSuite is one of the largest and best work management software we've ever worked on. Along with Gearheart, two different teams of different sizes located in different time zones work on the product. For this reason, besides the development-based challenges, we had to adjust our processes to learn how to work with a big team.&nbsp;</p><h2>Technology&nbsp;</h2><p>Under SmartSuite’s hood are React, Angular, Python, Django, Typescript, WebSockets, Node.js, MongoDB, ElasticSearch, Kubernetes, Postgres, Cypress.</p><h2>Structure and Features</h2><p>SmartSuite works great for any size business from startup to large enterprise. The platform’s core features include:</p><h3>Data Visualization &amp; Interaction</h3><p>Put your data to work with powerful reports, dashboards, charts and views. Interact with those records, tracking your progress, interactions with customers and more.</p>

<h3>Team Collaboration</h3><p>Collaborate with your team seamlessly with comments, messaging and through integrations with technologies like Slack. With these functions built directly into SmartSuite interfaces your interactions are made in the context of your work.</p>

<h3>Roles and Permissions</h3><p>Protect sensitive data while allowing teams access to the information they need with multiple permissions options. Share data across the organization while limiting edits to specific teams or assigned users.</p>

<h3>Security and Privacy</h3><p>SmartSuite ensures the privacy and security of your data throughout its lifecycle. With data secured from the user’s browser or mobile device all the way through encryption at rest, your information is safe with SmartSuite. SmartSuite is also GDPR compliant and supports all of your regulatory obligations to maintain privacy.</p><h3>Task Management</h3><p>Plan, manage and assign tasks to make sure that you're on time, every time. Tasks are integrated into every part of SmartSuite, allowing you to assign work items, specify due dates and ensure that everyone is accountable.</p>

<h3>Workflow Automations</h3><p>Streamline your workflow with point-and-click automations to eliminate busy work. An easy to configure rules engine reacts to events in the system or external events, triggering actions that you define as part of your workflow. Update records, send Slack notifications, change a Google Sheet document and much more.</p>

<h3><span style="background-color:transparent;color:#000000;">Real Time Notifications</span></h3><p><span style="background-color:transparent;color:#000000;">Bring important details to your attention through online notifications, email or Slack. Users can configure how they are notified, and notifications can be configured as SmartSuite automations actions to bring attention to important events.</span></p>

<h3><span style="background-color:transparent;color:#000000;">Solution Templates</span></h3><p><span style="background-color:transparent;color:#000000;">Over 200 industry best-practices solution templates get you up and running fast. These pre-configured sets of SmartSuite applications allow you to create the structure to track all of your work and processes in minutes. From there you can tweak and adjust any component of those templates to make it a perfect fit for your organization.</span></p>

<h2><span style="background-color:transparent;color:#000000;">Results</span></h2><p><span style="background-color:transparent;color:#000000;">After the successful release of the product, our team continues to work on the project, provide support and work with feedback to improve the functionality of SmartSuite.</span></p><p><span style="background-color:transparent;color:#000000;">Watch the video where John Darbyshire, CEO of SmartSuite, talks about how we met and how they work on the product was arranged. John also shares details on how SmartSuite has grown since its launch to reach 1.2M ARR in 4 weeks.</span></p><figure class="media"><div data-oembed-url="https://www.youtube.com/watch?v=MLzSW78ed4E&amp;t=535s"><div style="position: relative; height: 0; padding-bottom: 56.2493%; background: black;"><iframe src="https://www.youtube.com/embed/MLzSW78ed4E?start=535" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe></div></div></figure><p>&nbsp;</p>

Alice, a young girl, sits bored by a riverbank and spots a White Rabbit with a pocket watch and waistcoat lamenting that he is late. Surprised, Alice follows him down a rabbit hole, which sends her into a lengthy plummet but to a safe landing. Inside a room with a table, she finds a key to a tiny door, beyond which is a garden. 

Test Orange button Project Page Test test test test test test test test test test test test

Let's meet Vladimir Sidorenko, CEO at Gearheart team

Anna Ianushenko, business analyst at Gearheart

Igor Tokarev, developer at Gearheart

Let's meet Pasha Volkov, developer at Gearheart team

Let's meet Nana Sichinava, Project Manager at Gearheart team

Let's meet Vladimir Kalyuzhny, developer at Gearheart team

Anton Lysenkov, developer at Gearheart

Let's meet Nikolay Budnikov, Project Manager at Gearheart team

Let's meet Vlada Oliinyk, developer at Gearheart team

Let's meet Dmitriy Lyapun, developer at Gearheart team

Vitaliy Vodyanitskiy, developer at Gearheart

Sergey Kiselev, developer at Gearheart

Mikhail Zykov, developer at Gearheart

Let's meet Emma Khomits, QA engineer at Gearheart team

Let's meet Olena Gavryliuk, QA engineer at Gearheart team

Vladislav Motorin, developer at Gearheart

Let's meet  Alexey Rozhdestvenskyi, developer at Gearheart team

Let's meet Alexandr Oleynik, HTML / CSS coder at Gearheart team

Let's meet Oksana Brylova, QA engineer at Gearheart team

Elen Kuklina, delivery manager at Gearheart

Let's meet Ihor Tkachenko, DevOps at Gearheart team

Let's meet Nikolay Korovenko, QA engineer at Gearheart team

Let's meet Konstantin Kuznetsov, developer at Gearheart team

Elena Shkulipa, QA engineer at Gearheart

Let's meet Anna Gribacheva, Project Manager at Gearheart team

Let's meet Aleksey Shulga, developer at Gearheart team

Let's meet Artem Kunytsia, Business Analyst at Gearheart team

Let's meet Yurii Mironov, developer at Gearheart team

Let's meet Igor Bolotnikov, developer at Gearheart team

Anna Sydorenko, business analyst at Gearheart

Alexander Paramonov, developer at Gearheart

Let's meet Natali Kuklina, QA engineer at Gearheart team

Let's meet Mykyta Miazin, developer at Gearheart team

Let's meet Oleksandr Lebid, QA engineer at Gearheart team

Let's meet Let's meet Hanna Franko, QA at Gearheart team

Let's meet Yurii Kramarenko, developer at Gearheart team

SmartSuite

Снимок экрана 2023-08-02 155141 копія.png

Python

Angular

Mongodb

PostgreSQL

ElasticSearch

Typescript

Django

Kubernetes

WebSockets

Node.js

Cypress

Building No-Code Platform, Work Management App | Gearheart

SmartSuite history through the eyes of the client

<h2><span style="background-color:transparent;color:rgb(0,0,0);">OVERVIEW</span></h2><p><a target="_blank" rel="noopener noreferrer" href="https://jiffsy.co"><span style="background-color:rgb(255,255,255);color:hsl(240,75%,60%);"><u>Jiffsy</u></span></a><span style="background-color:rgb(255,255,255);color:rgb(29,28,29);"> is a private app designed to help fashion brands create and maintain a modern, mobile-first storefront with AI recommendations. The showcase app utilizes innovative Jamstack and PWA technologies, resulting in a fast and reliable storefront, which Shopify themes cannot match. Jiffsy guarantees growth in conversion rates for fashion e-commerce stores and is currently available to Shopify stores in the US, UK, Canada, and Ukraine.</span></p><h2><span style="background-color:transparent;color:rgb(0,0,0);">MAIN PURPOSE AND NEED</span></h2><p><span style="background-color:rgb(255,255,255);color:rgb(29,28,29);">Jiffsy's primary purpose is to provide fashion brands with a solution for creating a highly customized, modern storefront easily and quickly. Using cutting-edge technologies such as Jamstack and PWA, Jiffsy allows for a super-fast frontend and session-based recommendation system. Jiffsy aims to streamline the process of storefront creation and integration for fashion brands, without requiring deep knowledge of backend development.</span></p><h2><span style="background-color:transparent;color:rgb(0,0,0);">WORKFLOW</span></h2><p><span style="background-color:rgb(255,255,255);color:rgb(29,28,29);">Jiffsy's development was based on the idea that in the era of Instagram and TikTok, when 75% of e-commerce traffic occurs on mobile devices, it's time to build stores focused on mobile experience and entertaining shopping from the very beginning. Our developers joined the team at the beginning of the development process when only the design was ready. Their primary task was to create a large library of UI components and their isolated testing. Later, parallel development of the backend and setting up pages and APIs on Next.js began. Within a few months, they started connecting customers' stores and testing real data.</span></p><h2><span style="background-color:transparent;color:rgb(0,0,0);">TECHNOLOGY</span></h2><p><span style="background-color:rgb(255,255,255);color:rgb(29,28,29);">Jiffsy's development involved creating UI components in the Storybook environment using React, TypeScript, and Tailwind CSS. For the backend and admin panel, the significantly extended Payload CMS was used in conjunction with MongoDB and GraphQL. Next.js was used as the front-end, with Jamstack and PWA technologies ensuring a fast and reliable showcase.</span></p><h2><span style="background-color:transparent;color:rgb(0,0,0);">STRUCTURE AND FEATURES</span></h2><h3><span style="background-color:transparent;color:rgb(0,0,0);">PRODUCT FEED</span></h3>

<p><span style="background-color:rgb(255,255,255);color:rgb(29,28,29);">Jiffsy's product feed is designed to provide an infinite scroll experience, similar to social media platforms. The AI-powered feed provides personalized recommendations for each customer based on their browsing and purchase history. This feature allows customers to discover new products easily and helps increase engagement on the storefront.</span></p><h3><span style="background-color:transparent;color:rgb(29,28,29);">USER-FRIENDLY ADMIN PANEL</span></h3>

<p><span style="background-color:rgb(255,255,255);color:rgb(29,28,29);">The platform offers a range of customizable themes and showcase design options that can be easily modified from a user-friendly admin panel. The aim is to provide a straightforward, drag-and-drop experience that does not require any technical skills.</span></p><h3><span style="background-color:transparent;color:rgb(67,67,67);">PRODUCT PAGE</span></h3><p>&nbsp;</p>

<p><span style="background-color:transparent;color:rgb(32,33,36);">The product page can be quickly and easily customized by selecting the necessary blocks, such as size, color, description, etc.</span></p><h3><span style="background-color:transparent;color:rgb(32,33,36);">SIZE GUIDE</span></h3>

<p><span style="background-color:rgb(255,255,255);color:rgb(29,28,29);">Jiffsy transforms product data into easy-to-read and consistent size charts. This feature helps customers make more informed purchase decisions by providing accurate and clear product sizing information.</span></p><h3><span style="background-color:transparent;color:rgb(29,28,29);">SHOPPING CART</span></h3>

<p><span style="background-color:transparent;color:rgb(0,0,0);">It is one of the core components of most e-commerce websites. An essential tool for customers to organize and manage their shopping experience.</span></p><h3><span style="background-color:transparent;color:rgb(67,67,67);">PRODUCT SEARCH</span></h3>

<p><span style="background-color:transparent;color:rgb(0,0,0);">Convenient product search allows users to easily find the desired product.</span></p><h3><span style="background-color:transparent;color:rgb(0,0,0);">REVIEWS BLOCK</span></h3>

<p><span style="background-color:transparent;color:rgb(0,0,0);">Reviews allow users to share their experience with the website's offerings, and to read and rate the experience of others.</span></p><h3><span style="background-color:transparent;color:rgb(0,0,0);">LOOKBOOK</span></h3>

<p><span style="background-color:transparent;color:rgb(0,0,0);">Customers can create a lookbook or runway page, show lifestyle photos, and mark products there.</span></p><h3><span style="background-color:transparent;color:rgb(0,0,0);">BLOG</span></h3>

<p><span style="background-color:transparent;color:rgb(0,0,0);">Customers can tell their stories using the blog page.</span></p><h2><span style="background-color:transparent;color:rgb(0,0,0);">RESULTS</span></h2><p><span style="background-color:rgb(255,255,255);color:rgb(29,28,29);">Today, Jiffsy serves over 20 brands and is a partner of the best B2B accelerator in Europe Startup Wise Guys. Jiffsy has received many positive reviews from satisfied customers, and its unique approach to storefront creation has led to its receiving a grant from Google. Through its use of innovative technology, Jiffsy has successfully helped fashion brands create and maintain modern, mobile-first storefronts that guarantee growth in conversion rates.</span></p>

Mobile-first storefront with AI recommendations

Let's meet Maxim Khmara, developer at Gearheart team

Let's meet Mariia Osadcha, developer at Gearheart team

Jiffsy

CleanShot 2023-03-21 at 15.28.13@2x копія.png

Tailwind

Next.js

Payload CMS

Building Mobile storefront for fashion e-commerce | Gearheart

<h2><span style="background-color:transparent;color:rgb(0,0,0);">OVERVIEW</span></h2><p><a target="_blank" rel="noopener noreferrer" href="https://www.neptyne.com/"><span style="background-color:transparent;color:rgb(0,0,0);"><u>Neptyne</u></span></a><span style="background-color:transparent;color:rgb(0,0,0);"> is a startup product that provides users with cloud-based programmable spreadsheets. While supporting the standard actions and shortcuts that users expect from spreadsheet software, it also allows you to write and run Python code.</span></p><p><span style="background-color:transparent;color:rgb(0,0,0);">You can use all the power of Python coding by installing libraries, integrating third-party services and scheduling periodic tasks. Neptyne also provides interactivity through input widgets such as buttons, dropdowns, and checkboxes. By using them in combination with Python code, you can not only manage sheets, but also easily develop accessible applications for your needs.</span></p><h2><span style="background-color:transparent;color:rgb(0,0,0);">PURPOSE AND NEED</span></h2><p><span style="background-color:transparent;color:rgb(0,0,0);">The Neptyne team saw potential in empowering spreadsheets with a programming language and AI-powered coding assistant. Regular spreadsheet users can do their work as usual and reduce their efforts by using artificial intelligence to import data or create visualizations.</span></p><p><span style="background-color:transparent;color:rgb(0,0,0);">The ability to write code in Neptyne allows you to automate your workflow even more, turning an ordinary spreadsheet into real-time stock market analytics, sports predictions, or even a tic-tac-toe game board! AI is also good at generating such code.</span></p><p><span style="background-color:transparent;color:rgb(0,0,0);">Neptyne is well suited for any business that relies on spreadsheets but feels the need to automate work and reduce effort. This also works for scientific work, as researchers tend to use Excel and Python/R a lot and are not always happy because they are different tools.</span></p>

<h2><span style="background-color:transparent;color:rgb(0,0,0);">WORKFLOW</span></h2><p><span style="background-color:transparent;color:rgb(0,0,0);">Usually Gearheart offers a full team to work on a product, but Neptyne is a different case. In the course of this project, Gearheart has integrated its employees into a team managed by the owner. Task management was done on the side of the business owner, and the Gearheart project manager helped formalize the tasks.</span></p><p><span style="background-color:transparent;color:rgb(0,0,0);">The business owner had a clear idea of what problems he wanted to solve with a particular feature, but the actual implementation of the features was a collaborative process. The Gearheart team is confident that this not only helped deliver high-quality features on time and on budget, but also resulted in functionality that meets the highest industry UX standards.</span></p><h2><span style="background-color:transparent;color:rgb(0,0,0);">TECHNOLOGY</span></h2><p><span style="background-color:transparent;color:rgb(0,0,0);">Neptyne uses Python and heavily modified Jupyter Notebook on server-size and React.js on the client-side. Client-server communication is carried out in real time and implemented using websockets.</span></p><p><span style="background-color:transparent;color:rgb(0,0,0);">Another feature is virtualized user environments: users are able to utilize fully functional Python environments with third-party Python libraries, even with C++ dependencies. And while they can do whatever they want, they can’t “break” the main Python container that runs the app itself.</span></p><p><span style="background-color:transparent;color:rgb(0,0,0);">One of our challenges was to improve client-side performance and make sure it doesn’t get negated by successive regressions. To achieve this, we designed a tiny in-house library to measure a number of re-renders of React components. If new props we add are unstable, the tests will fail and the developer will have to deal with it before it affects the end user.</span></p>

<h2><span style="background-color:transparent;color:rgb(0,0,0);">STRUCTURE AND FEATURES</span></h2><h3><span style="background-color:transparent;color:rgb(0,0,0);">Simple migration flow</span></h3><p><span style="background-color:transparent;color:rgb(0,0,0);">A sheet editor interface with familiar features and shortcuts. User can switch from any sheet editor they currently use.</span></p><h3><span style="background-color:transparent;color:rgb(0,0,0);">Python support</span></h3><p><span style="background-color:transparent;color:rgb(0,0,0);">The sheet content can be generated using Python expressions, including API calls and data preprocessing.</span></p>

<h3><span style="background-color:transparent;color:rgb(0,0,0);">Input widgets</span></h3><p><span style="background-color:transparent;color:rgb(0,0,0);">Buttons, scrollers and checkboxes that can run any Python code on interaction.</span></p><h3><span style="background-color:transparent;color:rgb(0,0,0);">Output widgets</span></h3><p><span style="background-color:transparent;color:rgb(0,0,0);">Charts, images and maps filled with user data.</span></p>

<h3><span style="background-color:transparent;color:rgb(0,0,0);">AI assistant</span></h3><p><span style="background-color:transparent;color:rgb(0,0,0);">AI assistant for generating Python code, widgets or filling sheets with new data generated/fetched by the AI. All of this can be done using natural language, without any Python knowledge.</span></p><h3><span style="background-color:transparent;color:rgb(0,0,0);">Templates</span></h3><p><span style="background-color:transparent;color:rgb(0,0,0);">A vast selection of “plug and play” templates for different business needs and requirements - accounting, trading or sports events prediction.</span></p>

<h3><span style="background-color:transparent;color:rgb(0,0,0);">Real-time collaborative editing</span></h3><p><span style="background-color:transparent;color:rgb(0,0,0);">All the changes are applied in real-time.</span></p><h3><span style="background-color:transparent;color:rgb(0,0,0);">Embedded code editor</span></h3><p><span style="background-color:transparent;color:rgb(0,0,0);">Using our in-app code editor, the user is able to write Python code making use of syntax highlighting, context-aware autocomplete and autoformatting. The user is able to write both persistent code in a file and one-time commands using REPL.</span></p>

<h2><span style="background-color:transparent;color:rgb(0,0,0);">RESULTS</span></h2><p><span style="background-color:transparent;color:rgb(0,0,0);">During our cooperation, we comprehensively refactored the client side, boosting its performance and fault tolerance. We also did a comprehensive product redesign, adding tools to introduce further changes (e.g. dark mode) more easily.</span><br><span style="background-color:transparent;color:rgb(0,0,0);">While being presented on </span><a target="_blank" rel="noopener noreferrer" href="https://us.pycon.org/2023/expo/presenting-startup-row/"><span style="background-color:transparent;color:rgb(17,85,204);"><u>PyCon</u></span></a><span style="background-color:transparent;color:rgb(0,0,0);">, Neptune is still a start-up in its pre-seed funding stage. However, it is fully accessible for free, with a soon-to-be-announced Pro tier with more features and resources. It is a flexible tool that could be used in many domains and we hope it will have a bright future!</span></p>

Neptyne is a startup product that provides users with cloud-based programmable spreadsheets with a programming language and AI-powered coding assistant.

Let's meet Mike Perelygin, developer at Gearheart team

Neptyne

image (9).png

Jupyter

Development of Cloud Programmable Spreadsheets | Gearheart

<h2><span style="background-color:transparent;color:rgb(0,0,0);">OVERVIEW</span></h2><p><span style="background-color:transparent;color:rgb(0,0,0);">We were approached by Inkitt to create a reader magnet for their Galatea e-book app. Reader magnets are calls to action at the end of a book that encourage readers to subscribe to an author's newsletter in exchange for exclusive content, usually an additional chapter of the book the reader has just read, or the first few chapters of the next book in the series.</span></p><h2><span style="background-color:transparent;color:rgb(0,0,0);">MAIN PURPOSE AND NEED</span></h2><p><span style="background-color:transparent;color:rgb(0,0,0);">The main goal of the Galatea reader magnet is to create landing pages for author's books that will interest the user and serve as a call to subscribe to the author's newsletter in exchange for exclusive content.</span></p><h2><span style="background-color:transparent;color:rgb(0,0,0);">WORKFLOW</span></h2><p><span style="background-color:transparent;color:rgb(0,0,0);">Our clients had tight deadlines and we had to complete the project in one month. We wanted to create something really cool and catchy, so we invited our partners from the Dudka Agency to create the design. Since installing the test server, we have shown our progress to clients daily. The client's representative regularly gave us feedback, so our team moved very quickly towards the goal. We completed the project on time and were satisfied with the cooperation with our partners, clients and the created project.</span></p><h2><span style="background-color:transparent;color:rgb(0,0,0);">TECHNOLOGY</span></h2><p><span style="background-color:transparent;color:rgb(0,0,0);">The development of Galatea consisted of creating UI components using React, TypeScript and Tailwind CSS. Keystone.js and GraphQL were used for the backend and admin page, while Next.js. — as an interface. Auth0 was used for authorization, and we implemented the storage of subscribed users using MailChimp. SendGrid was used to send emails.</span></p><h2><span style="background-color:transparent;color:rgb(0,0,0);">STRUCTURE AND FEATURES</span></h2><h3><span style="background-color:transparent;color:rgb(67,67,67);">SIGN IN/SIGN UP FORM</span><br><br>&nbsp;</h3>

<p><span style="background-color:transparent;color:rgb(0,0,0);">To save time and money, we decided to use the simple and user-friendly Auth0 tool.</span></p><h3><span style="background-color:transparent;color:rgb(67,67,67);">DASHBOARD</span></h3>

<p><span style="background-color:transparent;color:rgb(0,0,0);">The main purpose of the dashboard is to view and manage user-created landing pages. Here, authors can view and download their landing page statistics (number of page visits and subscribers), create a new landing page or edit an existing one, and set up MailChimp. Once MailChimp is configured, all readers who subscribe to updates from an author's landing page will appear in the author's MailChimp list.</span></p><h3><span style="background-color:transparent;color:rgb(67,67,67);">LANDING PAGE (EDIT MODE)</span></h3>

<p><span style="background-color:transparent;color:rgb(0,0,0);">On this page, authors can set up a landing page for one of their books. This page is a preview of the landing page with live editable elements. To give users more control beyond text editing, we've allowed them to control the theme color on the page by selecting it from the palette. In addition, there is an option to generate a color based on the book cover preview, which makes the pages more specific to the book they are supposed to promote. In addition to information about the book, authors can add their biography and photo, and even control the modal windows that are shown to their subscribers.</span></p><h3><span style="background-color:transparent;color:rgb(67,67,67);">LANDING PAGE (VIEW MODE)</span></h3>

<p><span style="background-color:transparent;color:rgb(0,0,0);">The landing page shown to the end user provides them with information about the book specified by the author and invites them to subscribe to receive a gift from the author, such as the first chapter of the book or special information about the book characters. Once subscribed, readers will appear on the author's mailing list so that authors can provide them with an email bonus.&nbsp; This page is responsive on desktops and mobile devices.</span></p>

<p><span style="background-color:transparent;color:rgb(0,0,0);">We have developed a simple and convenient KeystoneJS admin panel. It allows administrators to easily manage users, books, landing pages, and subscribers, as well as view up-to-date statistics.</span></p><h2><span style="background-color:transparent;color:rgb(0,0,0);">RESULTS</span></h2><p><span style="background-color:transparent;color:rgb(0,0,0);">More than 100 authors have already started using the readers magnet, and this number is increasing every day. We just created an MVP, so we expect new features in the future.</span></p><p><br><br>&nbsp;</p>

The main goal of the Galatea e-book app is to create landing pages for author's books that will interest the user and serve as a call to subscribe to the author's newsletter in exchange for exclusive content.

Galatea

main2.png

Keystone.js

Building Reader Magnet Tool  | Gearheart

<h2><span style="background-color:transparent;color:#000000;">OVERVIEW</span></h2><p><span style="background-color:transparent;color:#000000;">Ocilex is a platform for monitoring the construction process. It allows construction companies to control access to application features for both internal managers and external users. Managers can configure cameras and timelapse generation schedules. Users have a wide list of ways to track the building process.</span></p><h2><span style="background-color:transparent;color:#000000;">PURPOSE AND NEED</span></h2><p><span style="background-color:transparent;color:#000000;">To meet customer needs, the app needed to provide users with timelapses of construction from multiple viewpoints as well as the ability to compare snapshots taken on different dates using side-by-side comparison, magnifier, and a comparison between the snapshot and 3D model (BIM comparison).</span></p><h2><span style="background-color:transparent;color:#000000;">WORKFLOW</span></h2><p><span style="background-color:transparent;color:#000000;">Since the main purpose of the application is to show several pages with the construction visualization, we decided to focus on this and make the UI clear and simple. Material UI components were used for this. Connecting to the cameras was a challenge, but once that was solved, adding new features became much easier. Clients were involved in the process and regularly provided us with feedback and new requirements. In addition, they covered test cameras connection, which was very helpful for us.</span></p><h2><span style="background-color:transparent;color:#000000;">TECHNOLOGY</span></h2><p><span style="background-color:transparent;color:#000000;">To accomplish all this, we used React.js with the MaterialUI framework. And for the backend, we selected the Apollo server and Node.js + TypeScript combination.</span></p><p><span style="background-color:transparent;color:#000000;">The entire application is deployed to the DigitalOcean App Platform and complimented by static checking and quality control in the GitLab CI.</span></p><h2><span style="background-color:transparent;color:#000000;">STRUCTURE AND FEATURES</span></h2><h3><span style="background-color:transparent;color:#000000;">Live View</span></h3><p><span style="background-color:transparent;color:#000000;">Ocilex allows users to see the latest snapshot of the building on a Live View page. It is updated regularly (every 1, 5, or 10 minutes) depending on the admin's settings. Also, there is a magnifier included, that makes the smallest details visible.</span></p>

<h3><span style="background-color:transparent;color:#000000;">Snapshot Editor</span></h3><p><span style="background-color:transparent;color:#000000;">If users want to highlight something they notice on a snapshot, they can draw, add notes, and upload the result.</span></p>

<h3><span style="background-color:transparent;color:#000000;">Timelapse</span></h3><p><span style="background-color:transparent;color:#000000;">For those who want to see something come from nothing, we provide a timelapse video feature that allows you to see new buildings grow from the very beginning to the opening. For each site, administrators set the camera, working days, and schedule for adding snapshots to videos.</span></p>

<p>READ ALSO: <a target="_blank" rel="noopener noreferrer" href="https://gearheart.io/articles/how-to-create-a-timelapse-video-from-frames/">HOW TO CREATE A TIMELAPSE VIDEO FROM FRAMES</a></p><h3><span style="background-color:transparent;color:#000000;">Snapshots Comparison</span></h3><p><span style="background-color:transparent;color:#000000;">And for those who would like to see progress over an exact period of time, Ocilex allows to compare snapshots taken on different dates, either through side-by-side comparison or using a magnifier detailed view from one snapshot over the another.</span></p>

<h3><span style="background-color:transparent;color:#000000;">BIM Comparison</span></h3><p><span style="background-color:transparent;color:#000000;">For users who want to see the difference between the initial design and the final building, there is also a BIM Comparison feature that allows you to compare timelapse or camera images and a </span><a target="_blank" rel="noopener noreferrer" href="https://gearheart.io/articles/forge-viewer-our-experience-with-an-unusual-project/"><span style="background-color:transparent;color:#000000;"><u>3D model of the building</u></span></a><span style="background-color:transparent;color:#000000;">.</span></p><h3><span style="background-color:transparent;color:#000000;">Camera Health Notifications</span></h3><p><span style="background-color:transparent;color:#000000;">Ocilex provides administrators with helpful notifications when cameras stop responding, including full details about the issue.</span></p><h2><span style="background-color:transparent;color:#000000;">RESULTS</span></h2><p><span style="background-color:transparent;color:#000000;">The MVP was successfully launched in 2022. We've added several more features and improvements in 2023 to enhance the admin and customer experience.</span><br>&nbsp;</p>

Ocilex is a platform for monitoring the construction process. It allows construction companies to control access to app features for internal managers and external users

Alexey Demianenko, developer at Gearheart

Let's meet Anton Kozachok, developer at Gearheart team

Ocilex

ocilex_2.png

MaterialUI

Apollo

Platform for monitoring the construction process | Gearheart

<h2><span style="background-color:transparent;color:#000000;">Overview</span></h2><p><span style="background-color:transparent;color:#000000;">The indoor navigation application allows visitors to find their desired location in the mall or outside it in several ways. You can select one of the categories, search by name, or select directly on the indoor maps.</span></p><h2><span style="background-color:transparent;color:#000000;">Purpose and Need</span></h2><p><span style="background-color:transparent;color:#000000;">The main purpose of this indoor navigation app is to operate 40 terminals placed inside Battersea Power Station. So it’s super easy to find the route from the user's current terminal location to the selected store, restaurant, or any other destination.</span></p><h2><span style="background-color:transparent;color:#000000;">Workflow</span></h2><p><span style="background-color:transparent;color:#000000;">The indoor map itself was designed by design agency Popcomms. So we worked closely together: the guys were responsible for the cool design, and we took over the development. Our interaction took place on a regular basis, and the partnership turned out to be productive and enjoyable.</span></p><h2><span style="background-color:transparent;color:#000000;">Technology</span></h2><p><span style="background-color:transparent;color:#000000;">However, it was not quite a typical project for us as a web development company, we managed to build it with a regular stack: Vue App with Tailwind css framework build no Vite as UI. Backend is just slightly tuned KeystoneJS as Admin interface and GraphQLapi provider.</span></p><p><span style="background-color:transparent;color:#000000;">Perhaps, most interesting part was implemented on a CI/CD level, as we setup deployment on a Digital Ocean App Platform with automated releases and dependencies updates.</span></p><h2><span style="background-color:transparent;color:#000000;">Structure and Features</span></h2><h3><span style="background-color:transparent;color:#000000;">Route Finding</span></h3><p><span style="background-color:transparent;color:#000000;">Obviously, the main feature of the entire mall navigation app is route finding. We used a graph based algorithm to automate this process as we have 5 levels inside the building and some exterior locations to consider with over 40 terminals.</span></p>

<h3><span style="background-color:transparent;color:#434343;">Multi-floor support</span></h3><p><span style="background-color:transparent;color:#000000;">When the destination is on a floor other than the current terminal, there are several options for finding a route: manual selection using the level switcher or the navigating panel.</span></p><p><span style="background-color:transparent;color:#000000;">If there is no direct transition to the destination floor, for example, the elevator only goes to the penultimate floor, the algorithm can handle this and find a route through the intermediate floor.</span></p><p><span style="background-color:transparent;color:#000000;">There are also navigation pop-ups that can help the user switch parts of the route between floors forward and backward to ensure that the entire route is consistent and visually accessible.</span></p><p><span style="background-color:transparent;color:#000000;">Finally, we’ve add accessible routes support, to avoid stairs, escalators and steps.</span></p>

<h3><span style="background-color:transparent;color:#434343;">Navigation Panel</span></h3><p><span style="background-color:transparent;color:#000000;">Using the navigation panel, visitors can find places by categories and levels. Both groups have a short description of the selected places and internal navigation if the number of places within the category is more than can be placed on one screen. Route finding function is also available from here.</span></p>

<h3><span style="background-color:transparent;color:#434343;">Screen Keyboard</span></h3><p><span style="background-color:transparent;color:#000000;">Another way to search for places is the on-screen keyboard. It has some useful features like autocomplete and name suggestions so when the user starts typing there are only available characters left to continue. Location description and routing work here too.</span></p>

<h2><span style="background-color:transparent;color:#000000;">Results</span></h2><p><span style="background-color:transparent;color:#000000;">We have successfully deployed the entire indoor map app on the client Digital Ocean instance and provided the ability to set the current terminal location with a simple URL query on application start.&nbsp;</span></p><p><span style="background-color:rgb(255,255,255);color:rgb(29,28,29);">It is especially interesting that our real users will be visitors to this </span><a target="_blank" rel="noopener noreferrer" href="https://en.wikipedia.org/wiki/Battersea_Power_Station">famous giant building on the banks of the Thames</a><span style="background-color:rgb(255,255,255);color:rgb(29,28,29);">. At its peak, the legendary Battersea Power Station provided a fifth of London's electricity. After decades of neglect, it is now being redeveloped into one of London's most exciting and innovative destinations. This is really one of the most famous places in the country, about which you will find many interesting facts and even see it on the cover of one of the Pink Floyd albums.</span></p>

Danil Liashchenko, developer at Gearheart

Battersea Power Station

22.png

Vue.js

Vite

Developing Navigation App for Shopping Centre | Gearheart

GraphQL

<h2>Overview</h2><p><span style="background-color:transparent;color:#000000;">The founders of </span><a target="_blank" rel="noopener noreferrer" href="https://shootq.com/"><span style="background-color:transparent;color:#1155cc;"><u>ShootQ</u></span></a><span style="background-color:transparent;color:#000000;"> set a goal to meet the needs of photographers and develop their own web product that would offer broader and more relevant functionality than most standard CRM systems. The app was designed to solve real-world problems, allowing you to track customers, schedule photo sessions, track tasks, advertise studio services, and create email marketing templates.</span></p>

<h2><span style="background-color:transparent;color:#000000;">PURPOSE AND NEED</span></h2><p><span style="background-color:transparent;color:#000000;">The ShootQ </span><span style="background-color:rgb(255,255,255);color:rgb(31,31,31);">photography management software</span><span style="background-color:transparent;color:#000000;"> had been on the market for ten years, and even though it operated well, the technology and the design were out of date. That’s why the owners have decided to develop the second generation of the application relevant to present-day business tasks.</span></p><p><span style="background-color:transparent;color:#000000;">When the </span><a target="_blank" rel="noopener noreferrer" href="https://gearheart.io/team/"><span style="background-color:transparent;color:#1155cc;"><u>Gearheart team</u></span></a><span style="background-color:transparent;color:#000000;"> received a request to upgrade the application, the design and the back end were already under implementation. Our major task was to develop the front end, including the application’s interface, but, over time, we took over the entire project.</span></p><h2><span style="background-color:transparent;color:#000000;">WORKFLOW</span></h2><p><span style="background-color:transparent;color:#000000;">Initially, we received a completed back end and design of the project and took charge of the front end. Gradually, we moved on to the back-end frontier, where our target was to take an innovative approach and apply modern design.</span></p><p><span style="background-color:transparent;color:#000000;">Nine people in total were involved in the project, developing the entire set of functions to release the app as quickly as possible. At first, three developers from the ShootQ team were responsible for the back end, while Gearheart, represented by five full-stack experts and an analytic, worked on the front end. Over time, we started to manage the whole project.</span></p><p><span style="background-color:transparent;color:#000000;">After the app’s release, all ShootQ users were moved from the outdated version of the app to a new one, which offers many useful features, which we explain in more detail below.</span></p><h2><span style="background-color:transparent;color:#000000;">TECHNOLOGY</span></h2><p><span style="background-color:transparent;color:#000000;">The ShootQ app was originally developed on Angular 2 with the back end based on Django. Eventually, we updated it to a new version of Angular 7. In addition to the Angular framework, we also used the </span><a target="_blank" rel="noopener noreferrer" href="https://github.com/ngrx"><span style="background-color:transparent;color:#0000ff;"><u>NGRX</u></span></a><span style="background-color:transparent;color:#000000;"> extension.</span></p><p><span style="background-color:transparent;color:#000000;">Gearheart is one of the first companies to ever use Angular 2 for web product design. Two years earlier, when Angular 2 was under development, we used it to rewrite a </span><a target="_blank" rel="noopener noreferrer" href="https://gearheart.io/projects/timer/"><span style="background-color:transparent;color:#1155cc;"><u>Timer</u></span></a><span style="background-color:transparent;color:#000000;">. By the time Angular 2 was officially released, the above-mentioned project had already been in production. Thus, we could prove our experience at Angular 2 when we received an order from the ShootQ founders.</span></p><p><span style="background-color:transparent;color:#000000;">Main technology points to consider:</span></p><ul><li><span style="background-color:transparent;color:#000000;">The data of the CRM for photographers is kept at PostgreSQL, while the code is stored at </span><a target="_blank" rel="noopener noreferrer" href="https://bitbucket.org/"><span style="background-color:transparent;color:#1155cc;"><u>Bitbucket</u></span></a><span style="background-color:transparent;color:#000000;">.</span></li><li><span style="background-color:transparent;color:#000000;">Bitbucket Pipelines are used to run tests, measure the code coverage level, and update the test server.</span></li><li><span style="background-color:transparent;color:#000000;">The application server is hosted at </span><a target="_blank" rel="noopener noreferrer" href="https://aws.amazon.com/"><span style="background-color:transparent;color:#1155cc;"><u>AWS</u></span></a><span style="background-color:transparent;color:#000000;"> and run by Docker Swarm.</span></li></ul><h2><span style="background-color:transparent;color:#000000;">STRUCTURE AND FEATURES</span></h2><h3><span style="background-color:transparent;color:hsl(0,0%,0%);">ONLINE CONTRACTS</span></h3><h4><span style="background-color:transparent;color:#000000;">A fast and easy way to send and receive contracts</span></h4><p><span style="background-color:transparent;color:#000000;">It boils down to three steps:</span></p><ol><li><span style="background-color:transparent;color:#000000;">Apply changes.</span></li><li><span style="background-color:transparent;color:#000000;">Double-check.</span></li><li><span style="background-color:transparent;color:#000000;">Send the contract out to the client.</span></li></ol>

<h3><span style="background-color:transparent;color:#434343;">ONLINE BOOKING</span></h3><h4><span style="background-color:transparent;color:#000000;">Automized online booking</span></h4><p><span style="background-color:transparent;color:#000000;">As soon as a client books a photo session online at any chosen time, the photographer receives and processes the request with no extra time wasted on phone calls.</span></p>

<h3><span style="background-color:transparent;color:#434343;">LEADS TRACKING</span></h3><h4><span style="background-color:transparent;color:#000000;">Comfortable lead tracking via the Lead Board</span></h4><p><span style="background-color:transparent;color:#000000;">The Lead Board function allows for managing and tracking leads at each stage of the customer journey to react and reply just in time.</span></p>

<h3><span style="background-color:transparent;color:#434343;">WORKFLOWS</span></h3><h4><span style="background-color:transparent;color:#000000;">Helpful tools to stay organized</span></h4><p><span style="background-color:transparent;color:#000000;">These are relevant for studios that have a lot of clients and experience difficulties in staying organized. Setting a specific number of tasks to be completed for each client and applying filters makes it easier to stay on track and provide high-quality service.</span></p>

<h3><span style="background-color:transparent;color:#434343;">EMBEDDED PAYMENT</span></h3><p><span style="background-color:transparent;color:#000000;">Simplified payments</span></p><p><span style="background-color:transparent;color:#000000;">Over 50% of users prefer to have several payment options to choose from when proceeding to checkout. This function lets the clients choose the most comfortable payment method, including a credit card.</span></p>

<h3><span style="background-color:transparent;color:#434343;">WORKSHOP MODULE</span></h3><h4><span style="background-color:transparent;color:#000000;">Using the full studio potential</span></h4><p><span style="background-color:transparent;color:#000000;">This module helps photographers manage a new source of income and host workshops. The tool lets multiple clients sign up for a single event.&nbsp;</span></p><h3><span style="background-color:transparent;color:#434343;">TEMPLATES</span></h3><h4><span style="background-color:transparent;color:#000000;">Wise use of time and resources</span></h4><p><span style="background-color:transparent;color:#000000;">Ready-made templates can save more time to work with clients and work on improving business processes. Drop-down lists offer various templates for different purposes:</span></p><ul><li><span style="background-color:transparent;color:#000000;">an email;</span></li><li><span style="background-color:transparent;color:#000000;">a proposal;</span></li><li><span style="background-color:transparent;color:#000000;">a questionnaire;</span></li><li><span style="background-color:transparent;color:#000000;">an invoice;</span></li><li><span style="background-color:transparent;color:#000000;">a contract, and many more.</span></li></ul><p><span style="background-color:transparent;color:#000000;">The entire process takes only a few simple steps: choosing and adjusting a template, uploading it to the appropriate section at ShootQ, copying the required template from the list, and pasting it to the message window.</span></p>

<h2><span style="background-color:transparent;color:#000000;">RESULTS</span></h2><p><span style="background-color:transparent;color:#000000;">Following the release of the updated version of ShootQ, the Gearheart team continued to work on product updates and improvements until the end of 2019.</span></p><p><span style="background-color:transparent;color:#000000;">Based on the data from </span><a target="_blank" rel="noopener noreferrer" href="https://www.featuredcustomers.com/vendor/shootq"><span style="background-color:transparent;color:#1155cc;"><u>Featured Customers</u></span></a><span style="background-color:transparent;color:#000000;">, ShootQ is popular among web users. ShootQ client testimonials have a total content usefulness score of 4.7/5 given by 1040 users. Many popular photographers like Mike Larson, Sara France, Lukas &amp; Suzy Vandyke, and others prefer ShootQ to manage their daily tasks.</span></p>

ShootQ

ShootQ_poster.png

Building Photography Management CRM Software | Gearheart

<h3><span style="background-color:transparent;color:hsl(0,0%,0%);">TAILOR’S USE CASE</span></h3><p><span style="background-color:transparent;color:#000000;">There are two types of users: customers and tailors. The tailor's use case is the most common. Here is how it works:</span></p><ol><li><span style="background-color:transparent;color:#000000;">When a customer enters the shop, the tailor either creates a customer record in the system or selects an existing customer to shop for.</span></li></ol>

<p>2. <span style="background-color:transparent;color:#000000;">Together with the client, the tailor adds products to the cart and customizes each of them. Here is an example of jacket customization. H.M. Cole is all about fully custom clothing tailored to match any customer’s preference, so there are tons of available options. On this screenshot, we see only the options available to the customer. The tailor's UI allows for even more detailed customization.</span></p>

<p>3. <span style="background-color:transparent;color:#000000;">After filling in all the necessary fields, the tailor goes to the measurements section. There are three modes of measurements UI:</span></p><ul><li><span style="background-color:transparent;color:#000000;">Fully custom measurements – the tailor takes the measurements required for selected products. In order to adjust the suit's fit (slim, comfort, etc.), the tailor can adjust allowances.</span></li><li><span style="background-color:transparent;color:#000000;">Measurements based on standard size – the tailor selects one of the predefined product sizes and applies adjustments.</span></li><li><span style="background-color:transparent;color:#000000;">Measurements based on past orders – the tailor makes adjustments to past orders so the user can add the shirt "the same as last time, but with a little shorter sleeve."</span></li></ul>

<p><span style="background-color:transparent;color:#000000;">There are also some built-in rules, like which measurements are needed for which product, which measurements can have allowances, and others.</span></p>

<p>4. <span style="background-color:transparent;color:#000000;">When an order is ready and all the measurements are entered, payment is made, and the order is sent to the factory using the Odoo API. Order data is updated in Odoo as the order is moving through the production pipeline. Changes are synchronized back to the Django back end.</span></p>

<h3><span style="background-color:transparent;color:#434343;">LANDING PAGE</span></h3><p><span style="background-color:transparent;color:#000000;">We also built a front-end editor that allows an admin to tweak the look of the site.</span></p>

<h2><span style="background-color:transparent;color:#000000;">RESULTS</span></h2><ol><li><span style="background-color:transparent;color:#000000;">We redesigned an application.</span></li><li><span style="background-color:transparent;color:#000000;">We improved the customization wizard to make it easy to use.</span></li><li><span style="background-color:transparent;color:#000000;">During half a year of the project, we expanded the interface of measurements.</span></li><li><span style="background-color:transparent;color:#000000;">We moved from Angular 1.x to Angular 5.</span></li></ol><p><span style="background-color:transparent;color:#000000;">So, if you want to build a clothing website, </span><a target="_blank" rel="noopener noreferrer" href="https://gearheart.io/#footer"><span style="background-color:transparent;color:#000000;"><u>write to us in the form below</u></span></a><span style="background-color:transparent;color:#000000;">.</span></p>

H.M.Cole

HMCole_poster.png

Creating Custom Clothing Platform for e-Commerce | Gearheart

<p><span style="background-color:transparent;color:#000000;">A lab workflow template shows the stages that each experiment undergoes. Each stage consists of steps necessary to complete it, along with specified metrics. Additionally, the metrics may include parameters and thresholds that define whether the results are positive or negative. A lab can create any number of workflows for their research needs.</span></p><h3><span style="background-color:transparent;color:hsl(0,0%,0%);">EXPERIMENT EXECUTION</span></h3><p><span style="background-color:transparent;color:#000000;">Each workflow execution is called a “run.” A researcher chooses which workflow is used for the run, fills out the data about the materials used (including the batch number), variables, and the experiment’s results.</span></p><p><span style="background-color:transparent;color:#000000;">Once the research results are ready, they are visualized in the table format and analyzed by the administrator in charge, who can also set the final status to Passed or Failed.</span></p>

<h3><span style="background-color:transparent;color:hsl(0,0%,0%);">DATA ANALYSIS DASHBOARD</span></h3><p><span style="background-color:transparent;color:#000000;">The interface outputs a list or runs with the state of variables on each step, as well as status charts. The dashboard helps analyze the current run and compare it to the previous ones in a workflow.</span></p>

<h3><span style="background-color:transparent;color:hsl(0,0%,0%);">EXPERIMENT REVIEW</span></h3><p><span style="background-color:transparent;color:#000000;">The head of the department has special access that allows them to go over all the runs and steps and review the data. Once they review a piece of data and mark it as Checked, it will be displayed separately from the rest, marked as Approved.</span></p>

<h3><span style="background-color:transparent;color:hsl(0,0%,0%);">PEER REVIEW APP</span></h3><p><span style="background-color:transparent;color:#000000;">We also created a version of the software called Peer Review. The app allows users to input research results and compare them with other labs. It is also a subscription-based application, like QC Management.</span></p>

<h3><span style="background-color:transparent;color:hsl(0,0%,0%);">CHALLENGING FEATURES&nbsp;</span></h3><p><span style="background-color:transparent;color:#000000;">We managed to overcome all the challenges and replace the old MVP with a new awesome user interface — a complex multi-level structure with workflows, runs, and other functions.</span></p>

<p><span style="background-color:transparent;color:#000000;">Going into the project, it already had the back-end source code, so we had to adapt to it and cooperate with developers who worked outside our team.</span></p><p><span style="background-color:transparent;color:#000000;">Other than that, there were a few sophisticated features that posed quite a challenge, such as:</span></p><ul><li><span style="background-color:transparent;color:#000000;"><strong>Custom charts for research analysis.</strong> We chose D3 libraries to produce great custom charts manually instead of the ready-made ones. This allowed us to highlight the necessary data.</span></li></ul>

<ul><li><span style="background-color:transparent;color:#000000;"><strong>Authorization system.</strong> We created a three-step form in which every step requires validation. Otherwise, if the user were to close the form mid-process, it would create an unnecessary workload for the application.</span></li><li><span style="background-color:transparent;color:#000000;"><strong>Hierarchy of user authorization.</strong> There are three categories of users in this system, each having a different access level. The structure includes:</span><ul><li><span style="background-color:transparent;color:#000000;">A SeraCare admin (company-side) — can create a lab admin and give access to one or both products</span></li><li><span style="background-color:transparent;color:#000000;">A lab admin (client-side) — can create users</span></li><li><span style="background-color:transparent;color:#000000;">Users — heads of departments and lab assistants or technicians who carry out the research experiments</span></li></ul></li></ul><p><span style="background-color:transparent;color:#000000;">The lab itself might have an office hierarchy in which case the SeraCare admin can create several lab admins.</span></p>

<p><span style="background-color:transparent;color:#000000;">Aside from the functionality, we also added some perks to boost the user experience. For example, PDF reports are a handy feature that allows users to download the research results in a more convenient format. This one is much appreciated by the users, as well as the other application capabilities.</span></p><h2><span style="background-color:transparent;color:#000000;">RESULTS</span></h2><p><span style="background-color:transparent;color:#000000;">We successfully created a commercial subscription-based application the client was very much satisfied with. Afterward, SeraCare hired in-house developers to maintain and further develop the laboratory software.</span></p>

Scientific research app for medical laboratories

SeraCare

SeraCare_poster.png

Rx.js

D3.js

Building Scientific Research App CRM for Medical Lab | Gearheart

<h2><span style="background-color:transparent;color:#000000;">OVERVIEW</span></h2><p><span style="background-color:transparent;color:#000000;">Founders Hussein Ahmed, Skyler Johnson-Wagner, and Samah Gad built KustomNote as an add-on to Evernote, which allowed for creating structured notes. Later, it was transformed into a stand-alone application that aided customers in recording, storing, retrieving, and sharing custom-structured notes. KustomNote users were predominantly individuals, along with a few small businesses. In 2015, its founders determined that their business customers needed new additional features that pulled insights from unstructured data, files, and voice recordings. A decision to redesign the program led them to rebrand KustomNote as Transpose and target businesses as their primary market.</span></p>

<p><span style="background-color:transparent;color:#000000;">The Gearheart team joined the project back when it was called KustomNote. We started with the initial project version that we extended with tons of new features, conducted two complete application redesigns and rebranding, and eventually brought Transpose to its final state as a complex world-class data management system.</span></p><h2><span style="background-color:transparent;color:#000000;">PURPOSE AND NEED</span></h2><p><span style="background-color:transparent;color:#000000;">Small businesses acquire tremendous amounts of data that need to be organized and stored. In order to track customers, products, tasks, projects, and other entities, users have to utilize an entire ensemble of separate project management software tools or buy expensive enterprise systems and purchase consulting services to educate employees to use them. A better way would be to build their own project planning software that matches their workflows and data structure instead of adapting to existing solutions, but this requires technical expertise and generally takes much effort.</span></p>

<p>It's an entirely new project tracking software that enables users to design solutions matching their unique needs, and to leverage technologies, such as world-class text analytics, which were previously available only to large companies such as Amazon, Google, and Microsoft. Our vision is to provide the best task management software that doesn't require knowledge of database design or a huge set of complicated, expensive technologies, and yet delivers the same level of utility.</p>

<h2><span style="background-color:transparent;color:#000000;">WORKFLOW</span></h2><p><span style="background-color:transparent;color:#000000;">The Transpose project initially began for us as a small bug fix project on Upwork, but the founders liked how we work. Soon our cooperation developed into the gradual rewriting of the entire back end and essentially developing a new, more sophisticated project management software. The initial version was quick and dirty (which is fine for an MVP), but we converted it into a production-ready system that was scalable and reliable.</span></p><p><span style="background-color:transparent;color:#000000;">Business development, marketing, and customer support took place at the Transpose headquarters in Seattle, Washington. The Transpose founders regularly provided new feature ideas and designs, so we clarified requirements, prepared technical specifications, and implemented new features.</span></p><p><span style="background-color:transparent;color:#000000;">We suggested and adopted an agile workflow based on git-flow that included estimations, code review, and regression testing. This process prevented system crashes and ensured better communication and </span><span style="background-color:rgb(255,255,255);color:rgb(0,0,0);">work management software</span><span style="background-color:transparent;color:#000000;"> development with higher efficiency and superior organization.</span></p><h2><span style="background-color:transparent;color:#000000;">TECHNOLOGY</span></h2><p><span style="background-color:transparent;color:#000000;">The entire application was built as a single-page application based on Angular. The back end, based on Django, served only a REST API; everything the user saw was rendered in the browser.</span></p><p><span style="background-color:transparent;color:#000000;">The back end provided API both for web and mobile applications. Transpose had both iOS and Android applications, so we implemented our versioning system to support multiple API versions simultaneously.</span></p>

<p><span style="background-color:transparent;color:#000000;">The mobile apps had an offline mode. We implemented a sync API so the app could catch up after working in offline mode. We introduced a record versions check to ensure that conflicts were resolved correctly if an edited record was in the app and browser at the same time.</span></p><p><span style="background-color:transparent;color:#000000;">While developing the application on a single page we faced problems with Angular’s performance due to large amounts of data. We produced workarounds to ensure the application worked smoothly and incorporated automated performance tests into the release process to make sure we met standards on each release.</span></p><h2><span style="background-color:transparent;color:#000000;">STRUCTURE AND FEATURES</span></h2><p><span style="background-color:transparent;color:#000000;">Transpose allowed users to define a variety of data structures (templates) and then enter records to define each structure.</span></p>

<p>For example, a user may want to track their clients. Using the simple user interface, anyone could create a template called “Client,” then define a structure with a simple drag-n-drop UI that declares that every client would have a name, registration date, status, description, and an optional photo. With a defined structure, the user could add new clients to the system by filling in forms within that structure.</p>

<p><span style="background-color:transparent;color:#000000;">There was no limit to the number of object types, record numbers, or cases available for use. The application tracked tasks, employees, products, plans, and workouts. Typical fields used by small businesses may have included text, numbers, dates, Google contacts, attached files, voice records, time tracking, and signatures. Transpose has supported 30 different field types.</span></p><p><span style="background-color:transparent;color:#000000;">Transpose offered numerous features allowing users to manipulate data in a variety of ways: data visualizations and discovery, sharing records with teammates or outside users, smart search and filters, and embedding records on external sites. Many other features were available.</span></p><h3><span style="background-color:transparent;color:#434343;">SEARCH</span></h3><p><span style="background-color:transparent;color:#000000;">Solr, an Apache platform, performs searches. Custom plugins made the search accurate, and Apache’s Pika attached .pdf or .doc files. By entering an email, external services could find pertinent information regarding that person, and a third-party library recognized voice records and used them for searches.</span></p>

<h3><span style="background-color:transparent;color:#434343;">FILTER</span></h3><p><span style="background-color:transparent;color:#000000;">By specifying a structure, filtering was possible using any field. For example, finding clients who registered in a specific date range or had a status assigned was filterable. Each template offered different filter options.</span></p><h3><span style="background-color:transparent;color:#434343;">KANBAN VIEW</span></h3><p><span style="background-color:transparent;color:#000000;">We built a Kanban view where users could select a field, then view it as columns. This made it easy to follow any sales process, project progress, etc. Editing records was simple with the drag-and-drop on Kanban view.</span></p>

<h3><span style="background-color:transparent;color:#434343;">CALENDAR</span></h3><p><span style="background-color:transparent;color:#000000;">The calendar view was set up similar to the Kanban.</span></p>

<h3><span style="background-color:transparent;color:#434343;">TABLE VIEW</span></h3><p><span style="background-color:transparent;color:#000000;">Data viewed in a preformatted table.</span></p>

<h3><span style="background-color:transparent;color:#434343;">ANALYTICS VIEW</span></h3><p><span style="background-color:transparent;color:#000000;">For each template, the user could specify the report structure, a chart type, field to use, filter option, color, etc. We drew a dynamic analytics dashboard for each client based on their requested data.</span></p>

<h3><span style="background-color:transparent;color:#434343;">COLLABORATION</span></h3><p><span style="background-color:transparent;color:#000000;">Other people could share in the use of templates and records within the system. Administrators could specify a permission level for each invited user. Read-only, read+write, write-only, and administration options were available. A customer could establish a write-only access file if he required certain security for a questionnaire filled out by employees. Embedded public templates built into an external application allowed visitors access and the ability to fill in fields.</span></p>

<h3><span style="background-color:transparent;color:#434343;">PUBLIC RECORDS</span></h3><p><span style="background-color:transparent;color:#000000;">Customers had the ability to embed different records to external sites with a special HTML tag.</span></p><p><span style="background-color:transparent;color:#000000;">Also, public forms were accessible by external users, which is a great way to conduct questionnaires, tests, and interviews.</span></p>

<h3><span style="background-color:transparent;color:#434343;">EXPORTING</span></h3><p><span style="background-color:transparent;color:#000000;">PDF, Excel, and CVS files could be exported.</span></p><h3><span style="background-color:transparent;color:#434343;">IMPORTING</span></h3><p><span style="background-color:transparent;color:#000000;">This feature allowed the importing of data from other files. Users could upload an XLS file, and when we detected the structure, we generated a template and imported the records.</span></p><h3><span style="background-color:transparent;color:#434343;">INTEGRATIONS</span></h3><p><span style="background-color:transparent;color:#000000;">Zapier, Evernote, Google Maps, Google Calendar, and Google contacts were all available for integration into the system.</span></p>

<h3><span style="background-color:transparent;color:#434343;">LANDING PAGE</span></h3><p><span style="background-color:transparent;color:#000000;">The landing page, built with Django CMS, easily allowed for the creation of new pages and the ability to edit them on the front end. Django CMS allowed for the composition of pages with separate “blocks.” We implemented a set of custom blocks for Transpose, which allowed the administration to create pages with different structures.&nbsp;</span></p>

<p><span style="background-color:transparent;color:#000000;">For example, the main, features, and partners existing pages were all created in the Django CMS editor.</span></p><h3><span style="background-color:transparent;color:#434343;">PAYMENTS</span></h3><p><span style="background-color:transparent;color:#000000;">We used Recurly to manage all the payments, which were subscription-based and made with credit and debit cards.</span></p>

<p><span style="background-color:transparent;color:#000000;">While the company tested different business models, we implemented diverse payment mechanics:</span></p><ul><li><span style="background-color:transparent;color:#000000;">payments per user</span></li><li><span style="background-color:transparent;color:#000000;">payments per team</span></li><li><span style="background-color:transparent;color:#000000;">limited features during the trial</span></li><li><span style="background-color:transparent;color:#000000;">limited time during the trial</span></li><li><span style="background-color:transparent;color:#000000;">limited records amount during the trial</span></li><li><span style="background-color:transparent;color:#000000;">discount coupons</span></li></ul><h2><span style="background-color:transparent;color:#000000;">RESULTS</span></h2><p><span style="background-color:transparent;color:#000000;">We successfully completed implementation for all requests, changes, and additions to Transpose over the two-year period we worked with them.</span></p><p><br>&nbsp;</p>

Transpose

Frame 14 (1).png

Solr

Sass

Creating No-Code Project Management System (PMS) | Gearheart

<h2>OVERVIEW</h2><p>Olivia is an internal project management system developed for the US boutique broker dealer firm <a target="_blank" rel="noopener noreferrer" href="https://growthcapitalservices.com/">Growth Capital Services</a>. With Olivia, GCS provides brokers with a platform to perform financial operations in the expanding market of private securities where investors and entrepreneurs find each other to reach investment deals.</p><p>Broker-dealers needed highly secure financial automation software to partially automate the workflow with many confidential documents. The system should have customizable access for users with different rights to view and edit information. It was then that Olivia's idea came true.</p><p>When GCS first tried to transfer all paper information into electronic form, it helped to get rid of the piles of paper on the desktop, but the first version of Olivia, although it stored documents correctly, did not automate much of the workflow. When the company approached Gearheart, it took us some time to fix it, but we soon came to the conclusion that the concept of the system needed to be changed. We have identified the key activities performed by GCS employees and customers and developed a workflow algorithm. To ensure smooth financial automation, a state-of-the-art project management tool has been created. It supports task assignment and workflow editing and has a built-in drag-and-drop form editor, as well as a flexible notification system.<br>&nbsp;</p>

<h2>PURPOSE AND NEED</h2><p>The world of private securities can be discouragingly confusing. It can be difficult to track down the information one needs to evaluate the underlying security and the credibility of the various parties to the transaction.</p><p>Besides, in the US, making investment deals and brokering activities are overregulated by numerous state and financial control agencies. Participants must fill out a huge variety of different documents in a strictly defined manner with many details, which are not to be neglected.</p><p>Growth Capital Services had the general understanding that they needed a financial process automation platform to bring together multiple parties of the deal to a successful transaction. Gearheart’s task was to fill this framework concept with the specific subject matter and create a secure, user-friendly system that could organize and handle a large amount of data.</p><h2>SOLUTION</h2><p>To implement the initial concept, we proposed to develop an internal finance process automation tool to optimize the workflow by partially automating the process. Due to the peculiarities of the business area, we decided to build it around filling out forms and assigning tasks. In addition, due to security requirements, we blueprinted role-based user access to shared transactions and documents.</p><p>To match the concept, a simple user-friendly design was offered that included drag-and-drop workflow editing and form construction.<br>&nbsp;</p>

<h2>TECHNOLOGY</h2><p>Under Olivia’s hood are Django, Django Rest Framework, MySQL, Solr, React, Typescript, and Webpack. As a result, by utilizing these technological solutions, we created a stable, secure, and fast financial close software that can process huge volumes of data and provide concurrent role-based access to multiple users.</p><h2>STRUCTURE AND FEATURES</h2><p>The workflow is built around processing e-declarations between clients and broker managers. Generally, a workflow algorithm looks like the one below:<br>• A representative (or in some cases, a client himself) fills in a form;<br>• A supervisor checks the form and either signs it or turns it back with comments and recommendations on what to correct;<br>• A representative prepares a new set of documents for the next client.</p><p>To seal a deal, a user must fill out on average seven forms (in total, there are roughly 100 different forms in the system). Each form is carefully checked; if it requires corrections, a user is prompted to fix it. Inside the system, we offered a color-based scheme that makes it much easier for users and managers to work with forms. Green means that the form is filled in correctly; blue indicates that it should be revised; red explicitly shows that there are major issues with the document. Also, the information from filled forms is used to create a database of buyers, sellers, and transactions.<br>&nbsp;</p>

<p>Olivia’s structure lets users easily systemize all information on any deal in designated folders with a memo for each deal.</p><p>The data is presented in a table view; you can adjust the setting of displayed columns and change their placement and size. We created the special module with numerous flexible settings that allow us to filter out the data by relevance, status, date, author, and many other simple and complex rules. Table data can be exported to .xls(x) or .pdf files. You can also attach a necessary file when filling out forms and create deal engagement letters.<br>&nbsp;</p>

<p>As a topping, office files can be signed right inside Olivia thanks to its integration with e-signature service HelloSign. This software provides legally binding digital signatures for applications, forms, contracts, invoices and more. The company’s data stays bank-level secure with SSL encryption and world-class server infrastructure. Herein, such signatures are valid all over the globe, including the US, the EU, and the UK.</p><p>Apparently, with a huge volume of data in the system, one would need a comprehensive internal search to get around quickly. Olivia’s search engine makes it possible to look for any type of information in the system using multiple criteria to provide precise and detailed search results.</p>

<h3>ROLE-BASED ACCESS</h3><p>Due to broker business peculiarities and security reasons, in Olivia, we implemented role-based access. This means that, upon login, admins, supervisors, and representatives are granted a different set of rights to perform specific actions and utilize particular functions. If needed, you can split or merge roles to limit or expand access rights.</p><p>Role-based access is crucial for collaboration and concurrent work. With it, you can bring together several users in one team to handle the same deal. Herein, all “teammates” can access the deal they are working on but don’t see each other’s data on other deals.<br>Another useful feature of role-based access is that it allows brokers’ assistants to work with the system. Sometimes, bosses (brokers) are often busy with more important stuff than filling out forms. With a step-by-step built-in guide, their assistants can do the routine while their bosses are dealing with strategic issues.</p><h3>ADVANCED SECURITY</h3><p>When it comes to financial transactions, everyone understands that the issue of security is very important. Therefore, during development, we implemented a number of features aimed at secure data storage.</p><h4>EMAIL 2FA</h4><p>To protect our users, we implemented two-factor authentication via email. Olivia’s users undergo a mandatory HOTP token verification once a week. At the same time, the system carefully monitors from which device or even browser users log in, and each time they change, it asks for identity confirmation. Therefore, even if a fraudster steals a user's password, they will not be able to gain access to the project.</p><h4>ACTIVITY DETECTION</h4><p>The project implements monitoring of user activity. If a user is inactive for more than five hours, they will be automatically logged out. This helps protect against information theft if the user leaves the computer turned on and goes on vacation, for example.&nbsp;</p><h4>ENCRYPTED DATABASE</h4><p>Olivia's database is encrypted and placed on a separate server for security purposes.</p><h4>CONTENT SECURITY POLICY</h4><p>Olivia has several third-party client-side libraries embedded (e-signature service HelloSign, for example), and we use CSP mechanisms to protect against cross-site attacks.</p><h4>CLOUDFLARE FIREWALL</h4><p>For stable operation and guaranteed security on a public network, the application server is protected by a Cloudflare proxy firewall.</p><h3>FORM BUILDER</h3><p>Form structure changes periodically according to the control agencies’ requirements. To keep the process fast and smooth, we developed a drag-and-drop form editor. Thus, the admin can easily create new forms with a different set of fields to match up-to-date requirements. Also, we organized the form library. It contains roughly 100 forms for every occasion — for example, for describing a gift from a client to a supervisor (this is one of the legal requirements for brokers in the US).</p><p>&nbsp;</p>

<p>The form builder contains over 30 fields that perform different types of tasks:<br>• Generic fields (text, numeric, date field, and many others)<br>• Financial fields for calculating commissions<br>• Markup fields</p><p>Also, for the convenience of users, we created the ability to flexibly configure email notifications when the state of a form entry changes.</p><p>But that's not all. Each form includes role-based access settings. Users can customize the list of groups that will have access to form entries.</p>

<h3>LARGE FILES UPLOAD</h3><p>Our clients sometimes upload very large documents and video introductions. Here we faced two issues:<br>1. Request size limitation is determined by the Cloudflare proxy firewall.<br>2. Unstable Internet connections are an issue for some users.</p><p>We developed a special system — chunked file upload — which, unnoticeably for the user, splits the file into chunks and sends it, chunk by chunk, to Olivia's server.</p><p>If, during the upload process, the user loses their Internet connection for a short time, the upload of the file will not be interrupted; instead, Olivia will simply send the lost file chunk again. Thus, our users can download large files, even with a poor Internet connection.<br>&nbsp;</p>

<h3>AUTOMATED TESTING</h3><p>It is very important for us that our product always works properly. For this reason, we paid a lot of attention to automated tests. Despite the fact that the project has grown very large over the years, the coverage of automated tests is 85%.</p><h2>RESULTS</h2><p>• We modeled a comprehensive proprietary project management system for a highly specific business area, which ensures that every transaction meets or exceeds the criteria of securities regulatory requirements.<br>• In Olivia, we managed to combine a workflow function with a template form builder feature to develop a largely automated interface for independent registered brokers and representatives.<br>• Thanks to role-based access, Olivia is straightforward to provide different rights for various users.<br>• With its adaptive design, the site is optimized for tablet devices to provide smooth access on the go.<br>• We've been supporting Olivia since 2012, and during that time we've done two redesigns and added dozens of new features.</p><p>The major verdict of Gearheart's Olivia experience is that, with the right concept and technical approach, finance automation software with rigorous procedures and effective guidance in structuring and executing transactions can become a great solution, not an obstacle.</p>

Olivia

Olivia_Poster.png

Financial Project Management System (PMS) for Brokers | Gearheart

<p>We love working with sophisticated technologies to overcome any tech constraints. If something seems impossible, we'll find a way to make it happen.</p>

WE CREATE CUSTOM MVPS AND MARKET-READY PRODUCTS FROM SCRATCH

SmartSuite

Work Management Platform

ShootQ

A Photography Management CRM Software

Transpose

Creating a Project Management Tool

Olivia

Financial Operations Automation Platform

Battersea Power Station

Shopping Centre Indoor Navigation App

Plair

AIR MICROBIAL MONITORING APP

Jiffsy

Mobile-first storefront with AI recommendations

Timer

Project management and time tracking system

LOOQME (LookSMI)

Online and offline media monitoring system

H.M.Cole

Creating custom clothing website

WELLCASTER

Health and Fitness platform

SeraCare

Scientific research app for medical laboratories

Neptyne

Cloud Programmable Spreadsheets

Galatea

Reader magnet tool

Ocilex

Construction monitoring platform

WE DELIVER TURNKEY PROJECTS