profile-pic
Vetted Talent

Barath kumar

Vetted Talent

Bringing Five years of hands-on experience, I specialize in front-end development, excelling in crafting engaging web experiences. Proficient in HTML, CSS, JavaScript, and frameworks like React.js, I've adeptly translated intricate design concepts into intuitive interfaces. Notably, I possess expertise in Content Management Systems (CMS), including Strapi and WordPress Headless CMS, where I've developed tailored solutions enabling seamless content management. Passionate about delivering excellence, I remain dedicated to staying updated with the latest trends and technologies in front-end development and CMS, ensuring optimal performance and user satisfaction.

  • Role

    Senior Software Engineer

  • Years of Experience

    6 years

Skillsets

  • Photoshop
  • Adobe XD
  • Agile
  • AJAX
  • Axios
  • Express
  • Fetch API
  • Figma
  • InVision
  • Adobe Illustrator
  • REST API
  • Sass
  • SCSS
  • Strapi
  • SVN
  • Tailwind CSS
  • TypeScript
  • Zeplin
  • HTML
  • Next Js - 5 Years
  • MySQL - 5 Years
  • WIX - 2.5 Years
  • Node Js - 5 Years
  • GitLab - 5 Years
  • Bootstrap
  • CSS
  • Git
  • React Js - 5 Years
  • JavaScript
  • Jira
  • jQuery
  • Material UI
  • MongoDB
  • Slack
  • WooCommerce
  • Wordpress

Vetted For

9Skills
  • Roles & Skills
  • Results
  • Details
  • icon-skill_image
    CMS Web Developer (Remote)AI Screening
  • 64%
    icon-arrow-down
  • Skills assessed :CI/CD, CMS plugins, React / NextJS, SCSS/Tailwind, Storyblok, Git, Node Js, Type Script, Wordpress
  • Score: 58/90

Professional Summary

6Years
  • Jul, 2023 - Present2 yr 3 months

    Senior Software Engineer

    Bhawan Cyber Tek
  • Mar, 2023 - May, 20241 yr 2 months

    Front End Engineer

    Boom Games
  • Nov, 2021 - Feb, 20231 yr 3 months

    Software Developer

    Qassure Technologies
  • May, 2020 - Oct, 20211 yr 5 months

    Web Developer

    Atlarz Enterprise

Applications & Tools Known

  • icon-tool

    Jira

  • icon-tool

    Slack

  • icon-tool

    Figma

  • icon-tool

    Git

  • icon-tool

    XAMPP

  • icon-tool

    cPanel

  • icon-tool

    Photopea

  • icon-tool

    Adobe Photoshop

  • icon-tool

    Adobe XD

  • icon-tool

    Adobe Illustrator

  • icon-tool

    VS Code

Work History

6Years

Senior Software Engineer

Bhawan Cyber Tek
Jul, 2023 - Present2 yr 3 months
    Enhance Application Performance: Boosted application speed and reduced load time by 40% through efficient code optimization, proactive debugging, and use of performance monitoring tools. Optimize User Experience: Designed and delivered responsive, accessible web pages using Next.js, React.js, and TypeScript, achieving seamless performance across devices and browsers. Strengthen Code Quality: Refactored legacy code to modern standards, reducing maintenance costs by 25% and enhancing overall application scalability. Showcase Technical Skills: Integrated RESTful APIs with React and implemented data-driven solutions using Python and PostgreSql, ensuring robust back-end functionality. Collaborate Across Teams: Worked closely with designers, QA engineers, and product teams to implement dynamic UI components and deliver projects ahead of deadlines.

Front End Engineer

Boom Games
Mar, 2023 - May, 20241 yr 2 months
    Enhance User Engagement: Optimized images, code, and ensured cross-browser compatibility, driving page scores to over 90 in Performance and 100 in SEO. Revamp Codebase: Slashed page loading time by 50% and slashed bug reports by 30%, catalyzing a 15% surge in user retention rates. Demonstrate Web Design Expertise: Conceptualized and developed innovative, browser-compatible web pages using React JS, Next JS, HTML, CSS3 and SCSS, Javascript and jQuery, Figma (UX). Showcase Technical Skills: Engineered single-page applications (SPAs) and executed responsive web design using HTML5 grid layouts and CSS3 media queries with REST API integration. Emphasize Collaborative Approach: Collaborated closely with designers and app developers, swiftly resolving website performance issues with Server Side Rendering (SSR) and Static Site Generation (SSG).

Software Developer

Qassure Technologies
Nov, 2021 - Feb, 20231 yr 3 months
    Developed: Engineered responsive, cross-browser compatible, and accessibility-compliant websites, surpassing industry standards with a load time 19% faster than average through Server Side Rendering (SSR). Produced: Crafted visually appealing web applications by translating UI/UX design wireframes into high-quality, reusable markup using React JS, Next JS, HTML5, CSS3, SCSS, Adobe XD (UX). Implemented: Executed a strategic framework, slashing frontend development time by 30% and elevating user experience metrics by 20%, thereby enhancing the overall product quality.

Web Developer

Atlarz Enterprise
May, 2020 - Oct, 20211 yr 5 months
    Utilized: Employed Bootstrap and WordPress technologies effectively to execute projects, yielding tangible outcomes. Improved: Elevated website performance metrics by 20% and mitigated bounce rates by 15% through strategic optimization strategies through Server Side Rendering (SSR). Approached: React JS, Next JS and Javascript, architecting responsive user interfaces with Bootstrap and integrating algorithmic functionalities into WordPress websites. For UX tool we utilized Figma, Adobe XD, Zeplin and Photoshop. Consistently aligned: Synchronized project objectives with industry standards and best practices, culminating in a 25% improvement in client satisfaction ratings.

