DEV Community: Desi-Codes

Build and Deploy Kanban Web App (React.js, Firebase, Drag & Drop, MUI v5, Zustand, Security Rules)

Desi-Codes — Mon, 10 Jul 2023 09:26:11 +0000

Welcome to an exciting tutorial where we explore the creation of an exceptional web application using the latest features of React.js. Prepare to unlock the full potential of your programming skills as we delve into cutting-edge technology.

Live: https://flowboard-b0f9e.web.app/

Watch now: https://bit.ly/3XL4z3B

In this tutorial, we'll demonstrate how to build a powerful and dynamic application using the latest version of React.js. We'll also incorporate Firebase, a robust backend solution, to enhance the performance and functionality of our app.

By leveraging Firebase, we'll tap into its various components including Hosting, Emulators, Firestore, Cloud Functions, and Security Rules. These features will enable us to create a secure and scalable backend infrastructure for our application.

To simplify state management, we'll utilize Zustand, an efficient state management library. With Zustand, we can easily handle the application's state in a streamlined manner, eliminating unnecessary complexities.

Additionally, we'll take advantage of Firebase's deployment capabilities to ensure our app is easily accessible to users worldwide. Deploying your application using Firebase is a seamless process that allows you to focus on creating an exceptional user experience.

Join us on this captivating journey as we combine the latest advancements in React.js(+ Custom hooks), Firebase, and Zustand. Unleash your creativity, enhance your programming skills, and build a remarkable web application that will make an impact.

Get ready to elevate your development prowess and embark on this thrilling tutorial adventure. Let's create something extraordinary together!

Working with Modals in React.JS | Context API | MUI v5 Dialog Component

Desi-Codes — Sat, 04 Mar 2023 11:16:55 +0000

Modals play an important role in any medium to large size of application, they are used for multiple purposes - Confirmation Box, Alerts, Displaying UI (Login/ Sign up) so it's no secret that Modals are integral to any application nowadays.

Dealing with Modals become cumbersome as the application grows, as there are certain challenges which come along the way - Too many modals, re-using (opening) modals from different parts of the application(different screens), Passing of data to the modals, etc.

In this tutorial, you will learn how to build up an organised structure using the React Context API which will help you overcome the stated problems in an efficient manner.

We will also build a custom hook

useModal()

Check out the video tutorial -

https://www.youtube.com/watch?v=4BvvJ_HXyRE&ab_channel=DesiCodes

Next JS - Google sheet to E-commerce store

Desi-Codes — Fri, 14 Oct 2022 06:58:11 +0000

In this series, we will build an online store using Google Sheet as the data-source.

⚛️ Building an online store
🧑‍🎨 Designing the layout with MUI V5
📝 Consuming/ Fetching data from a Google Sheet
📚 Category filter based on the genre of books
🔔 Send message to a Slack channel on every new order
💾 Using Deta Database for temporary storage
✉️ E-Mail account Verification (Nodemailer and Gmail Service)

Live Demo

Project Details

Youtube Playlist

Linktree clone using Notion API and Next js

Desi-Codes — Wed, 06 Oct 2021 10:07:30 +0000

Hello friends,
In this small series, we will be building something similar to linktree. Using Notion API to fetch the data out of a Notion page and displaying it on Next Js.
By using notion page as the data source, user(you) can leverage the features that notion app provides, such as - Easily adding, removing and updating content, and even re-ordering the links(blocks). In the end, we will be deploying it on Vercel.

Pretty exciting, right?

This is a written tutorial for the Notion API with NextJS. Linktree Clone youtube series

By the end, you will learn how to consume data out of a notion page and use it anyway, for this tutorial we will be using next js.
I prefer keeping things short and simple, so it is assumed that you know what Notion is and have a very basic level understanding of Next js.

Step 1: Creating a Notion Page

The first thing we need is a notion page, which will be used as the data source.
In order for you to easily get started, you can duplicate this template
Or use the button on the left to create a new page.

!! While replacing or adding the image block(first block), make sure to use the 'embed' image option, instead of upload, as Notion provides access for only 60min for uploaded images, so it's better to use an external one, more on this later.

Step 2: Creating a new notion integration

In order for you to interact with this page using the Notion api, you need to have an Integration, which has access to this specific page.

1) Goto notion app
2) Click on 'Settings and Members' button on the left
3) Click on 'Integrations' (last button on the opened modal)
4) Click on 'Develop your own integrations'
5) Click on 'New Integration' and give it any name
6) After submitting keep the secret key at some place, as we will later set it as an environment variable in our next js project.
7) After creating the integration, now we just need to share the access of our page to this specific integration. So on the notion page, on right side top, click on 'share' button and 'invite' the new integration(it should be visible as an option). After which you are done!

