Turjoy Saha

Yeah. The same same screen is show the first answer is now the first question came again. Should I answer it? Yeah. The timer is running out. Uh, let me ask Okay. I have to not refresh it. Okay. So cut everything I said before. I was having a technical difficulty. So cut everything I said before. Here is the answer, and it starts like this. So I have 3 years and 6 months of experience with React Native and BondStack. And I have built web apps and mobile apps, uh, in fields ranging from ecommerce app, fit fitness app, wedding event management app, e payroll management app, ecommerce ERP management app, and several other small apps. I worked as part of a great team. I worked, uh, as team lead, and I have also built projects from scratch. Other than that, I am used to writing, uh, scalable and mental level codes using, uh, low level and high level design concepts.

Yes. I work with, uh, Next. Js or React, and, uh, I have worked with Next. Js and headless CMS also. I work with headless CMS like Storyblok and Strapi. So, uh, in case of Strapi, uh, or Storyblock, what we, uh, what it does is, uh, the headless c s CMS manager manages all the stat all the static and dynamic contents, and, mostly, we can control the number of pages to display, number of, uh, the pay most of the page, uh, component content to display page contents to display, uh, those type of stuff. Uh, in case of Strapi, uh, we use, uh, we can connect directly with GraphQL or REST APIs for the content. In case of, uh, story block in case of story block, we can connect with the with the Next. Js front end using API APIs APIs directly, REST APIs or graph GraphQL APIs. We can also use the story story block library for front end and, uh, provide the app tokens of story story block CMS head headless CMS back end. And thereby, we can call, uh, use the story block in built fetch calls, uh, to fair get, uh, get or to to perform cloud operations of the content. Uh, and other than that, we can also in case of Storyblock, we we can also build, uh, dynamic comp dynamic components. We can, um, we can control the navigation of the front end from the headless CMS. We we can, of course, generate, block contents and stuff. And we can anything related to content, uh, the front end can rely on, uh, story block. Now in case of, uh, in case of in case of, uh, block contents, we can optimize the front end and story block, uh, uh, by passing the story block API calls in the gate static props. And, uh, thereby, the story block APIs are called at the build time and the pages are rendered. Then the pages rendered are and the pages are rendered with the API data during build time only and stored in the back end. So when the client side asks for the pages, it gets the page with the data without any API extra API call on the client side. This makes the page load very faster. In case of dynamic components, of course, we want to render the, uh, API calls in the server side. And for that, we can use get server props. And within get server props, we can use we can call the, uh, story block APIs, uh, using direct API call or using story story block library library like that.

Storyblock has specific guidelines to, uh, build the plug in plug ins. Uh, suppose I am building a plugin for suppose I am building a plugin for auto save, uh, auto save when I'm editing some editing a document and but not publish. Just auto save and not publish. Then I will, uh, then the plug in will be using, uh, will be having access to the markdown that saves the content or the SQL that saves the content temporarily. And then, uh, it will be executed every every time there is a new content added to this to the, uh, story block added using the story block, uh, UI, call content manager content manager UI. And, uh, thereby, it stays. Then we can connect the plug in, uh, with Storyblock, and the plug in will starts working, building on the temporary update. Then only when we publish, the permanent update is delivered, uh, to the main markdown or SQL. And then we can to ensure compatibility, of course, uh, there must be followed an adapter pattern, uh, so that if the if the if Storyblock upgrades, uh, if Storyblock upgrades, sometimes the plug in doesn't break, uh, and only the adapter needs to be updated. So all the plug ins dependent on the on that functionality of Storyblock doesn't break themselves, uh, or if there is there are breaking changes in the update. Then we can also use, uh, like, yeah. That's it.

