Latest
Most Viewed
Search
  Prabh Kang | 15 May, 2024

How to deploy Nuxt 3 App to AWS Amplify with Github

Go to Amplify Console, scroll down and click on GET STARTED 2. Under Host your web app, click on GET STARTED 3. Choose Github as source and click Continue 4. Select the repository containing Nuxt 3 app code and then choose the branch that needs to be deployed (in this case, main branch is selected) and click Next. 5. Under Build and test settings, add the frontend and backend deployment config version: 1backend: phases: preBuild: commands: - nvm use 18 && node --version - corepack enable && npx --yes nypm install build: commands: - echo "SOME_API_KEY=$SOME_API_KEY" >> .env - npm run buildfrontend: phases: preBuild: commands: - nvm use 18 && node --version - corepack enable && npx --yes nypm install build: commands: - echo "SOME_RUNTIME_CONFIG_OPTION=$SOME_RUNTIME_CONFIG_OPTION" >> .env - npm run build artifacts: baseDirectory: .amplify-hosting files: - '**/*' For adding environment variables like any API key, we need to add that to AWS Amplify’s environment variables and reference in the echo under build > commands. 6. For adding environment variables to AWS Amplify, click on Advanced Settings (Note: Ignore the build and test settings in the above screenshot, refer to Point 5 for required YAML) 7. Under Advanced Settings, add your environment variables one by one and then click Next 8. Finally, click on Save and Deploy Once the deployment is done, the URL will be visible for the deployed app In case of failure due to NODE_ENV=production, change it to development. While deployment, it is automatically changed to production.

  Ayush Wardhan | 12 May, 2024

Home Visits: The Key to Personalized Care and Improved Health

Imagine this: You've been feeling unwell for a few days and dread a crowded waiting room and long commute to the clinic. What if regular checkups, and even some specialist consultations, could happen from the comfort of your home? Nearly 70% of elderly Indians experience difficulty visiting a hospital. For many patients, home visits offer a lifeline, reducing stress and improving their quality of life. If made more available, home visits could revolutionize the way we experience healthcare. This is the future that home visits, combined with technology, could create. Increased accessibility to home care benefits a wide variety of people in various situations. Some among them are the elderly, like parents and grandparents. Imagine the relief if, instead of navigating long hospital commutes, quality healthcare came to them. Home care can also greatly help those recovering from previous hospitalization treatments. They've been shown to speed up healing and reduce remission rates. Even those with mild injuries and non-urgent conditions attending home care can benefit from house call doctors or the services of a home nurse, alongside benefitting other patients by lessening the strain on ERs. Home care even helps achieve greater savings, reducing costs associated with unnecessary hospital stays and frequent ER visits. Home Visits break the barrier of distance. Think of remote villages with limited clinics, or individuals unable to travel due to illness or disability. Home visits bridge that gap. They allow for personalized care as well, as understanding the patient's living environment helps providers offer truly tailored care, and gives them a holistic view of the patient's life. Proactive care is enabled by regular visits, they build a relationship, helping catch potential issues early before they become emergencies. Some insurances cover home visits as well under the term "Domiciliary Hospitalization." For example, health insurance plans like TATA AIG Medicare may cover their costs along with pre-hospitalization expenses and post-hospitalization expenses as well! However, it's important to always check the specifics of one's insurance policy as coverage options vary. The future of healthcare is one where patients are more empowered than ever. Home visits are a key part of this shift, prioritizing comfort and personalized care while improving overall health outcomes. Imagine how technology and healthcare apps could streamline the process, putting you in even greater control of your health journey. For app developers and startups in the healthcare space, home visits represent a major shift in care delivery. Understanding this trend can open up new and innovative solutions for improving patient experiences and healthcare access. Take the first step and learn more about home care options available in your area.    

  Ayush Wardhan | 15 Mar, 2024

The Future of Indian Healthcare: ABHA