Achievements

  • Best performer of month by Maintaining 99.9%
  • Enhance user engagement by optimizing images, code, and ensuring cross-browser compatibility, resulting in a page score increase of over 90 in Performance and 100 in SEO.
  • Revamped codebase, reducing page loading time by 50% and decreasing bug reports by 30%, leading to a 15% increase in user retention rates.
  • Developed responsive, cross-browser compatible, and accessibility compliant websites, achieving a load time 19% faster than the industry average.
  • Implemented a strategic framework resulting in a significant 30% reduction in frontend development time and a notable 20% enhancement in user experience metrics, thus elevating the product's overall quality.
  • Effectively completed numerous projects utilizing Bootstrap and WordPress technologies, yielding tangible outcomes.
  • Achieved a remarkable 20% increase in website performance metrics and a notable 15% reduction in bounce rates through strategic optimization strategies

Major Projects

5Projects

Yuga Organics (E-commerce)

Yuga Organics
Jul, 2020 - Aug, 20222 yr 1 month
    1. Utilized Technologies: Employed a combination of HTML, CSS with Bootstrap framework, and media queries to ensure a responsive design for the e-commerce web application. Leveraged Lider Revolutions for graphical sliders to enhance visual appeal and user engagement.
    2. Proficient in Development Stack: Mastered the full development stack including HTML, CSS, and Bootstrap for front-end development, integrating PHP-based WordPress CMS, and WooCommerce for seamless e-commerce functionality.
    3. Integrated Algorithmic Functionalities: Implemented advanced functionalities within the WordPress environment, utilizing PHP to integrate algorithmic features and enhance the user experience.
    4. Improved Performance Metrics: Implemented strategic optimization strategies resulting in a 20% improvement in website performance metrics. Employed techniques to mitigate bounce rates by 15%, enhancing user engagement and retention.
    5. Consistent Alignment with Industry Standards: Ensured alignment of project objectives with industry best practices and standards. Resulted in a 25% improvement in client satisfaction ratings by delivering solutions that meet or exceed industry expectations.

The Wine Winch (E-commerce)

The Wine Winch
Apr, 2021 - Mar, 2022 11 months
    1. Utilized Technologies: Employed a combination of HTML, CSS with Bootstrap framework, and media queries to ensure a responsive design for the e-commerce web application. Leveraged Lider Revolutions for graphical sliders to enhance visual appeal and user engagement.
    2. Proficient in Development Stack: Mastered the full development stack including HTML, CSS, and Bootstrap for front-end development, integrating PHP-based WordPress CMS, and WooCommerce for seamless e-commerce functionality.
    3. Integrated Algorithmic Functionalities: Implemented advanced functionalities within the WordPress environment, utilizing PHP to integrate algorithmic features and enhance the user experience.
    4. Improved Performance Metrics: Implemented strategic optimization strategies resulting in a 20% improvement in website performance metrics. Employed techniques to mitigate bounce rates by 15%, enhancing user engagement and retention.
    5. Consistent Alignment with Industry Standards: Ensured alignment of project objectives with industry best practices and standards. Resulted in a 25% improvement in client satisfaction ratings by delivering solutions that meet or exceed industry expectations.

Jove Patterns E-commerce website

Jove Patterns
May, 2018 - Oct, 20213 yr 5 months
    1. Utilized Technologies: Employed a combination of HTML, CSS with Bootstrap framework, and media queries to ensure a responsive design for the e-commerce web application. Leveraged Lider Revolutions for graphical sliders to enhance visual appeal and user engagement.
    2. Proficient in Development Stack: Mastered the full development stack including HTML, CSS, and Bootstrap for front-end development, integrating PHP-based WordPress CMS, and WooCommerce for seamless e-commerce functionality.
    3. Integrated Algorithmic Functionalities: Implemented advanced functionalities within the WordPress environment, utilizing PHP to integrate algorithmic features and enhance the user experience.
    4. Improved Performance Metrics: Implemented strategic optimization strategies resulting in a 20% improvement in website performance metrics. Employed techniques to mitigate bounce rates by 15%, enhancing user engagement and retention.
    5. Consistent Alignment with Industry Standards: Ensured alignment of project objectives with industry best practices and standards. Resulted in a 25% improvement in client satisfaction ratings by delivering solutions that meet or exceed industry expectations.

Jesse De Mello (Portfolio website)

Jesse De Mello
Nov, 2020 - Aug, 2021 9 months
    1. Utilized: Employed a combination of React, Redux for state management, GSAP for graphics and animations, and Bootstrap for responsive UI in conjunction with WIX CMS to develop dynamic web applications effectively, ensuring tangible outcomes.
    2. Proficient in: Mastered full-stack development, specializing in React and Redux for seamless state management, leveraging GSAP for engaging graphics and animations, and implementing Bootstrap to craft responsive user interfaces. Proficiency extends to integrating these technologies with WIX CMS, ensuring efficient and scalable web solutions.
    3. Improved: Enhanced website performance metrics significantly, achieving a 20% increase in loading speed and a 15% reduction in bounce rates through strategic optimization strategies tailored to React, Redux, GSAP, Bootstrap, and WIX CMS, thereby improving overall user experience.
    4. Consistently aligned: Ensured project objectives remained synchronized with industry standards and best practices in web development, resulting in a 25% improvement in client satisfaction ratings for React applications developed with Redux, GSAP, Bootstrap, and WIX CMS, demonstrating a commitment to excellence and client-centric solutions.