The most complex websites are base use are usually dashboards and, uh, and drag and drop creations. So there was this website which, uh, had a lot of dynamic table contents. I used a table I made table builder component to for future, uh, future ensure ensure for ensuring that in future, whenever the table grow, uh, table grows in requirements, the, uh, table can't. There there does is an there is a builder in place. So, uh, single responsibility and closed SRP and OCP are followed, and the code, uh, doesn't need to be there. Uh, there won't be any redundant quote to be written to be written. And I also, uh, I also built a map. So there was this functionality of building the layout of a, uh, floor, uh, endpoint and placed the anchor locations so that the tags that are moving around, uh, close to it are can be shown relative to the anchor positions of the floor plan. So the floor plan to draw the floor plan, I created a a complex canvas. Uh, h t m I used plain HTML canvas to build, uh, the map map map builder, and then I implemented it. And and, yeah, there were many complex filters, uh, and Lottie animations when, uh, when there was some there were when since the table, uh, showed update since some of the tables showed updated, uh, values some of the tables showed updated, uh, values and variables. So some of the animations I built using, uh, Some of the animations I've made using. Some since the tables were yeah. So there were filters complex filters, and, um, I created a global state management using Redux and, uh, Redux tool to manage the complex filtering processes. And, also, it helped in, uh, at the web prop trading, uh, for several com several components. Uh, the code was very scalable using because of it, uh, using the both of solid principles and atomic design patterns to structure the components. So the components were reusable, and, uh, in the time, there were new progresses were not, uh, taking much time. Other than that, uh, there was also user management in that. So user authentication management and security was handled quite, uh, properly with the help of HTTP cookies and session managers and local storage also. Local storage in case of, uh, uh, some filters, they were local storage. Um, other than that, there were, of course, there were animations, uh, naughty animations I implemented. And so, basically, that's it, uh, complex. Uh, the architecture was basically, uh, following solid principles, dynamic design patterns with a concrete, uh, redux with a concrete redux store, uh, which was a separate bundle from React. Uh, then there were maps, uh, map for floor plan builder. There were yeah. That's it.

Storyblock.com is a headless CMS. So what it provides us with the are the APIs that what it provides us is a content manager. So we can manage component, uh, UI components. We can manage the written contents to be displayed. We can manage, uh, page pages to display in the website. We can also do custom dynamic components. So all of the front end content any anything related to front end content can be controlled using, uh, Storyblok. So we can integrate Storyblock with several front end frameworks like Vue. Js and next Next. Js. Uh, in case of Next. Js, Storyblock provides custom library for React, and we can call that library, uh, to fetch the API data, uh, using the REST API or Graph QL calls. Uh, we can also have access to Yeah. We can secure the token in the front end side, of course, with the environment variables. Yes. So, basically, uh, Storyblocks is a very enterprise level content manager for front end. So, uh, that's how I have used in front end in my own blog website. The navigation page and the pages to display that is the navigation that are tied that that are tied in the pages and, uh, the dynamic components or, uh, in case of blocks, the static components are used to get static props along with images to, uh, to to build, uh, pages with contents using, um, using the APIs of of Storyblok. I also for server side rendering of dynamic data, there was, uh, gate surface static props was used with Next. Js. Yes. And for, uh, components of every page also, it was decided by the content manager of Storyblok. The Storyblok UI Storybook also has the has, uh, options to add plugins to it to improve functionality and control of the user. Like, uh, some users prefer auto save while, uh, while writing before publishing. Uh, so we can add add our plug in to Storyblock also, or we can build our own custom plug ins also.

So, um, in my case, I I needed the number of I needed the number of views in my blog. So what I did was there was no view counter in inbuilt, uh, so I I found the location of, uh, in case of Strapi, I built that. Uh, in case of Strapi, the I list I list CMS. Uh, so I got control I got access of I got access of the controllers that were man that were, uh, managing the transfer of data, uh, like, when a request is made from the when a request is made from the client side and the the controller has access to the request body. And from the request body, I can get, uh, the I got the user IP, uh, to detect the if it's a unique user or not, and then, uh, I create I had my own database in the SQL to I I made that, uh, view scheme. I added the views in the schema of the content and, uh, increased the view whenever there was a new IP coming up, And, uh, that's how I developed a new feature in the headless CMS. I modified the back end code of the headless CMS.

