Vipin Pandey

Uh, could you help me about and by giving the hi. My, uh, hi. My name is Viven Pandey. Uh-huh. Hi. My name is Viven Pandey, and I'm from Bhopal, Madras, India. And I have around 3 plus year of experience in, uh, in, uh, in software development. Uh, I have around, uh, I have worked on React JS, Next JS, uh, and I have worked on CMS Storyblock also. So in my starting journey, I have worked on, uh, I started, uh, in my starting journey, I have started my work with React JS and, uh, then learned, uh, Next JS and I upgraded the website, which is avaj.com, an audio podcast website. Then I have also worked on, uh, created a CMS for the, uh, for the same avaj.com website in React. Js, uh, to kind of upload the, uh, so so the content team can upload that, uh, data from the CMS. And, uh, now, currently, I'm working as a developer. I have worked on the, uh, uh, the current company, the additional website, which is in may build on Next. Yes. And Storyblock. And, uh, I have also worked on the, uh, headless project, like, uh, maybe I have created a website using, uh, Next. Js, uh, Rig. Js, uh, and I also use a CMS, a Storyblock, and and, uh, the CMS has, like so Shopify has a CMS also. So that's it. Thanks,

So, uh, more complex website is like we are, uh, we are created a, um, a website, uh, which is an, uh, which is an ecommerce website. Uh, this this is our first project, uh, um, for the company also or for me also to, uh, to work on the next years as well as, uh, the so Shopify CMS. Uh, so so Shopify has a CMS. And, uh, to, uh, to start with, we we have, uh, worked on the, uh, we have we have we have researched on the, uh, APIs that we are going to use while creating the website. And, uh, we have used also the, uh, Tailwind CSS, uh, to implement in our website to look like it's more handy to use. And, uh, and apart from this, I have worked on the I have an, uh, kind of a new project which, uh, which I have worked on, uh, Shopify apps, which is a subscription app. So I have to I have to make use of a third party library, uh, which is. So, uh, this is also new for me, and, uh, we have to create, uh, like, you know, that client, uh, requirement is totally different. Uh, it's it's it's, uh, it's like, uh, we have to create our own custom, uh, solutions for that. So it's mix yeah. It's hard, but we able to do that. And, uh, we have, uh, employed in a better way. Yeah. So this this is all work.

It's functional. I'll explain brief how you maintain and update the plugging yourself. Completely the CMS. So, uh, for the for the CMS, uh, what we can, uh, what we can do is we can use, uh, make use of APIs as well that, uh, the REST APIs or the GraphQL API that CMS provided. And, uh, we have also uh, the NPM package or, uh, the plugins, uh, that we can use, uh, to make use of uh, make use make use of that CMS. And, uh, for me, the plug in was good because, uh, we won't have to make a lots of API call. We have inbuilt, like, functions that we can use, uh, through, uh, through the website. And, uh, yeah, we can create a more more faster development. We we we, like, create a like, be able to do a more faster development. So yeah.

Story level. So now for the Shopify and, uh, for the Storyblock, uh, for the story block, it looks awesome, uh, because we can create a blog's content. We can upload the content. Um, like, we can see, uh, we can modify our APIs. Yep. So it's good to implement. I've we use the API version. We we implemented through the API. We created a a deal. For the code's perspective, we created a different separate separate file where we have all the APIs that we want to implement. So and, uh, we have also used, uh, the the mono repo. So we we kind of create an API, uh, and keys, uh, we are getting from the API. We modified that keys into our own keys. Like, uh, suppose, let's say, uh, there is the field name, uh, is less photos. So so if we want to, uh, like, suppose, uh, in future, maybe change to some something else. So, uh, for, uh, it's it it is it it's not easier to change everywhere. So what we can we have to do, uh, we we do is we, uh, we take up that parameter and and rename its it's like PIX that we are using on all all over the website. And, uh, and and what we what we do is, uh, like, if suppose in future we, uh, some name was changed, then we have to change only in one place. So that's, uh, that's a whole story. So the Shopify, uh, yes, I have worked on Shopify as well, uh, at a part of CMS. So we have, uh, make use of the GraphQL APIs of the Shopify, and I created a successful website and, uh, launched it also. So yeah.