As India advances into the digital age, there is a push towards a paper-less society. Think UPI, for example. The push to digital can also significantly enhance healthcare services, replacing the traditional practice of maintaining paper files and limited Electronic Health Records. This is where ABHA comes in. Powered by the Ayushman Bharat Digital Mission (ABDM), ABHA aims to revolutionize India's healthcare system. It empowers patients with secure, digital access to their health information, enhancing the way medical platforms and apps in India serve Indian citizens. What's ABHA and how does it work? Source: https://abdm.gov.in:8081/uploads/Vector_UHI_9518c6ca1c.svg The Ayushman Bharat Health Account (ABHA) is essentially a digital passport for a seamless healthcare experience. It comes with a unique 14-digit ABHA ID, which unlocks a secure, centralized repository of a user's health records. This means lab reports, prescriptions, past diagnoses, and more can all be linked and safely stored under this single identifier. With ABHA, the user maintains complete control. No one can access health data without express consent. The user decides what information to share, with which healthcare providers, and for how long. The ABHA system also provides the ability to track exactly how health data is being used, ensuring full transparency. This thus allows empowerment of Indian citizens navigating healthcare. Users can also easily create ABHAs for their children, keeping their health information organized and secure as well. It ultimately aims to protect sensitive medical data and place the power of managing it firmly in the user's hands. The Power of ABHA: Convenience, Privacy, and Empowerment Medical apps are able to utilize ABHA to transform the healthcare experience for patients, and allows for a seamless process of booking appointments, sharing records, and tracking health progress. If the patient doesn't have an ABHA ID, the app can provision ABHA health card registration quite easily; the user only needs to provide their Aadhar or driver's license, and their unique ABHA ID is generated in minutes. This eliminates the need for separate visits to government websites for ABHA registration. The app then requests permission to link the user's existing health records to their ABHA. This may include records from past doctor visits, hospitals, or diagnostic centers. Powered by the ABDM, the app can streamline appointment booking. The ABHA system enables instant OPD registration, eliminating the need to wait in long queues for a doctor consultation token. The system facilitates faster registrations and utilizes digital health records to enhance the patient's experience. When the patient visits an ABDM-participating doctor, they can grant the doctor temporary access to relevant sections of their ABHA records. This provides the doctor with a comprehensive medical history, leading to better diagnoses and more informed treatment plans. Any new prescriptions, test reports, or updates from the doctor are automatically added to the user's ABHA profile. This maintains a complete, up-to-date health record accessible via the app or anywhere the user's ABHA is accepted. Summing Up With that, ABHA offers a powerful combination of benefits: Convenience: Easily accessible records mean better care, seamless experiences across different providers, and the potential for fewer costly duplicate tests. Privacy: ABHA's robust security protocols and its emphasis on user consent as the bedrock principle set a high standard for the protection of health data. This focus on privacy aligns ABHA with similar patient-centric initiatives globally. Empowerment: ABHA shifts the paradigm, transforming patients into active participants in managing their health information. ABHA positions India as a leader in digital healthcare innovation. It's on par with systems like the NHS Number (UK) and My Health Record (Australia), demonstrating the nation's commitment to accessible, patient-centered care. ABHA's focus on privacy and user control distinguishes it within the global healthcare landscape. The Ayushman Bharat Digital Mission, with ABHA at its heart, signals India's ambitious strides toward a truly patient-centric digital health ecosystem. The transformative potential of ABHA extends far beyond individual users. It lays the groundwork for large-scale improvements in public health, research, and the overall efficiency of India's healthcare system.

  Ayush Wardhan | 29 Feb, 2024

Prevent Outages and Debug Faster with Robust Logging

Logging is an essential yet often underestimated practice in early-stage app development, particularly among startups and smaller teams. In the bid to push more features and "move fast and break things", many teams will run into the gnarly complexities down the road when things eventually do break; leading to costly debugging sessions, unexplained errors and compliance headaches down the road. Being one of the pillars of observability, logs provide essential insights into the application's behavior; they help recreate scenarios that led to errors and help intercept them before they can become full-blown outages. Even a simple (yet clean) implementation of logging can go a long way in preventive maintenance. This blog discusses an effective example of implementing logging using a Nuxt 3, which uses Nitro under the hood for its server, and MongoDB stack. Using plugins, middleware and mongoose, this stack allows for an automated and easy-to-integrate system of logging. This Nuxt module enables this. This is a general flowchart of how the logging and auditing system works. Whenever an authorized user makes a request to the server, it will trigger a chain of events in multiple services. For instance, updating a user profile might touch the authentication service, database, and notification system. It's important to log all the changes and events across the request's journey. And if an error occurs in any of the steps, or their performance needs to be monitored, it would be important to correlate all the logs together with the request made, and thus paint a picture of the request's complete lifecycle. This can be achieved simply by issuing a unique identifier to the request, a request_id, along with additional information like session_id, request_path and including it within each log. This simplifies things considerably; when a user reports an error, instead of sifting through a mountain of logs it's simply a matter of using the request ID to get all the relevant logs and thus zoom in on the exact journey of their request. Request IDs enable more than just that; being able to associate a bunch of logs to their respective request allows for making insights into how the user interacts with the app, along with allowing for aggregating logs of a specific request type and thus monitoring its performance, error rate, etc. Manually capturing and storing this data for every possible API can be cumbersome. Though in this implementation, this is automated using a mongoose plugin, which sets and updates fields on all models for essential metadata. The request_id and session_id of the response is recorded in fields like _last_request, _last_session and are stored on the changed documents themselves originally. Along with this, field such as _created_at, _created_by, _updated_at, _updated_by exist on the mongoose document. These promote consistency and enable granular audit trails. There are the fields _deleted_at and _deleted_by. Their purpose is to enable soft deletion; simply put, whenever a document needs to be "deleted", these respective fields are filled out. This allows for preserving historical data which may be useful in the future. Thus, whenever other fields are fetched, _deleted_at being undefined is also queried against to check for whether data is valid. Now that most of the required metadata has been recorded on the documents, these documents themselves are stored within the logs whenever there's a change or a new document is created. This essentially records the history of a document, allowing one to be able to review the entire timeline of changes the document may undergo since its creation, including data of which requests (and thus, which users) have made actions that resulted in these changes. And with that, changes to the data in the database is recorded. This however comprises only part of the logs the logger will store. Another type of data that the logger seeks to store are event logs, which record state changes of the MongoDB change stream itself. It's important to monitor the health and functioning of the database being used, and event logs offer crucial insights that allow for debugging potential stream interruptions and tracking operational events. These logs are typically brief and mostly capture the stream event and timestamp, they look something like this: The primary events are: Stream Lifecycle Events: These are events that mark significant stages in the existence of a system, software component, or data stream. For example: 'init': Indicates the initial opening of the change stream 'close', 'end': Signal the closing of the stream, with 'end' being a normal shutdown 'error': Points to potential issues in the stream's operation Operational Events: These are events that reflect the ongoing actions, interactions, or changes within a running system. For example:  'more': Indicates that the change stream has a batch of document changes ready for your application to retrieve and process 'response': Represents the server's response to various requests your application makes to manage the change stream 'resumeTokenChanged': Resuming the change stream after an interruption, ensuring that no data changes are missed. This helps accomplish several things. It allows for tracking stream state transitions, identify potential bottlenecks, and gain insights into overall database health. For instance, if the application stops receiving updates, event logs can reveal if the stream closed unexpectedly or encountered errors, with 'close', 'end', or 'error' events providing immediate clues to investigate. With that, an automated and effective logger is in place, ideal for small to medium-sized applications that startups and small teams develop. This blog provides a solid foundation and advanced logging concepts exist: for eg. log aggregation, centralized log analysis tools, or setting up alerts for critical events, which will be needed once the application scales. Meanwhile, recording change history and key events goes a long way towards proactive maintenance. This level of insight is the difference between hours of frustrated debugging and swift problem resolution, and it all starts with robust logging!

  Ayush Wardhan | 15 Feb, 2024