Well, Storyblock provides us with the headless CMS, uh, and CMS as well. So developing in Storyblock has, um, not only provides us content manager but also sometimes a good front end. And, uh, if we want custom front end, we can also integrate Storyblock with next Next. Js, Vue. Js, or other frameworks there is. In case of, uh, Storyblock, the APIs can be GraphQL or, uh, REST API. In case of and in case of WordPress, WordPress is just a full full CMS. It doesn't provide any APIs per se. Uh, Magento is also like WordPress, and it's, uh, similar to WordPress. It's also built with PHP. Shopify is also built with PHP, but it's focused mostly on delivering ecommerce. Uh, but it also helps for a blogger. It also helps bloggers. In case of Shopify also, it, uh, Shopify, it provides us, uh, besides providing a full fledged CMS, it also provides us APIs so that we can implement, uh, our own custom front end using our own preferred framework. In all of them, we can build our custom plug ins to add functionalities based on our requirements.

The main error we can see here is that the code actually aims to define whether the, uh, age parameter is present in the user object, but, uh, the age parameter won't be is not might be present and might be not. If it's present, it's a number. But, uh, question mark, colon age question mark, colon, number doesn't say that. This line should be age colon number hyphen undefined. So that means the age can be a number, or it might be that it's not defined. That is the error. That, uh, question mark colon should not be there. The goal is to provide the type of age as number or undefined. So we will write numbers, colon, undefined. Number, uh, dash, uh, straight line, dash straight line, undefined. Number or undefined.

The best way to handle this is to use, uh, promise, uh, is to execute promises. So So independent promises, uh, should run. So we can do a promise all for we can call, uh, promises that are independent independent or dependent. We can group dependent promises together and call all the promises at a time using promise call. And we can, uh, of course, maintain a memoized update of the promised returns. Um, and whenever there is a change in the prom in a particular promise, we only call that particular promise to only when there is a requirement for particular API call. Uh, we we only call that API at that moment. Otherwise and reenter the component. Otherwise, we use the updated otherwise, we use the memoized values. And, also, since the process since the promise, uh, the promises promises will be non blocking, so if the the promises will be non blocking. So if the I So the process of the promises can be, uh, can run, uh, parallelly so the promises can run parallelly without affecting the results of others if they are not dependent to each other. Uh, then whenever the promise is resolved, only then we update the local states, uh, and the components dependent on those local states will be updated. So, of course, we have to follow a single responsibility principle and open close principal here. So in case of, uh, so that the component, uh, and we also have to avoid prop drilling. Uh, so, uh, it's better to use a global, uh, it is better to use a global state manager like Redux in case of React. Or in case of SolidJS, just use create store. And using that global store, So and, of course, we have to check for transactional integrity. We have to check the we have to check the data types, uh, for the operations before submitting or while submitting. And, uh, of course, in the back end also, there should be data type checks, uh, already implemented in CMS. And that's it for in transactional integrity. Uh, all the for good manage for for good management, a global, uh, manager should be used for transactional integrity. Uh, type checking should be implemented, uh, for for good for faster component rendering, uh, memoization should be used.

So nest is basically so net NestJS basically runs on a server, and, uh, within the server so NestJS basically runs on a server, And when we deploy to the git when we deploy to the GitLab or GitHub, we can, uh, in the in in our pipeline code, we can, uh, we can ask to run the tests first. We can ask to run the Lint first, to run the Lint then so that the code Linting is alright. Then only after both of these processes are successful, then only the deployment the build, uh, the build happens, and the build, uh, build software is, uh, deployed is deployed to the, uh, port that, uh, that is available to the outside world. And that's how I would automate it, like, first, glinting or first, glinting and testing, then deploy then building the app, then deployment from the server.

To me the best practices for maintaining scale consistency is to use a type safe, uh, language like TypeScript, uh, to use a global state manager so that so that state groups remain independent of the of updates from other states and, thereby, don't, uh, offer multiple useless calculations useless hyper high useless calculations. Do not perform useless calculations. Also, in case of component rendering, we should use memoizations so that component doesn't rerender, uh, uselessly if even if, uh, its data doesn't change, even if its props doesn't change. And, uh, yeah, that's it.