<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: richk21</title>
    <description>The latest articles on DEV Community by richk21 (@richk21).</description>
    <link>https://dev.to/richk21</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F949803%2Fb92a9991-4495-49a4-870f-eabcb8574762.jpg</url>
      <title>DEV Community: richk21</title>
      <link>https://dev.to/richk21</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/richk21"/>
    <language>en</language>
    <item>
      <title>The Two Sum problem in Java</title>
      <dc:creator>richk21</dc:creator>
      <pubDate>Sun, 08 Mar 2026 17:17:12 +0000</pubDate>
      <link>https://dev.to/richk21/the-two-sum-problem-in-java-2j69</link>
      <guid>https://dev.to/richk21/the-two-sum-problem-in-java-2j69</guid>
      <description>&lt;p&gt;Two Sum problem is the most common question one can come across while preparing for job interviews in developer roles. I'm writing this blog to tell you about the various approaches you can follow to solve this problem in Java, ranging from the easiest to the best approach.&lt;/p&gt;

&lt;h2&gt;
  
  
  The problem
&lt;/h2&gt;

&lt;p&gt;You are given a set of numbers in the form of an array and a target sum. You have to find two numbers in this array such that their sum is equal to the given target value. How would you do so?&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpoa099dfsu8e6oicy6me.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpoa099dfsu8e6oicy6me.png" alt="The two sum problem" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Easiest and Naive Approach: Brute Force (as always!)
&lt;/h2&gt;