So yeah. Uh, as the previous I answered, uh, what we have are, uh, like, usually, uh, like, uh, every application, uh, every third party application have updates. So, uh, we face a lots of issue, uh, regarding the field change, name change, and this kind of, uh, is also, uh, the the duplication issue. Uh, so what we we do is we basically, uh, go to the API and get the fields, and we make it in our way. Like, uh, we create an we we call an API uh, and, uh, set that keywords, uh, in our own, uh, understanding. Like, if suppose if the if the keyword is photos, then we, uh, maybe in few future, it's changed to profile pic or, like, let's say, a feature image. So what we can do is we we take the key keyword, and, uh, according to, uh, our requirement, we change, like, let's say, a pick so that in, uh, in our whole in our codes, we use picks. And suppose in feature, it change to feature image URL or a feature image, then we only we have to change only in one place. So, uh, that's, uh, that's the hack that I have used, uh, to make seamless work, uh, to my as my advertisement.

So, yes, I have used in a story block. Uh, so so we story block is the same as the back end where, uh, we can make use of all the fields, and, uh, we can, um, create a blogs blocks and, uh, and the contents inside it. So, uh, we can make a sections out of that blocks and, uh, content. So, uh, we can, uh, create we can take and, uh, call in APIs, uh, for that particular section on that particular page. And, uh, according to that, we can, uh, create our own we we can create a UI and render it, uh, according to the, uh, response that we are getting. So so and, uh, for the production, we we have a, uh, we have a publish key where we have to when we publish this, uh, that we have created in some something in the Storyblocks CMS and we publish it, then it it'll be so in in the production or, like, in the APIs person. So yeah.

So, yes, I have worked on the and as well. So, uh, uh, so have a, uh, functionality of, like, a Bluetooth functionality of reusability of code. And, uh, same in, we have the functionality where we can use, uh, like, server side server side and as well as client side as well as statics. So, uh, I have used make use of this, uh, for the dynamic component, like, uh, for the let's say let's example of a blog where blogs have a a a have an ID of different uh, we have a blog and then blog pages with with the different different blog IDs, then what we can do is we can make use of a dynamic component like client side or a server side so that we can, uh, uh, we can render it dynamically for for the static pages, like dashboard or now the the pages that, uh, haven't changed, uh, frequently that, uh, that we we need to make it static. So, uh, then this way, we we have a more faster UI, uh, and we make use of, uh, Next. Js in a better way. So those for the CMS, it's, uh, it's a it's a it's make it's it's make our, uh, like, for the, uh, for the front end developer, it's kind of a a field that I know, uh, from, uh, from and I I can create, uh, my own back end through, uh, by looking to the, uh, UI, uh, that what I want from the back end, and I can implement, uh, according to that. So that's

Please explain what is going on. So yeah. So in this, we we are creating a sync function and, uh, according a function inside the, uh, u useEffect itself. So what we can do is here, we can, uh, we can take that function and, uh, out of, uh, that useEffect, we can only call that function, uh, inside the useEffect hook. So so it so yeah. So it it it looks looks greater, uh, and, uh, yeah, it's really more. Yeah. Apart from this, everything looks great. Yeah.

Currently, right. So so for this, uh, I, uh, what I have understand so, uh, from this question is how can I implement in a better way, uh, for the CMS? Right? So, uh, to implement the API, what I first do is, uh, I'll create, uh, an separate uh, separate folder, separate file where we can, uh, make it first, I'll take taken an exeos example. So, uh, we create a separate, uh, like, a template of where we can pass a different different API URL. And, uh, yeah, and we receive, uh, receive and, basically, we create an export function, uh, where we pass in, uh, pass in URL and, uh, we get the and we we get the data from, uh, from there. So doing, uh, to implement that CMS, we can what what we can do is create a different, uh, different, uh, functions, uh, so we can make use of that, uh, API call whenever it needed or yeah. So that we can do that.

So for the CICD, we can use, um, GitHub, Copilot, and AWS. And, uh, we can also use a, uh, to implement, uh, uh, the CICD pipeline. For the testing, we can, uh, use a production sorry, staging staging, and we can also use preproduction and production. So when we test, we we move our code to the staging, and then we we test internally. Then we, uh, after after that, we can move it to the preproduction so, uh, uh, that people can test it and, uh, like, it's, uh, launched in house. Then after that, we can move it to, uh, production.

So for the for the caching, we can use the sorry. Uh, we can use, uh, the static generation, uh, like, uh, for the website, uh, for the, uh, web pages, which is, uh, not dynamically generated frequently, or we can also use for, uh, like, for the client side, uh, like I'm sorry. For for the for the dynamic pages, we can also use this, uh, but, uh, we can also, uh, like, uh, update our cases using, uh, the revalidation. So