Category: Coding

Low Cost MVP App built for Startup on NUXT in 3 hours

Low Cost MVP App built for Startup on NUXT in 3 hours

In this 2nd wave of Covid 19 Pandemic in India many young generation entrepreneurs are coming to help society with their Ideas in many ways they can. In Bihar’s town Muzaffarpur everything is not same as metro cities of India, people were facing lots of issue with travel restrictions to fetch essential medicines and essentials.

A young graduate from Muzaffarpur reached out to me to build a simplest form of web app where he can take online medicine order in Muzaffarpur. The orders received via Whatsapp can be organised and delivered by there volunteers following proper Covid norms. As this was a noble cause and we had to make some kind of MVP overnight for App name decided as Dawa Gaadi we choose Nuxt.Js for making a quick landing page for DawaGaadi.com

Simple Nuxt App Landing Page for Dawa Gaadi

This time we choose to develop our first production web app development using NUXT. The current app is very basic with Server Side Rendering, bi lingual (Hindi & English).

As I have very long experience as full stack PHP developer it was not very hard to build first app on NUXT which is a Vue.Js framework. It took only 3 hrs to setup, customise design for the landing page (bootstrap 5 is used), configure SSR and host it online.

How does my 1st Nuxt App looks on Mobile?

Dawa Gaadi App Screens

For long time I have used Laravel for backend & frontend customised app development for our clients in Bihar. I have been making cross platform mobile apps using Corodova & IONIC framework under my company Webx99 which provides Android App Development in Patna, Bihar for long time.

My Experience of Building first Nuxt.js (MVP App)

The experience of building an app on Javascript framework was very interesting and fun, Currently I am building a full-stack website using headless cms concept over Nuxt once launched I would start providing Node & Javascript development on both NEXT.Js which is a React framework and Nuxt.Js which is Vue javascript framework under my web development company Webx99 based in Patna.

In the meantime If you want are a startup trying to build a affordable MVP for your Mobile APP feel free to choose us for Mobile App Development in Bihar. Also you can follow me on Twitter at https://twitter.com/xvivek for any questions.

JustUrban PWA Web & Mobile app Case Study

JustUrban PWA Web & Mobile app Case Study

With the increased compute power of our handheld smartphones and browser Google provided push to Progressive Web Apps back in 2017-2018. Many of world’s popular brands have built one for them from Goibibo, Tinder, Flipkart, Myntra and more.

So what exactly is PWAs ?

It’s some short of giving mobile app features to your web application with modern web capabilities to deliver fast optimized website with app like behavior on supported browsers. Today PWAs are now supported on all major browsers. You can build mobile experience with same old web application technologies by adding support for pwa.

Why PWAs?

  • Light weight than traditional mobile app builds
  • Os independent easily maintainable and installable from web browser prompt.
  • Excellent caching and Offline functionality on un consistent network.
  • Faster loading resulting Better SEO rankings due to Google loves optimized pages.
  • Higher conversion rate due to functionality and faster loading of app UI. Read Goibibo PWA case study how they increased conversion rates significantly.

Not only above features we can use many features like touch vibration, push notification, share feature, geo location request and many others new features like read sms OTP and more.

Why we chose to build PWA mobile app for JustUrban?

JustUrban is a local service provider app which provides home services like Salon at Home, Photography, Events, Cleaning Services, Laundry via their web and mobile app to customers. As this is a startup they had to build MVP to try their Idea fastest track was to build a unified PWA web and mobile app for android with PWA capabilities.

JustUrban PWA Case Study
Just Urban Mobile App UX

The Google’s Lighthouse Performance score was 95 best we could get. The app loads in browser in 1-2 seconds. The UX is built with Bootstrap 5, we did many optimizations like lazy image loading, used system fonts and more.

The frontend offers customers to book appointment for services by selecting Preferred Date, Time and confirm booking by seamlessly validating their mobile number with OTP. Backend is build on Laravel the very popular PHP Framework.