A Step-by-Step Guide To Flexbox Layouts

Modern-day websites, especially web-apps, have layouts as sophisticated as those of native iOS or Android apps. But web-apps face the additional challenge of needing to adapt to whichever screens they'd be viewed on; be it mobile, desktop or tablets. Achieving such responsive layouts beyond the basic linear flow of HTML and CSS can be challenging . This is where flexbox with media queries can help, and this guide is a breakdown for how to approach building such layouts with them. The case-study this tutorial will use as an example is Airbnb , and being a popular website it has a complex layout as well, where mobile and desktop views differ significantly. It may seem daunting to replicate at first, but Flexbox makes it achievable (Here is a quick refresher for how flexbox works), and thus the first step is to identify the individual flexbox containers, consisting of child elements: (Scroll-based animations influencing structure of page wont be accounted for as it is beyond the scope of this tutorial) Flexbox, media queries and other layout related CSS styling can be handled by a single utility CSS file, flexbox.css. These are some examples, utility classes of these will be used in the tutorial: And in the tutorial a simple a simple css class for outlining the containers will be used, otherwise writing direct CSS will be avoided as much as possible, except for padding and some margin between flexbox containers. Now, breaking down the page into individual flexbox containers, the first container to be tackled is the header, which consists of a row with its children spaced apart to each end, with some padding. The middle and right child items are flexbox row containers themselves, though without much spacing. Now that it's clear how the layout of the header is structured, the following is how it can be developed: Next is the search-panel. The parent has a single child in the middle, the child is also a flex container with the children having variable width. Here, flex-basis can be used to conveniently determine how much size each of them takes up, for which flexbox.css has utility classes present. Then for the middle container with options for house-types. It is a row with three items spaced at the ends, with the first one taking up the majority of space. Notably, it seems to have scroll functionality. So a flexbox.css class called scrollX will be used to enable it. Now there's the row of items with stay-examples. This is a row consisting of four items with some space, and likely multiple such rows will be there. So, it is appropriate to use flex-wrap. Noticeably the mobile view has different versions of these elements, along with some extra elements and some missing. Flexbox.css has some classes that change function based on which device (and thus, whichever media query applies) the user is viewing the app on, which helps in creating dynamic layouts that adapt to screens with ease. These classes are generally suffixed with "-xs" or "-sm" depending on which screen size they apply to. So, classes like "hide-xs" and "show-xs" will be used to hide and display elements accordingly, with some others changing flex-basis. With that, we've successfully recreated a responsive layout akin to Airbnb's. Here's the Codepen for you to review and experiment with. Check out this GIF demonstrating the layout's responsiveness in action:

Our clients speak for us

Let’s figure out the next move!
Contact Us