If you duplicated the template, you're good to go, otherwise you'll need to add some links and image manually(again, make sure that the image is an embedded one and not uploaded)

Step 3: Creating Next js project

Now we need to create a next project.

npx create-next-app linktree-notion

In order to use the Notion API, we are going to use the Js SDK

npm i @notionhq/client

The next thing that we need to do is to add 2 environment variables to our project
1) Notion Secret (Step 2, point 6)
2) Page ID

We need the id of the page which we want to use the data source, it's pretty simple, just open that page on browser, and the last segment of the url is the page id

Create an .env file in the root of your project and add these two.
It should look something like this

After you've all this setup, now we just to make the request and fetch the data.
So, within the index.js (pages folder)

we will be making the requests within the getStaticProps function
We first need to create a new instance of the Notion Client

const notion = new Client({
  auth: process.env.NOTION_SECRET,
});

After this, we just need to fetch the actual data, which includes the Page title and the blocks(image + links)
We cannot fetch both in a single request, so we'll have to make do different calls

const page = await notion.pages.retrieve({
  page_id: process.env.LINKS_PAGE_ID,
});


const blocks = await notion.blocks.children.list({
  block_id: process.env.LINKS_PAGE_ID,
});

So the 'page' contains all the information about the page, within which we'll also be getting the page title
and the 'blocks' will contain all the different blocks on the page.

Make sure that there are no blank blocks, which means there is no empty text block or anything like that.
The one below, is a blank block. Make sure that there are none, in starting and the ending.

So now just need to transform the data, as these two(page and blocks) will have a nested structure.

const title = page.properties.title.title[0].plain_text;const  links = [];
let image = "";

blocks.results.forEach((block) => {
  if (block.type === "image") image =  block.image.external.url;

    if (block.type === "paragraph")
        links.push({
            name: block.paragraph.text[0].plain_text,
            url: block.paragraph.text[0].href,
        });
    });

For more info, you can watch this part of the series in order to better understand the above code.

now we just pass down these three things to our page.

return {
  props: {
     title,
     links,
     image,
    },
  revalidate: 10,
};

We will be setting the revalidate to 10 seconds, so that our project can update itself after deployment.
In case, you're wondering why we're not using 'getServerSideProps' instead. Well, we can. However, there is a limitation on Notion API's end. which is

The rate limit for incoming requests is an average of 3 requests per
second.
Notion Docs

So, as we are already making 2 requests (one for the page and one for blocks), it is better to have some throttle in between.

Now, you just need to display the content on your page in any way that you like, or you can watch the last part of the series, it's pretty small plus we will also deploy this project on Vercel.

In case, you want to compare your code with the final one Here is the link

I hope this was helpful,
I would really appreciate if you subscribe to the YT Channel and like and comment on the videos of this series

Connect with me
IG: https://www.instagram.com/desi.codes/
Twitter: https://twitter.com/Desi_codes

Building a Dictionary app in React js

Desi-Codes — Thu, 09 Sep 2021 18:48:13 +0000

In this series, we will build a dictionary app from scratch, the features include, using Public API, playing the pronunciation(audio), bookmarking any word (using local storage to save it) and navigation.

It's a beginner's level React app, in order to get started you just need to know the basics of React (components, JSX, props).

View live

Learn more + Resources

Youtube Playlist

Link Shortener (Multi-User) - Firebase and React [9.5 hours youtube series]

Desi-Codes — Sat, 14 Aug 2021 13:07:16 +0000

Hello everyone,
I just finished up recording an entire series in which we build a Link Shortener application from absolute scratch! and by that I mean, it will be the first time for me as well.
We are going to. start with designs that I prepared in Figma and we will code it together, it includes the entire journey of starting with an idea/ design and building an actual product out it.

We'll build a full-stack Link Shortener App, similar to Bit.ly & Rebrandly (obviously it won't have all the features which they provide.)
In this application,
anyone can signup(email and password) and shorten long URLs, each link has a 'Total Clicks' counter which will be auto-incremented whenever anyone visits the shortened link.

This entire series includes, planning, structuring, data modelling and creating a roadmap of a product.

Check out the live version - https://smoul.xyz/

More Info - https://www.desicodes.io/link-shortener

Series Playlist - https://www.youtube.com/playlist?list=PLmA3URVkjqnm7n31fUF7VDhWXjeEaZK2l

Frontend - React

Backend - Firebase (Authentication, Firestore database, Cloud functions and Hosting)

Bonus: We will also write security rules from scratch.