If you are also looking for Laravel Development in Patna feel free to discuss about your project. As my company Webx99 provides both Full Stack Web Development & Mobile app development in Patna this project is first PWA app we launched in 2021.

How I increased Conversion with new UX & PWA for RailRestro [Case Study]

How I increased Conversion with new UX & PWA for RailRestro [Case Study]

Context

Every one likes increased conversion and decreased bounce rate for their eCommerce web and mobile app. So does our client RailRestro wanted with us. The first version of Railrestro web app was built on Cakephp Framework back in 2015 by our team in which most of the development, design , ux all was done single handedly by me. 

The Client

RailRestro is official e-catering partner of Indian Railways IRCTC which delivers restaurant food in train as agregator across India. At first we had just the front-end web app from where people used to place order from partner restaurants, Later after 3 years of operation and lacs of food orders processed we were requested to build an app, We chose to build a hybrid mobile app for IOS and Android. But with the growth in order volume while crossing 10 lac orders we needed to improve ux of web app and mobile app as the user base of mobile exploded to over 95%. 

OLD UX of WEB APP & MOBILE APP

We needed a full rebuild of Web app and Mobile app both as mobile app was almost fulfilling the purpose but was lacking features and slow development cycle for the mobile app development was keeping us from deploying rapid changes and also the UX on Mobile web / Desktop and Android app was totally different. 

New Objective

After discussion with the founder and their team we came up to develop single PWA app so that we can focus on the mobile first ux and rapid improvement was possible keeping speed and seamless design on all platform I was handed over task to re design the whole web app and replace the android app with the new PWA web app which was to be served also via play store. 

NEW DESKTOP AND MOBILE APP SCREENS

NEW UX on Desktop & MOBILE APP Screen

Challenges and our Approach

Because the web application front-end was in production and had to plan the new app development and transition without disturbing most of the url structure due to SEO rankings it was tough listing and planning every page and develop totally fresh on a new stack, I used Laravel with bootstrap 4 to design and code the backend and frontend for new PWA app of Railrestro. I had to be careful as conversion pages url, landing pages which were indexed and events to be migrated in new app to reflect the similar analytics data specially for goal conversion. 

The New Ordering UX Screen Checkout Page and Confirmation

The Result

After initial testing and feedback gathering we launched the new app and measured the performance of application load time impact on conversion rate, total eCommerce transaction, bounce rate and other metrics and found significant improvement in all areas.

Performance Improvement was in multiple x to the previous app.

GT METRIX Report compared with peer
Lighthouse SCORE for PWA (The Best we achieved)

When we compared whole week analytics data since we launched new app the bounce rate decreased by 4 percent , Conversion Rate Increased from 5 % to 8% Sessions increased by approx 25 % on an average. Cart abandonment rate decreased by 2x.

Takeaways

The period of 4 months was challenging due to the fact that we had to migrate every feature, content and improve the ux at the same time, but the hundreds of pulls and pushes along with feedback from client end had made it possible and we are happy with the significant improvement in website performance, goal completions & conversion rate.

We encourage you to test the new RailRestro app and experience ordering food in train it your self.

You can follow me on twitter.com/xvivek or on linkedin and be connected with me and my work. If you are looking for mobile app development in Panta feel free to discuss your project with me.

How to Install Linux Bash on Windows 10 & run Ubuntu inside it

How to Install Linux Bash on Windows 10 & run Ubuntu inside it

First Personal computer I bought was preloaded with Windows 98 than came windows Xp which I loved most and from the next new release I started hating it. And between the period of Windows Vista and Windows 7 I had totally switched to a linux flavour desktop Ubuntu as my Primary Computer. However 2 years ago I bought Macbook Air and realised how much it was easy for me as a full stack web developer and server admin to code and manage the servers with both Linux and Ubuntu while running open-source web server stacks.

