Forem: Purushothaman Raju

Place Insights app using cloudflare

Purushothaman Raju — Wed, 10 Apr 2024 15:02:37 +0000

This is a submission for the Cloudflare AI Challenge.

What I Built

I built an simple application to look up any popular place and quickly summarize and understand the sentiment of the place using reviews data

Demo

https://placeinsights.pages.dev/

My Code

https://github.com/problemsolver03/place-insights-cloudflare

Journey

The idea was to utilize the Google Maps review data and use it as the input data to summarize the reviews and also to provide users with the sentiment of the consolidated reviews.
This quick summarization and sentiment classification will help users quickly get an overview of the place they want to visit.

Once the idea was clear I procured a Google Maps API key to get the reviews of the place.
then I created two workers on Cloud Flare one for review summarization and the other for analyzing the sentiment of the reviews, with these workers setup. I was able to pass the review data to the workers and get the output of the models through API response, which I used in my react frontend to visualize it and later hosted the react application on Cloudflare pages.

Technologies/Libraries used
React, Serverless functions, TailwindCSS

Multiple Models and/or Triple Task Types

bart-large-cnn
distilbert-sst-2-int8

MANGO - An service directory to find experts and book appointments

Purushothaman Raju — Wed, 12 Jan 2022 18:24:27 +0000

Overview of My Submission

Mango
An service directory to find experts in any field and book appointments with the experts

Submission Category:

E-Commerce Creation

Link to Code

Frontend Code
https://github.com/problemsolver03/Mango-Frontend

Backend Code
https://github.com/problemsolver03/mango-serverside

Additional Resources / Info

Features in the application

Add a service
Add Reviews
Book Appointments
View Appointment Schedules
Search for experts

Mongo Features used

Atlas Search
Mongo DB cluster
Realm for hosting and serverless functions

Tech Stack
Frontend : ReactJS, Tailwind UI
Backend : NodeJS, ExpressJS, MongoDB
Authentication :JWT based authentication , Cryptr for password encryption

Database Schema
USER SCHEMA

username: {
    type: String,
    required: true,
  },
  password: {
    type: String,
    required: true,
  },
  name: {
    type: String,
    required: true,
  }

SERVICES SCHEMA

title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
  image: String,
  contactNo: {
    type: String,
    required: true,
  },
  email: {
    type: String,
    required: true,
  },
  address: String,
  price: {
    type: String,
    required: true,
  },
  category: {
    type: String,
    required: true,
  },
  user: {
    type: String,
    required: true,
  },
  rating: Number

APPOINTMENTS SCHEMA

  serviceID: {
    type: String,
    required: true,
  },
  user: {
    type: String,
    required: true,
  },
  date: {
    type: Date,
    required: true,
  }

REVIEWS SCHEMA

  review: {
    type: String,
    required: true,
  },
  rating: {
    type: Number,
    required: true,
  },
  serviceID: {
    type: String,
    required: true,
  },
  user: {
    type: String,
    required: true,
  }

Screenshots of Application

Link to Application
Application Demo

Test credentials for application
email:test@test.com
password :123

Conditional rendering in React

Purushothaman Raju — Thu, 23 Dec 2021 16:55:36 +0000

To decide which UI elements to show or render in react is what we refer to as conditional rendering. This can be achieved by 3 ways which are helper functions, using ternary operators, and lastly by using simple if-else conditions in the render method. let us see some code examples to better understand these techniques.

Conditional rendering using helper functions
The idea is we abstract the logic from the render method and add it inside a function that will return some JSX or UI based on some conditions.
Here is an example

class App extends React.Component{
  helperFunction = () => {
      return (
          <h2>
              I was returned from a helper function
          </h2>
      )
  }
  render() {
      return (
          <div>
              {this.helperFunction()}
          </div>
      )
  }
}
export default App;

class App extends React.Component {
  render() {

    const helper = () => {
      return <h2>I was returned from a helper function</h2>;
    };

    return <div>{helper()}</div>;
  }  
}
export default App;

Using Ternary operators
This is the most common way of handling conditional rendering in the react world to show a price of UI or to manipulate the values like adding classNames or showing values inside elements, this usually written inside the return method of components.
Let us see an example to understand this approach better

class App extends React.Component {

  state = {
    data:true
  }

  render() {

    return (
      <div>
        {
          this.state.data ? <p>Data is available</p> : <p>Sorry no data can be shown</p>
        }
      </div>
    )
  }
}

export default App;

Use of If/Else conditions
This is a very straight forward approach to decide which piece of UI or JSX we want to return to the user. see the below example to
understand this approach better.

class App extends React.Component {  
  state = {
    data:true
  }
  render() {
    if (this.state.data) { 
      return (<p>Data is available</p>)
    }
    else {
      return (<p>Sorry not data is available</p>)
    }    
  }
}
export default App;

if you like this article please do visit my blog here www.uiuxtek.in

Flattening a multidimensional array using Javascript

Purushothaman Raju — Thu, 18 Nov 2021 16:33:37 +0000

So as the title implies let’s see how to flatten an multidimensional array, As we know a multidimensional array looks something like this [[1,2],[3,4],[5,[6,7]]] and we would want to flatten this to something like this [1,2,3,4,5,6,7] since we know the expected output let’s get started.

First, we define a function called arrFlatten and declare a variable called flattendArray to store the flattened array. We will be using recursion since it’s an efficient solution for problems like these, inside the arrFlatten.

We define another function called recurseFlatten , which will loop over every item inside the array and identify if the array item is not an object, This check is added to ensure that we only add a number or string to the flattendArray. If the check returns false we push the array item into the flattendArray and finally return the flattendArray.

Here it the complete code for flattening an multidimensional array

const arrFlatten = (arr) => {
        let flattendArray = [];
        const recurseFlatten = (arr) => {
          for (let i = 0; i < arr.length; i++) {
            if (typeof arr[i] === "object") {
              recurseFlatten(arr[i]);
            } else {
              flattendArray.push(arr[i]);
            }
          }
        };
        recurseFlatten(arr);
        return flattendArray;
      };

let multiDimesionArray = [0, [1, 2], [3, 4], [5, 6, [7, 8]]];
 console.log(arrFlatten(multiDimesionArray));