&lt;p&gt;You iterate over each element of the array(x'th element) and create another loop inside the above loop from (x+1)'th element to the end. In each iteration you check if the sum of current element of outer loop and current element of the inner loop add up to the sum. Easy right? Has the highest complexity though!&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F18jrwvfpumvs4zcciu26.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F18jrwvfpumvs4zcciu26.gif" alt="Two sum: brute force approach" width="1920" height="1080"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Code
&lt;/h3&gt;

&lt;p&gt;Following is the code for this approach:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;public static int[] getTargetSumIndices(int[] arr, int target){
        for(int i = 0; i &amp;lt; arr.length; i++){
            int x = arr[i]; // element x
            for(int j=i+1; j &amp;lt; arr.length; j++){
                int y = arr[j]; //element y
                int sum = x + y;
                if(target == sum){
                    return new int[] {i, j};
                }
            }
        }
        return new int[] {-1, -1}; // not found
    }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;you can use the indices further in the main method get the actual array elements by calling it like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;public class Main {
    public static void main(String[] args) {
        int[] arr = {11, 2, 5, 0};
        int target = 17;
        int[] result = getTargetSumIndices(arr, target);
        System.out.println("Result: " + arr[result[0]] + " and " + arr[result[1]]);

    }

    public static int[] getTargetSumIndices(int[] arr, int target){
         ...
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Issues
&lt;/h3&gt;

&lt;p&gt;This might seem like an easy solution to this problem but it incurs the worst time complexity of O(n2) due to a nested for-loop. The best time complexity scenario would be O(1) which would happen if the first elements of outer and inner loop summed up to be the target. Space complexity would be constant with a O(1).&lt;/p&gt;

&lt;h2&gt;
  
  
  A better approach: Sort + Binary Search
&lt;/h2&gt;

&lt;p&gt;So as we saw that worst time complexity is too big, we want an approach which can work faster for bigger inputs. In this approach we're going to first sort the array, iterate over each element(lets call it x'th element) of this sorted array, find the complement of x with target sum (sum - x) and apply binary search from the (x+1)'th element to last element to find this complement.&lt;br&gt;
So now, this approach looks like this:&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8jjfs0lw0z2gpdq5dofm.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8jjfs0lw0z2gpdq5dofm.gif" alt="Two sum: sort+binary search approach" width="1920" height="1080"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Code
&lt;/h3&gt;

&lt;p&gt;The code for this implementation should look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;public static int[] getTargetSumPair(int[] arr, int target){
        // sort the array
        Arrays.sort(arr);

        for(int i = 0; i &amp;lt; arr.length; i++) {
            int x = arr[i]; // element x

            //compute complement of x with target sum
            int complement = target - x;

            //binary search - find index of complement
            int y = binarySearch(complement, arr, i+1, arr.length - 1);

            if( y != -1){
                return new int[]{x, y};
            }
        }
        return new int[] {-1, -1}; // not found
    }

    public static int binarySearch(int num, int[] arr, int l, int h){
        while( l &amp;lt;= h ){
            int mid = (l + h) / 2;
            if( arr[mid] &amp;gt; num ){
                h = mid - 1;
            }else if( arr[mid] &amp;lt; num ){
                l = mid + 1;
            }else{
                return arr[mid];
            }
        }
        return -1;
    }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Issues
&lt;/h3&gt;

&lt;p&gt;This approach is creating a time complexity of O(n*log(n)) which is less than our previous approach, but we can still work on it. The space complexity for this method is O(1). &lt;strong&gt;Note&lt;/strong&gt; that the inbuilt sort method is actually optimized dual-pivot quicksort algorithm which has average case time complexity of O(n*log(n)) on data-type int[], which can convert to O(n²) in worst case. &lt;/p&gt;

&lt;p&gt;Let's now look at another interesting approach having the same time complexity.&lt;/p&gt;

&lt;h2&gt;
  
  
  Another O(n * Log(n)) approach: Sort + Two pointer method
&lt;/h2&gt;

&lt;p&gt;In this approach we have to maintain to pointers initially at the two opposite ends of the given array(which needs to be sorted beforehand). If the sum of the elements at the two pointed locations is equal to the target value then simply return their indices. If the sum is less than the target, move left pointer to right to increase sum value and if the sum is greater than the target, move right pointer to left to decrease the sum's value.&lt;br&gt;
This implementation would visually look something like this:&lt;/p&gt;
&lt;h3&gt;
  
  
  Code
&lt;/h3&gt;

&lt;p&gt;This is what this approach's code would be like in Java:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;public static int[] getTargetSumPair(int[] arr, int target){
        // sort the array
        Arrays.sort(arr);

        // set lower and higher pointers
        int l = 0;
        int h = arr.length - 1;

        // do a while loop until l == h (while l is less than h)
        while(l &amp;lt; h ){
            if (arr[l] + arr[h] &amp;gt; target){
                h--; // as sum is greater than target, make bigger number smaller
            }else if(arr[l] + arr[h] &amp;lt; target){
                l++; // as sum is smaller than target, make smaller number bigger
            }else{
                return new int[] {arr[l], arr[h]}; // this means sum == target, so return the arr elements
            }
        }
        return new int[] {-1, -1}; // not found
    }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Issues
&lt;/h3&gt;

&lt;p&gt;Again, as I said, this is another approach of O(n*log(n)) with space complexity of O(1).&lt;/p&gt;

&lt;p&gt;We are now going to look at the hash set approach which significantly reduces the time complexity of this problem.&lt;/p&gt;

&lt;h2&gt;
  
  
  Hash set
&lt;/h2&gt;

&lt;p&gt;This approach is the best one for the two sum problem as it incurs the least time complexity. So in this approach, we're going to create an empty hashset and iterate over the given array elements one by one. For each array element, we first calculate its complement with the target(target - current element), and then check if this complement exists in the hashset - if no, insert the current element in the hashset and if yes, return the current element and its complement as this would be our answer. This logic would be much clear with the gif given below.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffmsj6r1oc40qa16vvl45.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffmsj6r1oc40qa16vvl45.gif" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Using a hashset makes this algorithm all the more efficient as hashsets have constant time algorithm or O(1) for insertion and lookup.&lt;/p&gt;
&lt;h3&gt;
  
  
  Code
&lt;/h3&gt;

&lt;p&gt;The code for this approach is as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;public static int[] getTargetSumPair(int[] arr, int target){
        HashSet&amp;lt;Integer&amp;gt; seen = new HashSet&amp;lt;&amp;gt;();
        for( int i = 0; i &amp;lt; arr.length; i++){
            int complement = target - arr[i];
            if(!seen.contains(complement)) {
                seen.add(arr[i]);
            }else{
                return new int[] {arr[i], complement};
            }
        }
        return new int[] {-1, -1};
    }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Complexities
&lt;/h3&gt;

&lt;p&gt;This algorithm would incur a time complexity of O(n) which is for a single for-loop iterating over each array element. Other than that - lookup and insertion operations in Hashset is having complexity of O(1). &lt;strong&gt;Note&lt;/strong&gt; that the space complexity here is O(n) as we're saving the visited elements in the hashset.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Hope you liked reading this blog about the Two Sum problem and various approaches you can follow to achieve the right result for this. This is my first Algorithm related blog on dev.to. Writing blogs has been a really engaging way of learning for me, clarify my doubts and I wish to share my understandings with the community as well so as to clear concepts in a fun way using visual tools like gifs. Following this blog I'll be bringing more such content for the developer community to read and flourish!&lt;/p&gt;

</description>
      <category>java</category>
      <category>coding</category>
      <category>algorithms</category>
      <category>datastructures</category>
    </item>
    <item>
      <title>Code Buddy: Connect, code and upskill</title>
      <dc:creator>richk21</dc:creator>
      <pubDate>Sun, 01 Mar 2026 15:39:26 +0000</pubDate>
      <link>https://dev.to/richk21/code-buddy-connect-code-and-upskill-1kho</link>
      <guid>https://dev.to/richk21/code-buddy-connect-code-and-upskill-1kho</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/weekend-2026-02-28"&gt;DEV Weekend Challenge: Community&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Community
&lt;/h2&gt;

&lt;p&gt;Code Buddy is a tool I created to help the developer and coding community excel in their skills by connecting with various developers having similar areas of focus and skill levels.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fahvddi18vt4bp435ugan.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fahvddi18vt4bp435ugan.png" alt="Code Buddy landing page" width="800" height="372"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;Code Buddy is a platform to connect developers/coders, track tasks, and achieve weekly coding goals together. Currently, I have created a very simple implementation of the idea which can be gamified further to make it more interactive for the users.&lt;/p&gt;

&lt;p&gt;Users can create an account on code buddy and tell us about their focus area and the level of expertise in it and their weekly goal of how many hours they want to devote to it. Once they create this account, they'll get option to connect with others with same area of interest and level of expertise(will be refined further to get users better connection recommendations). Once they're connected to others, they'll be able to assign tasks to these buddies, and get tasks assigned from them as well. Each task can have certain number of points which will be assigned to an individual once the task is completed. The statistical data of how many tasks a user completes or how many tasks they assigned to others would be available on their dashboard along with the number of hours they devoted in learning/perfecting this skill. I think connecting with new people and up-skilling in a gamified way with interactive dashboards and reward system can really help make learning fun as we know staying consistent is so difficult!&lt;/p&gt;

&lt;h3&gt;
  
  
  Areas for improvement
&lt;/h3&gt;

&lt;p&gt;Code Buddy isn't completely gamified yet and has a very basic implementation of the idea I had in mind, due to shortage of time(weekend challenge!). The point/reward system would be gamified in further versions with a leader-board, to make it more engaging for users. Better algorithm for matching of users would be used to provide right options for buddies based on the user's specific requirements.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;Attaching step-by-step demo of code buddy &lt;a href="https://drive.google.com/drive/folders/1W__JAbK0GBzSW0FLiSNzr5RLvrSvkD6A?usp=sharing" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftgacawmr58og7x3ms9do.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftgacawmr58og7x3ms9do.gif" alt="short gif demo of code buddy" width="400" height="186"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://yourcodebuddy.netlify.app/" rel="noopener noreferrer"&gt;Code Buddy Live&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;

&lt;p&gt;Following are links to frontend and backend GitHub Repositories:&lt;br&gt;
&lt;a href="https://github.com/richk21/Code-Buddy" rel="noopener noreferrer"&gt;Frontend Repository&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/richk21/Code-Buddy-Backend" rel="noopener noreferrer"&gt;Backend Repository&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  How I Built It
&lt;/h2&gt;

&lt;p&gt;I have used React with Typescript and Vite for frontend along with packages like React Hook Forms, React Router DOM and Material UI. Backend APIs have been built with Node.js, Express, TypeScript, and MongoDB. For deployment, I have used netlify for frontend and Render for backend service with CI/CD setup for smooth deployment on pushing commits. Additionally I have used ChatGPT to set up basic blueprint of the project and improvised on it accordingly.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Building Code Buddy was a great experience for me as it helped me understand how to set things up efficiently under a time crunch and still stay dedicated to a project, which is what Code Buddy aims to do!&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>weekendchallenge</category>
      <category>showdev</category>
    </item>
    <item>
      <title>Tally: The Liveability Dashboard</title>
      <dc:creator>richk21</dc:creator>
      <pubDate>Sat, 27 Sep 2025 14:53:07 +0000</pubDate>
      <link>https://dev.to/richk21/tally-the-liveability-dashboard-4ha8</link>
      <guid>https://dev.to/richk21/tally-the-liveability-dashboard-4ha8</guid>
      <description>&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;Ever had a hard time shifting to a completely new neighborhood, area or an entirely new state for job or education? The uncertainty about the locality's living condition can make it even more stressful! &lt;br&gt;
That's where Tally comes in. It is a survey-based solution to this problem. It collects insightful information from the local residents by asking them to rate amenities like schools or hospitals in their area or the standards of living like cleanliness, water quality, air quality, affordability and safety. &lt;br&gt;
Once the survey is submitted, the aggregate data of the community ratings are shown on an interactive dashboard. This gives newcomers a concise snapshot of the area that they may potentially shift to.&lt;br&gt;
I remember when I relocated to a new city for work, choosing the right neighborhood was overwhelming and exhausting. If I had a tool like Tally, it would've made my decisions much easier and quicker. &lt;br&gt;
So in short Tally provides a "Liveability" Dashboard based on reviews from local residents. The accuracy of the dashboard would improve as more surveys are submitted, making it a reliable tool to find your next neighborhood. Moreover, anyone can contribute by filling the survey form, supporting this community-driven initiative.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Links for demo &amp;amp; repositories
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://github.com/richk21/tally-frontend" rel="noopener noreferrer"&gt;Github Respository for frontend&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/richk21/tally-backend" rel="noopener noreferrer"&gt;Github Respository for backend&lt;/a&gt;&lt;br&gt;
&lt;a href="https://tally-survey-app.netlify.app/" rel="noopener noreferrer"&gt;Frontend Hosted&lt;/a&gt;&lt;br&gt;
&lt;a href="https://tally-backend-mfqz.onrender.com/" rel="noopener noreferrer"&gt;Backend Hosted&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Stack, tools &amp;amp; Libraries
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Frontend: React with Typescript&lt;/li&gt;
&lt;li&gt;Backend: Node.js with Typescript&lt;/li&gt;
&lt;li&gt;Database: Firebase Firestore &lt;/li&gt;
&lt;li&gt;UI Components: KendoReact and MUI&lt;/li&gt;
&lt;li&gt;Geolocation API: ipapi API for fetching user's location to auto-fill the location fields and creating the dashboard for that location. &lt;/li&gt;
&lt;li&gt;Graphs and Charts: Recharts used for visual data on the dashboard.&lt;/li&gt;
&lt;li&gt;Additional packages: sass, eslint, dotenv, react-router, etc.&lt;/li&gt;
&lt;li&gt;Version control: Github&lt;/li&gt;
&lt;li&gt;Backend Hosting &amp;amp; Github: Render&lt;/li&gt;
&lt;li&gt;Frontend Hosting &amp;amp; Github: Netlify&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Flow &amp;amp; Demo
&lt;/h3&gt;

&lt;p&gt;So let's get started with the demo!&lt;/p&gt;

&lt;h4&gt;
  
  
  Landing Page &amp;amp; Navbar
&lt;/h4&gt;

&lt;p&gt;At first you will see Tally's landing page:&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fptrp4wxnlp3wjiv08yup.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fptrp4wxnlp3wjiv08yup.png" alt="Landing page full" width="800" height="384"&gt;&lt;/a&gt;&lt;br&gt;
The navbar contains buttons to navigate to Landing Page, Survey Form and the Dashboard. These buttons are built using &lt;strong&gt;KendoReact's SvgIcons&lt;/strong&gt;.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnglj52iplple5fyme0hr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnglj52iplple5fyme0hr.png" alt="Navbar buttons" width="800" height="43"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Survey Form
&lt;/h4&gt;

&lt;p&gt;There are five accordions on the Survey Form. The page's title and subtitle have been made using &lt;strong&gt;KendoReact's Typography&lt;/strong&gt;. Additionally, The accordion headers have a &lt;strong&gt;Tooltip&lt;/strong&gt; functionality also created using KendoReact.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftm6syt046db5r9thlrwv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftm6syt046db5r9thlrwv.png" alt="Survey Form" width="687" height="807"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The first two sections are for filling in personal &amp;amp; locality details and the remaining are for ratings and comments.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa75j3gehtr35ro1z4kje.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa75j3gehtr35ro1z4kje.png" alt="Survey Form" width="800" height="387"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The locality accordion includes three auto-filled fields (using the ipapi API), to avoid inaccurate data entry by the users. Although, the fields are still editable. In this section I have used the &lt;strong&gt;Label, Input and Autocomplete components&lt;/strong&gt; from KendoReact.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftdkzx9vfl85eun497j4l.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftdkzx9vfl85eun497j4l.png" alt="Survey Form" width="800" height="517"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Next we have the rating accordions. MUI's slider component has been used here to gather ratings from the residents about various amenities and factors in their area:&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fymben0qupmd8avqfcoc5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fymben0qupmd8avqfcoc5.png" alt="Survey Form" width="800" height="520"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqxv6z9lddgf8i20afb01.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqxv6z9lddgf8i20afb01.png" alt="Survey Form" width="800" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And the last section is for resident's feedback or comments about their locality:&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc7yyx9kczi83vlhiw7yy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc7yyx9kczi83vlhiw7yy.png" alt="Survey Form" width="800" height="522"&gt;&lt;/a&gt;&lt;br&gt;
Here I have used &lt;strong&gt;TextArea from KendoReact&lt;/strong&gt;. Finally, the Submit Button has been built using &lt;strong&gt;KendoReact's Button component&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Once the entire form is filled the button would be enabled. After submitting, you will see a loading page which is &lt;strong&gt;KendoReact's Infinite Spinner Loader&lt;/strong&gt;. If the form is submitted successfully a success notification is displayed using the &lt;strong&gt;Notification component&lt;/strong&gt; from KendoReact. I will be demonstrating these components in the attached video.&lt;/p&gt;

&lt;h4&gt;
  
  
  The dashboard
&lt;/h4&gt;

&lt;p&gt;The dashboard includes a search field to search the locality's name(it could be the area, pincode, city or state that you filled in the form),  on pressing enter the loading screen would come up. If the data for the search locality was found, it would show the dashboard, else it would show the not found page.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd6ujv1za8wazmb2vekxr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd6ujv1za8wazmb2vekxr.png" alt="Dashboard" width="800" height="384"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8ex0uz1qftmxuc1u4zcy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8ex0uz1qftmxuc1u4zcy.png" alt="Dashboard" width="800" height="376"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The dashboard looks like this overall:&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5qcw1l3v6mq1nrihoiso.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5qcw1l3v6mq1nrihoiso.png" alt="Dashboard" width="800" height="298"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;These charts have been created using React's Recharts Library. They contain dials showing aggregate ratings for various amenities and living standards, a dedicated section listing resident's comments about the area, and charts of the area's age and occupation distribution. The line chart shows various trends in air quality, noise levels, cleanliness and water quality aggregate over time.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjpm75oppql3zc0br4tg2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjpm75oppql3zc0br4tg2.png" alt="Line Chart" width="800" height="260"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  A demo
&lt;/h4&gt;

&lt;p&gt;This short demo demonstrates all the components, dashboard charts and the survey form. It also demonstrates how the app behaves when searching for an unknown location as well as the process of submitting a new survey entry. I have used the example of "Mumbai" city(which was not already existing in the database) and added a new survey entry for it which generated it dashboard.&lt;br&gt;
&lt;a href="https://drive.google.com/file/d/1v_VNFln5vlQPA0EJHDgbt0wmK4Bs9eIh/view?usp=sharing" rel="noopener noreferrer"&gt;demo video&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  KendoReact Components Used
&lt;/h2&gt;

&lt;p&gt;The list of KendoReact Component used in Tally:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Input &lt;/li&gt;
&lt;li&gt;Button &lt;/li&gt;
&lt;li&gt;Autocomplete&lt;/li&gt;
&lt;li&gt;Label&lt;/li&gt;
&lt;li&gt;Typography&lt;/li&gt;
&lt;li&gt;Tooltip&lt;/li&gt;
&lt;li&gt;Notification&lt;/li&gt;
&lt;li&gt;Infinite Loader&lt;/li&gt;
&lt;li&gt;Textarea&lt;/li&gt;
&lt;li&gt;SvgIcon&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;In conclusion, Tally is a user friendly platform designed to visualize  living standards of different localities, relying heavily on extensive community participation and authentic feedback to get a wider range of data to visualize upon. Using React, Node, Firebase and component libraries like MUI and KendoReact has definitely contributed to Tally's enhanced performance and User Experience. As it's user base grows, Tally will get more and more accurate, becoming an invaluable tool for people looking to move out to a new place.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>kendoreactchallenge</category>
      <category>react</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