But Very recently I bought a Windows 10 desktop PC for home use after the windows has matured and is now way better than it was few years back. I came to know that Windows 10 has now stable Linux Bash and support for Ubuntu and linux system builtin after (Fall Creators Update). In this Tutorial I would lay down steps to enable “Windows Subsystem for Linux Bash”   feature that will allow you to natively install Ubuntu and use it within Windows session without any virtual box setup. I had tweeted after I came to read about the news in Microsoft Update blog. Here is the easy steps you can take to enable this and use Ubuntu yourself in your Windows 10 Pc.

Enabling Windows Subsystem for Linux feature in Windows 10

Before I start This feature will not work in windows 32 bit version Choose Windows 64 bit for this you should be any way switching to 64 bit version of Windows.

So if you are using Windows 10 64 bit Go to Control Panel > Programs > Turn Windows Features On or Off than enable “Windows Subsystem for Linux” in dialog box click ok and let the process finish.

Enabling Windows Subsytem for Linux

As your computer restarts you can than choose to install Ubuntu on your Windows 10 from Microsoft Store you will see list of many Linux distribution when you search “Linux” in Windows 10 Store. I recommend using Ubuntu as it works very well for all my purposes like connecting to remote servers using ssh and taking backups using rsync command.

After you have installed Ubuntu or any other linux distribution from the store you can start it from the Start Menu as in following picture as I had installed Ubuntu.

You might want to pin this application shortcut to your Start menu, desktop or in taskbar for quick access.

First time you open the Ubuntu app from start menu you would be prompted to create a password remember you would be automatically given a username which will be same as your windows username. Just set your password and you are in to the world of Linux.

That’s It if you are user of Mac Os or Ubuntu already you must be familiar from here happy using linux on your windows.

How RailMitra App uses AI & ML to make your Train Travel more predictable?

How RailMitra App uses AI & ML to make your Train Travel more predictable?

In India Trains are still the most preferred method of travel for masses and the size of travellers who travel each day with Indian Railways is massive. The information is key for passengers traveling via train to keep their travel comfortable and cut the several issues they have to face, RailMitra is the answer to multiple issues train travellers come across in smarter way using cross platform App with PWA capabilities which lets it work seamlessly across devices and platforms.

What RailMitra app does for train Travellers?

RailMitra as the name is a friend for every train traveler currently you can get information about your PNR status, Predictions or chance of Wait-list ticket confirmation, Train Running Information, Train Schedule, Fare information etc. which uses Artificial Intelligence and machine learning practices in background. Later team of RailMitra have roadmap to offer multiple services to train travellers such as Order Food in Train, Book Train Tickets, Book Bust Ticket and more.

How RailMitra App is implementing AI & ML practices?

“Nitish Kumar” the founder of RailMitra is focused on implementing Artificial Intelligence , Machine learning practices in RailMitra Mobile and Web application.  As a lead product developer for RailMitra I have been heading a team of developers to implement various AI and ML techniques to make app more useful for users and provide information they need. Not only we are trying hard provide recommendations and information about Train Ticket but our engine is also gathering huge amount of data for every user search to make their user experience great.

Apart from improving user experience we are gathering historical data of all  trains running instances to provide you recommendations for booking train ticket, food or plan your travel based on train delays predictions and more. These features would roll with time as we gather more data.

Summing Up

As we are dealing with huge data-set and processing information we would frequently release train running performance reports users feedback about stations and more.

Consequently, as RailMitra expands and progresses I would share more information on it.  Working with such app while learning and implementing AI is a highly exciting for me. If you have any thoughts on this app or have anything to say do share your ideas, feedback and recommendation to me at my Twitter handle @XVIVEK do follow me and share this article from below.

How SevaMart offers you On Demand Home Services in Patna?

How SevaMart offers you On Demand Home Services in Patna?

There were days when we had to suffer finding technicians such as Electrician, Ac Repair technician , Fridge repair , Water purifier repair technicians in Patna. And all the contacts referred by friends didn’t came to use all the time as many technicians were unprofessional who either didn’t ever came within their promised time or they charged fortune for a very simple repair. Even many of technicians charged a kind of Visit/inspection fee in case we rejected there offer for repair or their service because it was too costly. However these are common issue specially for those people moving to Patna from other parts of Bihar or out of Bihar. As a common man I also had faced such issues multiple time at my business place and at home.