Education

  • Bachelor of Technology (B-Tech) - Information Technology

    JKK Munirajah College of Technology - Anna University (2015)

Interests

  • Travelling
  • Cricket
  • Watching Movies
  • AI-interview Questions & Answers

    Hi. Myself, and I'm a experienced developer. I have nearly 5.5 years of experience in React JS with JS technologies, uh, that we are using as a front end development. And then, uh, CMS like, uh, WordPress with WordPress and Strapi CMS. I have been used as a back end. So, uh, using the Strapi CMS, I have integrated within XJS, and then the WordPress, I have integrated within React and React. And, uh, also, the core HTML CSS, I have, uh, integrated as this as that well. So, uh, yeah, I have an I have an experience in developing the custom custom plugins. So, yeah, I have an, uh, I have an good experience with that. So, uh, my role is to integrating the front end back end, uh, and also the, um, solving the and and also the, um, and also the focusing on, uh, front end and back end solutions like the integration with the database and, uh, yeah, especially the database. I'm using the, uh, micro, uh, my MySQL and SQL. Yeah. Also, um, I have good experience with, um, developing the responsive, uh, screen responsive with web pages like, uh, it will be adapting to the mobile response and desktop desktop with the tablet response. So I'll cover all kind of device responsiveness. And, uh, yeah, mainly, I can, like, I can I can I mean, I mean, I'm experienced in writing Deepgram architecture, like tool less and I mean tool less and the result will give more? So, yeah. Process of, uh, implementing the page speed by by approaching the server side rendering in Next. Js. And, uh, server side rendering is mainly used for the block, uh, block pages, the generating the block pages and static site generation. Also, we have user for generating the custom pages. So, uh, in my current organization, I mean, I mean, in my current company website, uh, the name for Ravi was, so, uh, yeah, I have developed, we worked on that project. So, uh, in that, uh, I'm using the Next. Js for the Strapi CMS. So, uh, using the Strapi CMS, I can I mean, uh, they're using the CMS, uh, I will generate the entire web pages and also integrated that with the Next? Js. So without the help of, uh, friend, I mean, with the help of touching the Next. Js, I can able to create the custom UI with Next. Js. And, also, we have an option to, uh, we are not we have an option to implementing the front end and the back end, uh, implementing the custom JavaScript with the from the Strapi itself. So that will help us to load our content through the back end without touching different end. So this will this approach will, uh, help us to, uh, this approach will help us to indexing the indexing our pages with the Google could speed could pace speed. So I have integrated my website with, uh, Google Analytics and, uh, um, Microsoft Clarity for for checking for testing the user engagement with, um, basically, we are developing the game product. So through the website, we tracking the traffic. So due to the using the Google Analytics with Microsoft Clarity, we are tracking the user engagement and also, uh, mainly be focusing on PaySpare without reloading that page, uh, and there, uh, we can able to

    The more complex website I have is to manage the, East Coders from US. That is in my current company called Pumpkins Private Limited, we are developing the product called from US. So for that, I have, uh, created the entire website with the landing pages. So the website has been created using the, uh, stack uh, stack called the Next. Js. It's basically a case framework with the Strapi CMS. So in Next. Js, we are, uh, implementing the server side rendering static static site generation for, uh, optimizing the Google page speed and, uh, optimizing the SEO. So, uh, that complication is like, um, integrating the so next JS with the Strapi, Strapi CMS, and, also, uh, mainly, we are, uh, since we are, uh, since we are implementing the, uh, implementing the contents through the, so, uh, basic uh, we are implemented the SSR in blocks. So that that will, uh, create, uh, that will create a LoRa server. So, uh, I'm just working with the front end and back end team and then and let them, um, architect let them, uh, optimize the front end architecture and, uh, work with the back end team for, uh, optimized database connections. So through that, I have watched you this space speed implementation and, uh, mainly, I'm I'm managing the entire website with, uh, good good good page speed code. Now my page speed my now my base speed code is, uh, mostly, uh, it's showing the 90 to 100%, and, uh, the SEO score will be 99 percentage maximum. Through that, uh, I'm implementing the good UI stuffs like, uh, um, using the GSAP for graphical for the graphic of users. Because since we are using the since we are developing the game, so we we'd like to we're targeting to, uh, user should engage with the website so so that we that the traffic has to be create. So we simply start getting the users through the graphical interface and also instead of putting the, uh, the constant contents. So, basically, the user is not ready to read the entire content of websites. So we have to initiate the graphical interface so that I have initiate GSAP and, uh, I I'm just, uh, implementing the scrolling animations. And, uh, when we come to the page speed, the page speed is always, like, uh, around it is oscillating around 90 to 100 percentage. So before that, the page speed will be as base speed is 60 5 percentage. So we are, uh, engaging with the operation like, uh, server side rendering and the static side generation for custom pages and custom blocks. Yes. We are creating the blocks through the Strapi CMS, and we are creating the custom pages. So through the Strapi. Uh, this feature, we have implemented in the next JS. Since we are using the, uh, Strapi. Right? So we are implementing the plug in called the Strapi header. So the Strapi header will help us to create, uh, different menus and, uh, through the Strapi. Also, uh, they help us to create the content, uh, content and help us to integrate over the page with the right page. So that will help us to create the dynamic pages. The dynamic pages itself, uh, it's not like, uh, we touching in the front end. So in the entire, uh, website, like, HTML, CSS, and custom JavaScript. Since I have implemented the jQuery for, uh, doing doing list of so we have implemented a jquery. So using 3 using this core technologies, I have developing the page through the CMS itself. This will track our track us track our works and tasks helpfully I mean, uh, needfully. So, uh, the page speed is getting, uh, getting good, and, also, the process of implementing this server side rendering and static side generation help us to lead our web page input fee. So we are planning to implementing the graphical interface for user interaction. End of the day, we are, uh, we are satisfied in the clients. So, uh, for their user engagement. So since we are using the game application, so let, uh, we will letting our user to write a good, uh, good review for our website. So you can able to comment their comment their, uh, feedbacks and reviews through the blog contents in each each and every blog. So we have the block page called, uh, block index and, uh, enter even the user is clicking the index of the blocks, so user can, uh, apply.

    Yep. My development experience working with CMS platform like, uh, WordPress and Macintosh Shopify. Storyblock, I'm Storyblock, I'm new to the Storyblock, but I can adapt because, uh, just now only I see about the Storyblock. It help us to create the ecommerce website and the dynamic websites. Yeah. But I have good experience with the WordPress, so I can able to create the business application I mean, business page, business website under with the ecommerce website using the plugin called Ocommerce. So Magento is mostly used for the, um, ecommerce purpose and Shopify. Shopify is now leading CMS. So they are using React as a front end, but workers are using the core HTML still. But now we have an option for integrating the React with WordPress. So using the GraphQL, we can able to communicate. So, um, and also the WordPress plugin, I can able to integrate the custom plugin with WordPress. So the WooCommerce with the yeah. Since we are you using the WooCommerce while creating the commerce web application, I'm, uh, facing some issue. It's not an issue. I'm trying to create some custom custom feature as per the customer requirement So so that I have to download the custom plug in using the PHP. So I developed and, uh, integrated with PHP platform. I mean, integrated with the WordPress platform that help us to, uh, work with the good good environment. I saw the WordPress. Um, since we are using the WordPress, uh, the numb the first issue is, like, the page speed. So page speed, I'm using the plugin called, uh, cache clear. So the cache clear help us create leading the website with good page speed and, uh, um, also that will, uh, that will help us to, uh, remove the and and reduce the server catches. So, uh, why using your why using the WordPress? We we should have to consider the so which server we are going to use because the global host is always give the average speed. So we have to ship to the server like, uh, server like the which was server maximum, which was server help us to help our website to give the live pay speed. And, also, I am just, uh, seeing in the improvement, like, uh, integrating WordPress with the React using the React query and also the GraphQL for, uh, pay binding. Mainly, I'm I'm just developing the that kind of projects. So the responsiveness, I'm using the bootstrap with the HTML. Bootstrap, uh, basically, it's an, uh, CSS framework. So using the Boost app, I can able to write the score and doing more features. Yeah. Doing that, I worked very well. That that now that constant that concept is worked as or help us do very well. So, yes, Shopify Shopify, I'm integrating the new challenges like, uh, creating the ecommerce application, uh, while I'm doing the, uh, uh, Shopify website. So, uh, store block also, I'm expecting like that. And, also, the WordPress, I'm integrating the custom theme theme, vanilla theme called Elementor, uh, Elementor. Use the Elementor base, basically, the web page builder. So using the elementor, I'm using the I'm developing the entire website with the custom UI. So elementor has good features, and it has good add on. Some of the add ons are paid. So, also, we have an option to, uh, integrate our our own, uh, own custom code with the element that we have an option. We have 1 add ons, uh, regarding that. That is not right. That is totally open source. So, also, we have a team for, uh, implementing the element of, uh, element of luck in with, uh, writing the custom CSS code, and, uh, uh, that will be very responsive. So, also, this will this is giving the good pay speed. Also, in in WordPress, we have option called template creating the custom templates. So that will help us to create the reusable sections. So that will that help us to avoid the, uh, avoid the reusable code. That help us to avoid the un unwanted loading. So we are using the following tricks. Yeah. And the block block, we are creating the dynamically using the WordPress is very easy because that is, uh, inbuilt, uh, inbuilt inbuilt progress. I mean, inbuilt features in the work where we are constantly coming coming about this. The Storyblock, uh, I have to look because Storyblock, I'm looking like a CMS that helps us to integrate the integrate our, uh, ecommerce website and, uh, with the good page speed I'm hearing. Now it is seems like it is it is a top loading, uh, CMS. So soft let it looks it looks like a Shopify.

    Yeah. I have contributed, uh, a code to the CMS, uh, here in my current project, uh, called Ramivas. Uh, renews. I'm creating the entire website using the, uh, um, Strapi CMS with the Next. Js. So Next JS is basically the ref JS. So Next JS inserts, we are creating the custom code only. Custom UI, we have developed. And, also, we have integrated that with the Strapi using the, uh, using the API through the API concept. I mean, API binding method. In next instance, we are using the Next. Js. We are, uh, we have, uh, inbuilt API, uh, technologies, the inbuilt API features like server side and rate generation and, uh, server side rendering and static side generations. So the server side generations are those feature we have achieved in this project because so site generation, we are using the, uh, we are using that blockage. So creating the block through the Strapi that that can be dynamically create and also we can able to deploy the creative block into the front end. So, uh, that that can which means we can able to create any any number of blocks. So, uh, user can able to view the blocks, list of blocks that we have created in, uh, React JS. Also, uh, for, uh, some option we have provided in the blog pages for, like, creating the, uh, custom hooks custom webhooks. And, also, uh, we have custom plug in with, uh, that help us to integrate the HTML because we are not not only providing the content on the HTML, in the blogs, we are providing the content as a HTML so that, uh, so that that help us to create the custom UI for each blogs. So, uh, and also we can able to create the intractable UI, like, uh, implementing the jquery, the options so can so that we can able to create the, like, custom sliders and, uh, custom graphics, custom program programmatic calculations. So, uh, in in our current website, I'm integrating the custom custom, uh, custom programming calculators for calculating the GST. So that help us to create the, uh, latest customer to customer to calculate our, uh, calculate their, uh, take I mean, taking GST since we are using the using to develop the game. So it's totally the cash based game. So customer, uh, the pricing of the customer is, like, uh, getting the cash for winning. So, uh, the winning, uh, we have to implement the GST for the cashback. So the for the cashback customer can, uh, be let our customer to check their, uh, GST percentage deduct from the cashback. So there is a good feature to customer move when they are when they are getting the, uh, packages. So it's a it's not a package. It's a it's a it's their, uh, cashback. And, also, the CMS is working in my accounts, like, um, is basically the server side rendering with static side generation. Static generation is, like, uh, led us to create custom pages. Uh, it's it's totally dynamically, uh, totally dynamic to dynamic to create that entire website with, uh, which we can able to create the good UI and also, uh, the number of UI we can able to create, like, through the Strapi. It's it's not it's not like it's we don't have any limit. So it depends upon us overload. It is, uh, taking the it is it is, uh, auto scaling the website. So the performance will not get affected due to this. And, also, we are tracking the Google Analytics for tracking the, uh, user engagement and also with Clarity Code. So both both products are supposed to create a, uh, trackage for, uh, user engagement, and also we are using the Google Tag Manager for user ID tracking the Google Analytics. And also, uh, we are creating the code base with proper AWS server for, uh, deploying the good product and also, uh, the code will we are we are using the usable code with usage of reusable code techniques, uh, since we are using the next JS. So it is totally component based. So so that we are help that help us to create the reusable codes. Like, uh, let our user to, uh, take the let our user to register their mobile number with our page using the, um, Google using the using their, uh, web using our website creative website. So that will help us to track the users to, uh, in the user to retrieve the track the user data into our

    Yeah. I have worked with the Next. Js and React. Js, both technologies. So Next. Js is basically the React. Js framework. So, um, in my current organization, I've been working with 2 projects called, uh, in the platform. The project name is called platform and the website. So the platform is, uh, totally the front end based, like, since we are developing the game. So, uh, we have we have we should have the control called admin panel. So So admin panel, we are developing that using the React and Redux. So Redux is for provider state management for, uh, managing the state uh, globally. And also the next JS, we are using the website called Ramivos. The website is totally live since we are achieving the good, uh, good user engagement and, uh, good score and, uh, good SEO score also with page speed and SEO. So the page speed itself, uh, we are achieving the, uh, reusable code that help us to, uh, let our let our, uh, website to load as much possible and, uh, load very fast. And, also, we are integrating the Scrappy CMS, uh, with our Linux support. The scrappy CMS is basically the, uh, it's basically the, uh, headless CMS. So so they instead of, uh, instead of using normal CMS, like, traditional CMS, like WordPress, so we are using the headless CMS with Strapi. So the Strapi let us, uh, let us to create the custom pages and website and also let us to create the custom HTML in each pages. So that help us to create the dynamic unlimited dynamic page. So since since the performance is not, uh, not affecting the patients, we are using the auto auto scaling technique with the AWS server. So, uh, the UI, when you have come to the UI, the UI, we are tracking the, uh, Figma file. So using that, we are creating the, um, response UI with, uh, by using the technology, the app bootstrap technology. So and, also, we have implemented the bootstrap for creating the, uh, writing the simple HTML code with, uh, React JS. And, also, since we are using the bootstrap, right, so that help us to not not, uh, not to write a lot of, uh, media queries. Since we are using this SaaS product as a CSS, so CSS is basically the, uh, preload of CSS. So the CSS we are, uh, saying, we are achieving the dynamic UI and UI and UI enhancement with, uh, programmatic conditional code. So in the SCSS, we are, uh, through the variable, I can declare the, uh, reusable color with the entire website. And, also, I'm implementing the PEM architecture, the EM architecture with our UI for, uh, creating the, uh, custom reusable code. Since we are using the this totally the component based architecture, So next year, we are using component based thing. So, uh, the page is loading separately and component is loading separately. So we are just loading the component into the pages. So next year, we are using a page router because, uh, my plan does not next year is is 13 only. I'm trying to upgrade, but, uh, it will affecting the UI since the case, uh, I'm just thinking of, uh, trying to update our next JS without affecting the conversion. And, also, uh, we have the we have a lot of features. Uh, mainly, we have we have the feature called the dynamic dynamic creation of web pages and blogs. So since we are using the, uh, Strapi CMS, so that help us to create dynamic web pages through the Strapi CMS itself. So, uh, that'll help us that'll help us to create the, uh, reusable UI also. And, uh, since we are, uh, using the Strapi, I'm using to develop the hist user user develop the HTML with Strapi itself and that will that enables us to create the web pages dynamically and the blogs. And, also, uh, for API binding, we are using the, uh, uh, Next. Js. I mean, we are using Next. Since we are using the Next. Js, which is like, uh, server side rendering and static side generation. Server side generation is where, basically, we are using for the block pages, uh, for the, uh, for that later log load and so on. It's the initial initial page load. So user can able to see the view UI, uh, created UI as soon as possible, uh, which which means it is we flow the page very slow, very low. But in dynamic pages, we are we are creating the lot of contents. So since we are using that, we are, uh, we are using the static site generation, uh, thing. So that helps us to help user to see the we paid it. That is that is the the content is initially loaded, and that will, uh, send to the

    Yes. I am familiar with the storyblock.com like CMS. So CMS itself, we we are we can able to create a custom UI and, uh, custom, uh, lacking features through the CMS itself. CMS is basically used for the back end integration with, uh, Sprintend. So we can able to integrate the real JS and mix JS using the graph. Nowadays, we can able to create, integrate, and integrate the those in the Sprintend. And, uh, since we are using the CMS, we are mainly focusing on the web page speed and the and mainly since we since, say, the CMS is mainly targeting for business based applications like the ecommerce and, uh, yeah, and etcetera. So the product based application also we consider as a service in production means, uh, it's a it's an ecommerce only. So ecommerce, we have to, uh, we have we have to face the we have to see we have to consider the page speed since we are using the CMS. So CMS itself, we are using the page speed. Page speed is like, uh, reducing the reusable code and using the custom hooks. So since we are using the React JS as a front end, that'll help us to create that'll help us to bind the data in React JS, is, um, through the component. So the component user will be that help us to create that page area, uh, that request to create that page, uh, so reusability. So due to that that, uh, that avoid the, uh, low page speed to very low. Uh, so that will help us to, uh, developing the pace speed as soon as, uh, good good as soon as it's resetting the good score. The React JS is, uh, since we are using the React JS, we can able to integrate the front end UI like, uh, UI library like material UI or, uh, Reactstrap, Reactstrap. I mean, re extract you re extract and re extract bootstrap. So I'm just I'm preferring the re air bootstrap for creating the, uh, custom UI. So and also, tile in CSS that is, uh, comes with an exchange in Berkeley. So the using the tile in tile in CSS that is class class based UI. So to through the class based, we can able to create the custom UI with the custom and, uh, it got to help us to in the render test to create the UI, uh, UI, um, me as per the media query. So that will respond that will create the response UI with good, uh, good few good look of features. So the storyblock.com is, like, basically, the CMS that is and it is a headless CMS. So that it goes to create the basically, since we are using the headless CMS, we can able to integrate the back end, uh, that CMS with the any kind of, uh, any kind of front end library like React or Vue. Js or Svelte. But also, we can able to integrate that with the Next. Js also. Next. Js, since we are using the Next. Js, that will help us to create the SEO friendly. So every feature sees are in built. Now the Next. Js has feature called approach. Js that will help us to create the admin panel also for from the back end. So, see, we are not going to that way. Uh, so that we are I'm just suggesting to create the next JS to it, the page loader since we are using the storyblock.com. So we can able to create the dynamic pages through the strategy, uh, uh, I mean, the story block. So the story block let us to create the dynamic pages that that we've integrated with, uh, Next. Js. So, basically, Next. Js is only for the front end tool. So then my our entire website power goes to the storyblock.com. So we have to in this case, we have to look at the website performance also because the story is story got CMS in itself. It's not a client. This is story of the server based. So entire code has been loaded into the service. So we have to consider the loading time. So in the we have to consider the initial loading. Whatever the content we put, any kind of content we have put, so we have to consider the loading particular loading time of

    Yeah. Maintaining and update my update my plugins and ensuring its functionality and compatibility with CMS. So that will be the, uh, that will be the, like, uh, risk risk taking the risk. But, uh, updating the plug ins is, like, uh, it will affect the, uh, entire website that will that will, uh, collapse our website in, uh, good way. So since since we are using I'm using this Trappy CMS, so, uh, I'm not updating the any plug in, but I can update But if I can if I update, so that will collapse the strappy that will collapse the front end also since we are using the Next JS. So in our case, I'm using the Next. Js as a tool, Andy, that will display our, uh, UI tool. So the entire, uh, website with the HTML is loading from the back end. I mean, the only. So that will be, uh, that and that will that will be available through the browser. That will be, uh, with the attachment with the browser compatibility. And the functionality itself, uh, yeah, the functionality itself, we have to we have to integrate the custom functionality like, uh, auto deployment. I mean, the auto, I mean, the auto auto publishing the blogs. So since we are, uh, using the case, since we are developing the game kind products, we are, uh, running their offers through our website and promotions. So we have to do the those offers with particular time. So the starting so that we have to put the starting time and ending time of the offers. So the starting time, we can put any time. The ending time, we can put any time. But, uh, when it's come to the starting time or ending time, the starting time will create the auto publish, and the ending time will create the auto publish. Through that, we are, uh, enhancing the cron job. So the cron job will push to create, uh, mainly use for running the particular operations, any kind of operations for particularly, uh, like a time interval. So that will check our event, uh, timingly and, uh, let our operations work, uh, efficiently. So using that, we have achieved the the blocks auto deployment and, uh, auto and publish. So since we are using the, auto scaling auto auto scaling feature of our end server, so we are, uh, loading the lot of content in website that will that will not affecting the affecting the website website performance. So the performance metrics, and so we are tracking the performance through the Google Analytics and, uh, to the, uh, tools like Kafka and, um, 24 cross 7. So that help us to, uh, look at the user engagement and, uh, tracking the spikes between, uh, the when the user is trying to attack them when when the hacker is attacking your website. And, also, sometimes, uh, through the logs, we can, uh, we can track in the what have. We can track in the event, uh, actually what happened on that particular event so so that we can securing our website. Since we are using this Slack CMS, we are, uh, it is very security. And also implementing the CMS, we are the plug in, uh, we can able to create in 2 way. So the plug in is available in the market, and also we can able to create the plug in which we have some procedures. So we have to create the object oriented procedures so that will help us to create, uh, inputting our dynamic input that will, uh, get out through the plug in and, uh, the operations will done, uh, the training error. So using that, we are tracking the error method through the developer tools. And also, uh, we are debugging the, uh, uh, efficient debug. Uh, we are engaging the good, uh, good core base. And also that debug help us to cater cater plugin very quality. And that help us to lead the plugin creating the plugin myself and update options will available in the market.

    Since we are, uh, okay, so, uh, we are, uh, using the interface interface, uh, interface feature in the in the typescript. So interface feature is only for declaring the, um, um, declaring the, uh, what kind of types, what kind of, uh, tracking the types, and that will that will write that will, uh, how could I see? Yeah. That will write our condition to creating the, uh, getting the in getting the argument which types it is so so that we don't have to, um, put the question mark in the interface. So each have a question mark for, uh, that is basically it's it's not a it's not wrong. So, uh, we have to avoid that. So it seems like, uh, it's checking if we have each, so then it should be the number and that then it should be tracking into the then it should be, uh, loading to the function. So if, since we since we are, uh, engaging the condition with the user dot h, so we don't have to con give the ternary operator within a number. So, uh, it's simply the the interface user is only for the typing, uh, tracking the types. So, uh, the interface user will be the name, it should be the string, and a should be the number. So that question mark be uh, it said that the question mark may vary shouldn't be come. Also, uh, function great user. The user is like, uh, we are getting the, uh, interface with users. So after that, we are using the, uh, user. So you if user has a, the that will return the hello with username and, uh, you want the different issues or else is, uh, yeah, if the age is if the user has age, so then it should load the first condition. RSR should show it should load the only one condition. So, uh, we shouldn't perform any operations or condition in the interface, uh, interface user. So every operations or condition should play should be, uh, should be performed inside the function only. The interface user is purely creating the objects. Uh, it's not for creating the conditions. Since we are using the user age, the that will conditionally rendering the age. If if age is if age is available, so let our then let our user to load the load our username with the age. If age is not, uh, exist, so then it will return the username and the origin. Your name is unknown. So if I have an option, I can able to write the code, but, uh, I don't have an option to write the code here. So this will be the condition. So it should be like the interface user. Uh, the name should be the string and a should be the number. It shouldn't have any condition. It's purely an object, and that object will help us to tracking the argument types. So what kind of argument we are getting, like, if name is, like, uh, name name we are getting, name should be the string. Yes. You are getting the issue with the number. If we have we don't have the tracking object, we can put down put any instead of the data types. So that will help us to that will help us to create the function without the any issues. This is creating the issue.

    Please detail you mentioned. Lazy load the 30,000 to be just there. The detail method in the lazy loading third party JavaScript which is in React. Js and Mix JS file ensuring they are remain So So that will that is in, uh, that is in both input, uh, plug in. So, also, in React, the MUI, we have an option for creating the lazy loading server side rendering. So in next years, we are reusing the server side rendering options, uh, that will that is in build the SSR options. So, um, that have a property call easy loading, so we can put our, uh, number of minutes that will, uh, number of seconds, milliseconds. Milliseconds. After the milliseconds, it will be load. So that case, the content will, uh, entirely load in the server, then it will bind the UI into the, um, into the front end. Since we are using the Next. Js, we can able to, uh, we can able to write the, uh, custom UI through the from the back end itself, the React also. Um, Yeah. So server rendering, that help us to create the, uh, plugin. That help us to create help us to create a, uh, good performance for the application. So, um, in JavaScript, we've in JavaScript, we just, react the measures while we're ensuring their remain ensuring ensuring their remainder functional after the server side rendering. So the lazy load, uh, lazy load, uh, 40 JavaScript widgets in the reactronic shares that help us to, uh, load the functionality, uh, when it's circuit. So the lazy load, I'm using the suspension, the reaccess mentioned that help us to create the will help us to create our page load very whereas on a good performance. Though whenever the whenever we're recurring the page page, that'll just create the let us that help the impulse tool that let us to loop the functional rendering. So this rendering help us to, uh, loop in other in a load of function, edit function. So we need to as for the care, uh, care one. So that will be that will be showcase our website or showcase our web application very likely. So, uh, since we are ensuring the remaining the functions after the next share is rendering, so the lazy road method is, uh, we have the 40 JavaScript, which is what I'm using this suspension, this word suspension called, uh, suspension option. So, uh, ensuring the remaining functionality after there was a rendering that the 40 hours of the test in the DX, uh, DX last initial is your publications while ensuring the remain, uh, functional severance. Since we are the this method, I propose to create the website, which is, uh, where it performs very good, uh, good and, uh, great loading. So, uh, the tech audio applications are not using. So we have to avoid the tech audio application integration since we are, uh, trying to achieve within the as soon as, uh, as soon as our custom won't works because that implementation of the party application was separated, but, uh, for some for some only for the separate option. So that is loading the entire plug in for, uh, website. So that is not good. So that will affect their page speed and, uh, perform application performance. So we have to we have to calculate the millisecond itself. So with the we have to achieve the millisecond slow. So we have to use our own which is to implement the reusable technique. So this negotiation is used for the page speed. So since we are using the hooks like use memo and then, uh, use use for memo is our website. And, also, since we are using the callback function, use callback function for, uh, loading our web loading our, uh, API when it's recorded. So that's all.

    The state consistency. Making the state consistency in distributor systems, we are we can use the custom states objects like, um, if the condition is required, uh, small kind of operations, we can use use context stub, use reducer for tracking these dates. And, um, see, if we are if we are if you are, uh, operating the big big application big scale application means that that they care to create the custom object, that they care to create the, uh, uh, the require to use the requires to use the react state management, uh, Redux library. So the Redux library is a third party library for my maintaining the state, um, globally. So in in the reducts library, we are using the, uh, global state for storing the state globally. And then, uh, and whenever it's declared, we we can take the state from the, uh, store using the reducer and using the dispatch. So that will dispatch our state to the recare reducer and reducer will cause to load the conditions and the actions will help us to, uh, action will hold in our, uh, operations, uh, I mean, our logics. So that will that will help us to write the code in, uh, rendering the UI. So, uh, this is avoiding the component ring because, uh, in React JS and since we are using the React JS, it's totally the component base, which means the parent and the parent have 2 kind of, uh, child. 2 kind of child will have 4 kind of child. So it would be like a generation. The 10 the generation itself, uh, since we have to track the state, uh, track the state of 10th generation from 2nd generation. So with the by using the by tracking this, it is very difficult to do the component link through the pops. Through the pops, you can we have to communicate the, uh, second to 3rd, 3rd to 4th, 4th through 5th, and 5th through 6th, and 6th through 7th, 7 through 8. So that will avoiding the, uh, good performance. So the total our performance is totally down. Since we are using the, uh, react to our detect state management, the retext help us to create the global state. So through the global state, um, they feel approaching the store which I'll send the state from the 9th generation. The 9th generation is reflect the state to the 2nd generation through the state. So using that dispatch, so we are dispatching the state to the 2nd generation. Uh, reducer is available. Reducer is there to tracking the, uh, application tracking the application actions along good logics. The logics are, like, uh, we are using the logics in the state consistency for maintaining the distribution system in the rear frame 10 and multiple APIs. Since we are using the multiple APIs, we have to use chaining method for, uh, using the callback, uh, for using the callbacks. So multiple API itself, it is creating the callback here. By upgrading this, we are using the promise method. So for through that, we are using the use callback hook. We can able to tracking the, uh, we can able to fetch the fetch the data from the API that enables to create the UI custom UI when it's required. Whenever the changes is updating is required, the that will load only the only the component. So that, uh, that will not load the entire component. So this is the basic structure. So avoiding the load of entire page and avoiding the load of, uh, entire component, that will avoiding the load of entire UI. So only the specific component will get update. This is the technology we are using in the front end in the, uh, front end, Facebook and Twitter and, uh, Instagram. These are using to avoid avoid the unwanted page load.

    Well, I'm using to determine the suitable caching strategies for high traffic mix ratio due to using the story block. Uh, mix JS itself, we are using this over side rendering and, uh, static set integration. This is totally for, uh, creating the server side and static state pages. So, uh, static site integration is, like, uh, creating that will load the pages and, uh, deploy into the UI when the when it is required. The server side load is loading the UI initially, then it's deployed to the, uh, UI as a JavaScript, then it will bind it to the our our actual UI. So high traffic in exchange are, uh, catching strategies. We are using the cache method for negotiation using that will, uh, that will caching our actions, uh, since we are using through using the browser. So, uh, using the browser API, we are using the session catches. So catching the, uh, catching the actions and the storing the storing that into the session, uh, storage and, uh, local storage or local storage is available for storing our, uh, storing our credentials or some, uh, and, uh, and our main informations. So these actions will, uh, help us to help users when they are visit they're revisiting their, uh, browser and, uh, loading the page. So it will it will avoid loading the, um, while loading the entire giving the input in their keyboard inputting their, uh, user inputting their, uh, credentials and, uh, sometimes it will easily load the through in the caching method that you will UI will get download into the browser until we creating until we're clearing the browser history, it will, uh, it is very speed to optimize. So the entire cache system, if we create this the entire caching strategy is to remove the cache for uh, implementing in UUI. It it it has to be the hit tab. So in high traffic, next issue, it was in the story block. Uh, we have to determine the suitable catching strategies. So the catching strategy catching strategies for, uh, high traffic network, uh, Nextiva site replacing the story block. Story block is, uh, completely the headless CMS for, uh, engaging the engine engaging the user for the for our business based services, uh, to service products. So the service products I can able to still, like, uh, LMS and, um, for tracking the learning management system and then the user engagement with the ecommerce website. And since we are using the ecommerce website, we can able to track the custom UI with, uh, block management. So since we are using the block management, we have to do the store. We have to do the server side rendering with, uh, custom UI. So server side rendering, we are using the, uh, server side, uh, platform. The server side platform is like in XS. We are using the Storyblocks UI. The Storyblock is, uh, based on we are creating the custom UI through the CMS that will help us to deploy our Next. Js through the front end. The front end also, uh, front end service will help us to create the load component based. So that will be create the component based optimize optimized component based. This will be the help us to replacing this story with the high traffic network network JS JS site strategies. So this will be help us to determine the catching strategies for high traffic Next JS suite. So Next JS is supposed to creating the gauge your PGI with, uh, a good performance with the Next JS traffic CMS. And, uh, yeah, any kind of CMS we can able to integrate. So using the Google case or base with optimization, we have, uh, we did this, uh, the Nextiva service to load our page page with the speed. So the that will be create 1,000, uh, page performance. Since we are using the we have to what kind of framework we are using is not a matter. We have to create the reusable UI with the story block. So that thing, high traffic mix changes are, uh, help us to create the UI without, uh, looking at the page loading.