On Demand Repair Service in Patna
SevaMart recently launched Mobile App for easy booking of Home Services.

Then just by coincidence on a day a company called Seva Mart consulted us claiming they had solution to eliminate these pains for people of Patna at least they told us so. And we were asked to build web application frontend solution for their consumer , mobile app for technicians and backend app to mange whole process of providing on-demand services to their consumer. As many of you already know I am lead programmer at Webx99 which offers full-stack app development services to business in Patna we agreed and built a robust solution for them. A frontend website, mobile app for user , another mobile app for Technician to process bookings/jobs and a backend for office use.

Now people of Patna can book technicians using SevaMart.com website or via phone call. Recently they have launched their SevaMart mobile App on android playstore that you can download right now. I have used the app to book ac repair technician for my office on few occasions. It was quite simple I downloaded the app placed booking with my preferred date time for visit, Got confirmation on my phone for technician visit and guess what I paid via online method as I prefer it over cash. They visited our office in promised time-slot and did the repair work.

Believe me the team of SevaMart is highly focused and motivated towards providing quick, low cost repair services and is gaining few hundreds new users every month.

If you are looking for an app that can let you book professional repair services in multiple categories in Patna such as AC repair and Installation , Fridge Repair, Washing Machine repair, Geyser Repair, Water purifier repair and other services you should look no where and try their service once. They are not charging any visiting/ inspection fee also all repairs from SevaMart are covered by their 15 days warranty policy in case any thing goes wrong with repair done They would visit for free and look upon the issue.

5 Must have Mozilla Firefox ad-dons for web developers

5 Must have Mozilla Firefox ad-dons for web developers

As a web developer we must be all familiar with a very popular web browser of these days called Firefox by Mozzila foundation. When I started my journey on the internet as web developer those were the days when Chrome was even not born, since then many of web developers felt in love with the Mozzila Firefox and the love continues till now with this software. However some made Chrome or Opera their new love later but choice is yours this is not my post regarding which one is better but here I am putting a handpicked my choice of best or say most utilized ad-dons for Firefox web browser for website designers & developers like me.

User Agent Switcher

User-Agent-Switcher-Add-ons-for-Web Browser Firefox

With this ad-don we can specify our  own browser user agent , or select from a list of pre-configured ones useful when visiting site which is specially built for some specific user agent/ browser.

Web Developer

Web-Developer-Add-In-Firefox
Web-Developer-Add-In-Firefox

My most favorite Firefox addon, as far as web development or coding comes. It has got nearly a million users, and after installing it, you get a custom navigation bar added to your browser – within which you’ll find dozens of incredibly useful web development tools.

We can manage CSS, HTML, forms, measure the length of pages and specific parts, live edit the pages, and so much more. A must use / try by you.

ColorZilla

ColorZilla-Firefox
ColorZilla-Firefox

ColorZilla is one of the tools that is also listed in this post is about background color or pattern generators, it will give you access to manipulating the colors of any webpage. You can select any given text (even zoom-in), and have the add on give you a color code for it. It’s pretty sleek, and can prove to be of good use in many situations.

Awesome Screenshot Plus

Awesome-Screenshot-Add-ons-for-Firefox
Awesome-Screenshot-Add-ons-for-Firefox

Need to take a screenshot of a web page you are visiting this add-on comes very handy.

BuiltWith

BuiltWith-Add-ons-for-Firefox
BuiltWith-Add-ons-for-Firefox

The last above tool on my list called built-with is as Firefox addons for web developers, It adds an extra button to the toolbar, which  gives us the software of the particular site we are browsing.

If you think there is any add-on that must have made it’s place in the list above please drop your comment which addon for firefox should be in the top 5 list as web developer point of view. If you liked the above list please send your love in form of shares, likes and comments.