DEV Community: Yogini Bende

10 AI project ideas that you can build in a weekend

Yogini Bende — Fri, 08 Sep 2023 12:20:58 +0000

Every day there is something new coming up in the field of AI and it has now became a day-to-day term! I know many developers (including me) who want to learn and build something in AI just out of curiosity.

From my past experience, one thing I know for sure is to learn a new technology, you have to build something using it. But the biggest question is, what to build?

We all struggle finding good project ideas and hence I have came up with the list of 10 interesting and fun AI side project ideas. Best part is, all these are small side projects which you can build over the weekend and then continue to improve it.

So lets jump in to our ideas

1. Image Captioning Tool
Develop a tool that uses computer vision to analyse images and generate descriptive captions. This can be a valuable accessibility tool for the visually impaired.

You can make it more fun by adding options to generate Instagram post captions as well :)

2. Page Summariser
An AI-powered text summarisation tool that can extract key points and summaries from long articles, research papers, or news articles.

This could be even a chrome extension that can summarise any page that you are visiting.

3. Cold DM Generator
A tool designed to automate the process of generating DMs on various social media platforms. This will assist people in initiating conversations and outreaching to individuals with more personalised.

Cold DMs or emails is one of the most struggling points for many of us on internet, so this tool can be super helpful.

4. Email Prioritiser
An email plugin or standalone tool that uses natural language processing (NLP) to analyse the content of incoming emails and automatically categorize them by priority. This tool can help users focus on important messages and reduce email overload.

I know gmail does this task very well, but it will be super fun to build an app by yourself!

5. Expense Tracker and Predictor
This one is my favourite!

A financial management tool driven by AI to help us effortlessly track our expenses while also predicting future spending patterns. By analyzing historical spending data and financial habits, this can give us valuable insights, allowing to make informed financial decisions and maintain better control over their budgets.

6. Mood Recipe Generator
The Mood Recipe Generator that give you recipe suggestions to match a specific mood and preferences. User can add input and mood indicators, and based on that this tool generates personalised recipes.

*7. Movie Suggester *
Same as food, this tool will be able to recommend movies for your specific moods, occasions, or preferences. You can also use imdb apis for this one!

8. Grocery list helper
This will make your life easier! A tool to simplify the process of creating and managing grocery lists. By analyzing your previous purchase history, dietary preferences, and current inventory, this tool can curate a better grocery list.

You can also add real-time suggestions and allows users to add items through voice commands or text input.

9. Leetcode Challenger
This can help developers in improving their coding and algorithmic problem-solving skills. Based on your coding strengths and weaknesses, this can suggest a set of challenges to target areas that need improvement and also can help you with small hints to solve problems.

You can improve this idea to so many levels like time management, skills etc

10. Code Refactoring Helper
You can make a tool that scans your codebase, identifies potential issues, and suggests improvements to adhere to best coding practices and style guidelines. It can provide specific recommendations for code refactoring, such as extracting methods, optimizing loops, and simplifying complex logic, making your code more efficient and robust.

And wait, what after building a project?

You put so much of efforts and created this wonderful project, but what if you also get a chance to showcase this project to the world and also win some cool prizes? No kidding!

If you are reading this post before 13th Sept 2023, then you can do that, by submitting your project to a Generative AI Hackathon organised by Peerlist and Replit.

Its an online hackathon and submissions are open till 13th, so create an awesome project and showcase it to the world! 🚀

Peerlist One Year Giveaway 🎁

Yogini Bende — Thu, 08 Sep 2022 06:03:47 +0000

Peerlist recently turned one, and we are so excited! We have decided to organise many community-focused online events, contests, and much more to celebrate this. This is our way of appreciating the community we have. And we are kicking off this celebration with our first writing contest!

To participate, follow these steps.

Write an article about Peerlist - mention your Peerlist profile in the article.
Publish it on any blogging platform like Hashnode, DEV, Medium or self-hosted.
Share the link to the article on social media, and don’t forget to tag Peerlist in the post.
Submit your article here

Few things to consider:

The article should have a minimum of 3 minutes read (~600 words).
A link to your Peerlist profile should be present in the article.
Post the article and share the link on your social media, like Twitter and LinkedIn. Don’t forget to tag us in the post. And submit the link to your article in this form.

Topics (not limited to) ✍️

About Peerlist: Write about how Peerlist has helped you showcase your work.
Thoughts on Peerlist: Explain what you love the most about Peerlist, any feature explanation etc.
Peerlist Stories: Since most of you have seen Peerlist growing from scratch, what have you been thinking about Peerlist for this whole time?
Professional Networking: What is an ideal Professional Network according to you, and how is Peerlist aligning itself with it? What are the things you would love to see in Peerlist?
Ninja: Other than these, any other excellent use case that we forgot to cover, but you would love to mention that about Peerlist.

Important Dates 🗓

Submission deadline: 25th September 2022
Winner announcement: 30th September 2022

PS: Submit your article as early as possible 😉

What are we giving away? 🎁

The winner of this challenge will get Keychron Wireless Mechanical Keyboard!
The top 10 articles will get a Peerlist swag box and get featured on the Peerlist blog and Peerlist Newsletter, which more than 10k people read!

How do we get things done at Peerlist?

Yogini Bende — Fri, 26 Aug 2022 06:35:13 +0000

Hey folks,

It's been quite a while for me to write an article, so I thought of writing something which I get asked many times, with a tiny team size, how you can get so much done?

Spoiler Alert! This article might not help you in coming up with a rock-solid process, but it will surely help you declutter the mess just the way we did step-by-step.

So, let’s begin!

We started building Peerlist a year back as a side project, so till last December, all the processes, how to work, how to plan and execute, all of these questions did not matter. We used to be very spontaneous in how we worked, planned, and executed. This is perfectly fine when you are a team of two people working with each other.

But after December, our team became a team of 4 😎

You must have laughed, as this is still a small number. But if you look at it the other way, we had scaled our team 2x (😂). So within the first week, we all realized we needed to develop some patterns to work. Not something with too heavy planning or following some strict sprints, but at least some way to make the execution less chaotic and more productive.

With this realization, we started finding a good way of working and finding the fitting process.

Finding our process

This required many attempts until we finally developed a better approach to working. But I will still walk you through them as they have excellent learnings.

Attempt 1: Document and work

We all always explain to each other the importance of documentation. So we decided to go ahead with that to get better clarity and to plan better.

The method was simple; we used to decide what feature we wanted to build, write down the detailed PRD and edge cases, plan the work, calculate time estimates, execute, test, and deploy.

This method works! Having things written down in front of you, knowing requirements properly, and understanding all the edge cases, helps a lot to plan your tasks in a better way. We initially loved the process unless we started understanding some issues in it.

For a team of 4 people, writing a detailed PRD was very time-consuming. Without it, there was going to have a lot of confusion and chaos; but we still had to make that trade-off. You realize this mainly after calculating the time-required vs. execution ratio.
With documentation, one mistake we made was using too many apps and creating more than one source of truth. We used Google Drive, Notion, Linear, and Github READMEs all at once, making a mess again! There are some things to consider here; being a small startup and team, you want to explore cost and productivity of these products along with the learning curve and ease of use for all. But we lost track of how many apps we used and what was stored where? So eventually, a mess! 😇

Attempt 2: Single source of truth, strict deadlines, and bi-weekly cycles.

From experience, we understood that we need to improve on two things, heavy documentation and multiple resources. So we narrowed our resources to using only Linear and Notion. We used Notion to write down requirements, descriptions, and Linear to divide them into tasks.

Linear has this feature of working in cycles and tracking down your completion percentage per cycle. I must say, this works as a dopamine hit! Every task you finish makes you feel so good because of the percentage of completion of tasks in that cycle increases.

The only mistake that happened with this approach was bi-weekly cycles. So instead of working on a single feature for the correct amount of time, we started to accumulate a feature somehow in the timeline of 2 weeks!

This wasn’t a good approach as the aggressive deadlines helped us finish only 60-70% of the work in a cycle, giving us a feeling of not achieving enough. Hence, negatively impacting all of us.

We all understood the need to change the pattern again!

Attempt 3: Parallel Working (A disaster!)

In our second attempt only, we were close to finding an excellent method to work. But as I always say, if everything goes well, how can we even call it a startup 😁

So, we went ahead with another method to work, parallel working! We have been working together for around 3-4 months now, and we wanted to improve our speed. Hence, we decided to work on different features individually rather than on the same feature as a team!

This wasn’t an excellent decision. This backfired us, and we ended up delivering nothing significant. Though this being said, after all these attempts, we got some fantastic lessons about working as a team. Here are some of them 👇

Working as a team with a single focus helps you best in productivity. In addition, it keeps your morale high because you have a team by your side; even if things go wrong, we all will be there to face it!
Working together adds a sense of accountability. You will always feel that someone is stuck because of you or someone has a dependency on your work, making you deliver things faster and better.
You all collectively think about the pros and cons of doing things in a particular way, finding solutions, etc., so you get answers faster. If you don’t know about something, there is a high chance your teammate can fix it for you!
Having less software and fewer things to update will improve your focus. You need to take care of one thing, and you are done. Decluttering becomes easy, and you know exactly where you will find that thing whenever you are stuck.
You cannot break some features in fixed timelines. Some will take a lot of time, and some will get done very quickly, and all of that is okay!
You have to give it the time it requires. Keeping very aggressive deadlines can create more mess and will aggressively backfire!
Finding the correct process is also a process. It will evolve every day.

So, after all these lessons, here is something which works best for us (at the moment). Not saying this is a perfect way to get things done, but we can ship faster with this; that is what matters, and we love it!

How are we working now?

This time, we decided to keep things extremely simple. With a slight change, we went back to work on a single feature as a team. So this is what our typical work method looks like -

We decide on one feature we want to build, and we divide that feature into smaller sections that can be achieved within a week.
Every section of a feature goes through four parts in the following sequence, design, APIs, UI, and testing.
Every Wednesday, we do a week’s planning where we pick sections considering their complexity and feature flow and decide on small tasks per individual.
We write down all the tasks in a Slack msg and pin it to the channel (Yes, on SLACK). This way, the to-do list for all of us is right in front of us. We don’t need to waste too much time switching and maintaining apps plus, whenever we miss any task, we just add it in a thread, and we are good. I can assure you that this is the simplest way to maintain a team’s task list.
Every Wednesday, we can review the previous list, find out what is not done, and add it to our new list.
We meet once a day for 10 mins just to have a small sync-up on the tasks and if anyone is dependent/blocked for anything.
For every new feature explanation, we started recording a small video (max 5 mins, thanks to Loom!). This helped us get the detailed PRD without wasting too much time writing it down.
Once done, we deploy a feature to our staging environment, test it thoroughly and then deploy it to prod.

After adopting this process, we noticed a drastic shift in productivity, execution, and delivery.

On an ending note, I would just say that every individual and every team works differently. Working in an environment where things are stable, and processes are set is fun. Working in an environment where you are evolving along with the processes is exciting.

If you are still here reading it, thank you so much for following it up till now, I genuinely appreciate it. If you are still not a user of Peerlist, you should join it! It's a proof of work alternative to your LinkedIn profile.

Also, if you have any questions about Peerlist, let me know in the comments. I would love to answer them all and finding a new topic to write an article on is, anyway, extremely difficult, so help me with that! 😉

Keep growing! 🙌

As a developer, how to estimate the time for a task?

Yogini Bende — Tue, 07 Jun 2022 10:40:59 +0000

It's hard to calculate the time you will need to finish the task, but it is equally important. Let's dive deep and understand how to do it?

Time estimations are one of the most critical metrics in project development. Though it is important for any project type, today, I will be talking about only software development projects (since I know them very well 😁)

Accurately estimating time for any task is very difficult but important as the whole project’s timeline is dependent on each of them. Most of the time we all underestimate a task leading to imperfect work (though perfection is a myth), buggy code, compromised work quality, and in the end, a frustrated team!

To be honest, I am no expert to write about this and in the early days of Peerlist, I have made blunders in calculating the time I will require to finish the task. But still, I thought of writing about this today since it is a very less discussed topic and as I am getting better at it day by day, I thought of sharing my ways with everyone reading this.

Before we start understanding my process, let's just first try to understand -

Why it is so hard to estimate the time for a given task?

1. Overconfident Self (I am a superhuman 😎)

Don’t get me wrong here, but we tend to forget our own past experiences and become fairly optimistic about ourselves. For example, I know creating a UI for a page would generally take me 4 hours, next time I will “think” I will be able to finish that up in 2 hours!

This is my “assumption” based on what I “think” at that moment of time without even realizing that if it generally takes me 4 hours, then how can I finish this up in 2? The optimism of my past experience do not make me take a better decision but overestimates my capacity to work.

End result, I fail in completion, get annoyed and affect the deadline of an overall project!

2. We don’t care enough to track how much time we generally take for small tasks

In the above point, seamlessly I wrote about 4 hours for a single UI page where that was a mere guess! If I ask you about the time required for any small part of your work, I am pretty sure you will also end up guessing time. This is common in all of us. We mostly don’t track our time much while working.

I know you must be feeling that tracking time might lose your productivity and focus right now, but it is like training yourself right now. If you understand it better, you will be able to estimate it better.

Enough of the whys, now let’s find solutions. Let’s understand -

How to be better at estimating time?

I have created a small model of task time estimation. Remember, this is what works best for me and I still keep on improving it. If you think you can add or remove any of these steps, you should! Also, though this sounds like a task in itself, trust me after a certain time it becomes a very normal process.

So, let me walk you through all the steps I take to estimate the time for a task.

1. Divide the task into small units

It does not matter how small the task is, if you can divide it into small units, it helps you understand the time required more closely. I mostly divide all my major tasks into small tasks that can be finished in 30mins (every unit should not require more than 30 mins to complete), this time should be based on what you think is best for you

2. Combine all the steps to find the final schedule

Now that you have divided your tasks into smaller ones, calculate all of them and the total time you will require to finish them.

Pro Tip: I write all the small tasks as comments in my code, and whenever one gets finished, I remove it. Helps me get that dopamine hit of completing and achieving something 😉

3. Add 25% time as a margin

Though you created small tasks and added the correct time, still, there is a high possibility that you have misinterpreted something, something came up on time, or anything else, so always always always, keep this buffer on min 25% of the time.

Well, and who knows if you finish within time, this 25% can be a reward for you!

4. Assess the time after completion of your task

Out of all, I think this is the most important and most ignored one. Do go back to all your time estimates and start assessing which ones were correct and which ones you overshoot. But, for all those which you miscalculated, DO NOT think you performed badly at the task, it is always that your estimation was incorrect! This review will help you improve dramatically in estimations. This process does sound not-so-interesting but trust me, it will take you only 15 mins to do this.

5. Do not forget breaks

I am guilty of doing this! I always used to consider 5-10 mins of break would be fairly enough, but well, it's not! (Ohh come on, who can scroll Twitter feed and leave that phone aside in 5 mins 🙄). This might not be your case, but point is, that you should consider the appropriate breaks that will require for you to recharge yourself.

6. Use time tracking and Pomodoro

I will not ask you to subscribe for one more time tracking app here, because google timer works best for me here! I always start a timer of 30/40 mins, close all my non-required windows, mute/ignore all the notifications during that time and start working on that one task to finish it within that deadline. It's almost like a Pomodoro.

*How does it help? *

You don't get distracted by other windows, notifications, etc.
You time limit your task. So if you don’t finish it in time, you understand that pretty quickly.
This helps you take breaks without feeling guilty.
You start having a set schedule of your work.

I follow all these things and they are helping me get better every day in my time estimates. I believe in one thing, it is okay if you don’t know you will be able to do something in a given time, but it is not okay if you don't know you will NOT be able to do it in a given time! The latter will make things worst.

If you are still here, I appreciate your will to be better at your task! Hopefully, we all will crack this code soon. Meanwhile, if you find a better way to do this, I am there to listen/read.

Hope I am able to add some value to you with this article. If not, I am always open to feedback. I am mostly quite active on Twitter, so feel free to reach out there.

Shameless plug, join Peerlist. It’s a community-led professional networking platform for people in tech with very rich work profiles.

Keep building 🙌🏼

Everything about our migration from ReactJS to NextJS

Yogini Bende — Tue, 18 Jan 2022 15:10:22 +0000

Hello folks 👋,

Two months back, in our November Release, we announced our tech migration. Since then I was planning to write this blog but thought to take some time to have better clarity on everything. As things are quite stable now (but we are still improving), I thought of sharing the whole thought process and how we took our decisions.

Spoiler Alert! This article covers most of our thoughts behind the decision and the process, and might not go deep in tech, but follow along, in the end, it will be worth a read!

React is one of the most popular javascript libraries and is widely used in so many applications these days and NextJS is a framework built on ReactJS. You don’t understand the true power of Next until you start using it and I am saying this from my own experience!

I have been working with React for more than 3 years now and I always loved the way it works. So when we started building Peerlist from scratch, React was my very obvious choice. Because of the MVP stage, we thought of working with our strengths (which was of course React for frontend) and building the first working prototype in ReactJS.

Initially, this worked, we were able to ship within our timelines and everything was working smooth. Though soon we realized the decision of going with plain React didn’t turn out to be so good for us. We knew that this tech stack won't scale with the product roadmap we have in place.

Why?

All technologies and frameworks are amazing but they are created to fulfill different use-cases. So when I said plain React wasn’t good for us, I was thinking of the following use-cases,

We needed a more SEO-friendly framework.

React is pretty good in creating Single Page Applications but Google crawlers find it difficult to index and fully process the Javascript of your app. This will start affecting your SEO. For the websites like Peerlist, the user’s content is the Hero.

We wanted your Peerlist profile should be in the top 5 search results when someone is looking for you or for a professional with similar skills as you. We had to crack the Google search algorithm to display your Peerlist profile.

We all know that SEO takes a good amount of time to build and we lost our initial couple of months by not getting indexed and ranked enough by Google. This became a deal-breaker!

Server-side rendering support.

We had two very particular use-cases which needed our app to support server-side rendering (SSR). One of them was SEO which I already mentioned above and the second was the custom social previews. Something like this -

For the sites like Peerlist where our focus is totally on highlighting users’ data, we needed the social preview of every user profile’s link customized for that user. If I want to share my profile link, my info should get highlighted than the platform. You must have seen such custom social previews for sites like GitHub, DEV, and Hashnode.

Both of these features needed SSR and we did not find a good, robust, and scalable solution that can fit our requirement of turning a react app into SSR.

Routing

React apps heavily rely on React-Routers. Though React Router is an amazing library to handle routing, we started facing difficulty to maintain and follow conditional routing using it. Though React Router would have worked with more refined implementation, we started looking for something easier to maintain, implement and scale.

Javascript Ecosystem

In our earlier implementation, our backend was developed using Springboot and Postgresql. This was a wonderful combination and we hardly face any difficulty with this. Though this was the case, we decided to move completely into the javascript ecosystem. It was more for the ease of development and leveraging the advantages of a single project structure and MongoDB.

But then, what next? NEXT.

With all these use-cases in our minds, we figured Nextjs was our ideal fit. Next is an opinionated framework that provides out-of-the-box support for SEO, SSR, routing, and API routes to create serverless APIs. We wanted everything and the addition of performance benefits.

Particularly these are the benefits of Next which we considered while choosing it

SEO and image optimizations.
Optimized bundling and code splitting, to improve the app performance.
Very intuitive and dynamic page routing.
API routes to support serverless APIs.
Built-in server-side-rendering support.
A framework built with React

Migration process and challenges we faced

We started understanding the downsides of our earlier implementation, but the question was when is the good time to migrate?

To set you a little context, we had launched a closed beta of our app two months back and were in the process of shipping new features, testing them, and collecting more and more user feedback. So, we had to decide between shipping new features vs migration?

Because of a very small engineering team (🧑‍💻x2) doing both in parallel was not the option. But taking up the migration means we have to pause feature development. Still, we decided to go ahead with migration because the earlier, the better!

Considering the earlier Reactjs project, frontend migration was a little easier. Most of the previous components were reusable. The only difference we consider was in the following four things -

Moving from React Router to native Next router
Adding SSR for certain pages
Changing the folder structure as per Next
Creating custom head components for meta tags to improve SEO

From this, frontend migration seemed pretty straightforward. What needed to do was, write the backend from scratch. As I mentioned, our earlier backend was in Springboot and Postgresql, moving it to javascript APIs with MongoDB meant writing and structuring everything from scratch.

For this migration, considering our timelines and resources, we decided to replicate everything as is without modifying it. Because we wanted to do it as quickly as possible and keep improving it later. But again, who has control over that developer’s urge to refactor the code and implementation?

But on a positive note, this migration gave us the chance of improving the implementation approaches. We made our system more refined and stable. Though these improvements made us miss the migration deadline, the overall improvements we experienced in our system were worth those efforts.

If I need to summarize the whole migration process and write down the learnings, here are those -

Initially, I used to feel that we should have given more thought to selecting the correct tech stack in the first attempt. But always remember, your first attempt will never be a polished and perfect product (that’s why it is called prototype!). You are already testing your idea, so it's okay if you play with your strength and select the tech stack you are most comfortable with.
No system can be ever made perfect! We all have seen bugs in the well-known apps, crashes happening with applications that we consider ideal, so you creating something with your best effort is all that is needed. Bugs will be the part of your software as features are, the point is always in improving your system and minimizing them, not making a perfect system.
Code refactoring and improvisations are good, but time-boxing them is essential. Otherwise, we fall into a rabbit hole.

That’s all I wanted to share from our migration process. I have deliberately tried to keep this article less technical and more of a thought process we went through to make it a little relevant. Do let me know in the comments if you want to understand any particular part of the process. I will surely try to cover it in my next article.

Till then, keep exploring!✌️

You can also connect with me on Twitter or buy me a coffee if you like my articles. I publish an article every tuesday about web development, frontend, my learnings, and some random fun thoughts.

Why every developer should do side projects?

Yogini Bende — Tue, 04 Jan 2022 15:54:04 +0000

Hello folks,

Let me start by wishing you all a very happy and healthy new year 🎉

Because we have just entered the new year and most of us spend this time in goal setting or building new habits into our routines, it is the best time to share this thought and promote the importance of side projects.

Let's begin by understanding what are the benefits of doing a side project. I will use 3 different advantages of side projects to convince you this -

1. The best way of learning.

I am all time promoter of learning by doing. Tutorials are good to get introduced to something but they are limited when it comes to practical implementation. When you work on your side project, you implement something from scratch and every iteration of this implementation will make you learn something new.

Working on something gives you a deep understanding of its concepts which are most likely missed otherwise. That’s why I am claiming it to be “the best” way of learning new things.

2. Proof of work.

With every new side project you create, you are creating proof of work for your skills. Most of the time, the work you do for your organization (where you are working full-time) is private and there is no way you can show the world how awesome developer you are. In such cases, your side projects will be your advocates. You claiming to know certain technology and you showing off a project built in that technology all by yourself, which one you will prefer?

It’s obvious that these projects are the best way to promote your skills and will help you get your next job or the new freelance gig.

3. End to end understanding of working on an idea

Most often, we work on a product in a team or we only know a part of that product. This makes us unaware of so many sides of developing a product. When you create your project from scratch, you are responsible for each and every part of that project. Starting from designing, to deciding features, to testing the edge cases, to deploying it to prod, you are the one looking after everything.

This complete product development life-cycle will make you more aware of all the side effects of small decisions we take and will improve your workflows.

If you are still reading, I am pretty sure you are convinced with the thought of doing a side-project. But one small and most powerful tip, Don’t shy away from sharing your side projects with as many people as you can! You will get the correct exposure and suggestions about your project only when you share it with people. Share your project with your friends, colleagues, share it on Twitter, or make it openly available on Github. The more you share and promote it, the more improvements you will make. You will get noticed for your work, you will understand the mistakes you might have done or you will get to know other approaches people are choosing.

All this is good and you are convinced, but how to choose a side project? 🤔

A side project can be anything, as small as a small animating card component or as big as a SaaS product. You have to keep your eyes and interest open, and you will see so many ideas floating around you. Whatever interests you most, pick that up and start building.

I have listed some ideas for myself, sharing those with you which might help you think about one -

A chrome extension for Pomodoro timer.
An expense tracker for yourself.
A habit tracker.
App to collect user feedback.
Different component libraries, and the options are limitless.

Understanding the importance of side projects, a few months ago, we started working on one. The thought was simple, a platform to create a single work profile for every individual and we built Peerlist. While working on it, we also started sharing our journey on Twitter. The responses were amazing and the idea evolved so wonderfully that the side project is now our full-time job! So, that’s why I am here, promoting the importance of doing side projects because who knows, you might end up monetizing your one 🤑

Final thought, building a side project will definitely make you jack of all and master of some. So what are you waiting for? Let's git init😉

That’s it from this article! If you are working on something or you have some ideas, do share them in the comments. I would love to check them out.

You can also connect with me on Twitter or buy me a coffee if you like my articles. I publish an article every tuesday about web development, frontend, my learnings, and some random fun thoughts.

Happy coding and keep learning 🙌

Infinite scrolling in React with intersection observer

Yogini Bende — Thu, 02 Sep 2021 10:43:48 +0000

Hello folks,

Few days back I came across the use-case of infinite scroll in React. For this, I used Intersection Observer and found different ways of implementing it in infinite scrolling.

Before we dive in, let's first understand our problem statement better. Consider an API which gives you list of users and some of their basic details. The task here is to show list of all users in cards. Simple right?

Now, consider there are thousands of users and the API we are using is paginated. In this case, there will be these two ways to use our paginated API -

Use next/prev buttons to go through different pages
Use infinite scroll

As the article title says, we are going with 2nd approach.😅
Now, let's see how?

We will be calling our API to get first 25 results.
Once the user scrolls through the list and reach to the last element, we will make another API call and pull next set of users in the view.

This way, even if user keep scrolling, they will always see list of users until they reach till the end.

Before moving to the implementation part, let me give you the brief idea of Intersection Observer

What is Intersection Observer?

The Intersection Observer is a browser API that provides a way to asynchronously observe or detect visibility of two elements in relation to each other.

As per MDN, this API is mostly used for performing visibility related tasks which includes lazy-loading of images and implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll.

You can check detailed information of Intersection Observer here.

Implementing Infinite Scroll

For the infinite scrolling we will be using an open source RandomUserAPI.

For basic project setup, I created a simple React project with create-react-app and added Tailwind CSS to it. Also, for calling APIs, I added axios to the same project.

I have divided the implementation in 2 steps as follows -

1. Calling API, storing and displaying data.

With our basic setup in place, let's see the first version of code where we are calling a user API to get the list of users.



// app.js
import axios from 'axios';
import { useEffect, useState } from 'react';

const TOTAL_PAGES = 3;

const App = () => {
    const [loading, setLoading] = useState(true);
    const [allUsers, setAllUsers] = useState([]);
    const [pageNum, setPageNum] = useState(1);

    const callUser = async () => {
        setLoading(true);
        let response = await axios.get(
            `https://randomuser.me/api/?page=${pageNum}&results=25&seed=abc`
        );
        setAllUsers(response.data.results);
        setLoading(false);
    };

    useEffect(() => {
        if (pageNum <= TOTAL_PAGES) {
            callUser();
        }
    }, [pageNum]);

    const UserCard = ({ data }) => {
        return (
            <div className='p-4 border border-gray-500 rounded bg-white flex items-center'>
                <div>
                    <img
                        src={data.picture.medium}
                        className='w-16 h-16 rounded-full border-2 border-green-600'
                        alt='user'
                    />
                </div>

                <div className='ml-3'>
                    <p className='text-base font-bold'>
                        {data.name.first} {data.name.last}
                    </p>
                    <p className='text-sm text-gray-800'>
                        {data.location.city}, {data.location.country}
                    </p>
                    <p className='text-sm text-gray-500 break-all'>
                        {data.email}
                    </p>
                </div>
            </div>
        );
    };

    return (
        <div className='mx-44 bg-gray-100 p-6'>
            <h1 className='text-3xl text-center mt-4 mb-10'>All users</h1>

            <div className='grid grid-cols-3 gap-4'>
                {allUsers.length > 0 &&
                    allUsers.map((user, i) => {
                        return (
                            <div key={`${user.name.first}-${i}`}>
                                <UserCard data={user} />
                            </div>
                        );
                    })}
            </div>
            {loading && <p className='text-center'>loading...</p>}
        </div>
    );
};

export default App;

This is how our page will look like 👇

The code is pretty straightforward. In the callUser function, we are calling the API and storing the result in allUsers state. Below, we are showing each user from the allUsers array using a card component UserCard.

You will see one const defined on top of the component TOTAL_PAGES, this is to restrict total number of pages we want to traverse throughout application. In real-world applications, this won't be needed as the API will give you the details of total pages available.

Also, you might have notice, we have defined a state to store page number but till now, haven't used it correctly. This is because we want to change this page number from our intersection observer.

2. Adding Intersection Observer and incrementing page number

To do an infinite scroll, we need to increment page number count when last element of the list is visible to user. This will be done by intersection observer.

Our intersection observer will observe if the last element is visible or not, if it is, we will increment the page number by 1. As our useEffect will run on change in page number, the API will get called and hence we will get list of more users.

After understanding this logic, let's see the working code -



// App.js

const App = () => {
    const [loading, setLoading] = useState(true);
    const [allUsers, setAllUsers] = useState([]);
    const [pageNum, setPageNum] = useState(1);
    const [lastElement, setLastElement] = useState(null);

    const observer = useRef(
        new IntersectionObserver(
            (entries) => {
                const first = entries[0];
                if (first.isIntersecting) {
                    setPageNum((no) => no + 1);
                }
            })
    );

    const callUser = async () => {
        setLoading(true);
        let response = await axios.get(
            `https://randomuser.me/api/?page=${pageNum}&results=25&seed=abc`
        );
        let all = new Set([...allUsers, ...response.data.results]);
        setAllUsers([...all]);
        setLoading(false);
    };

    useEffect(() => {
        if (pageNum <= TOTAL_PAGES) {
            callUser();
        }
    }, [pageNum]);

    useEffect(() => {
        const currentElement = lastElement;
        const currentObserver = observer.current;

        if (currentElement) {
            currentObserver.observe(currentElement);
        }

        return () => {
            if (currentElement) {
                currentObserver.unobserve(currentElement);
            }
        };
    }, [lastElement]);

    const UserCard = ({ data }) => {
        return (
            <div className='p-4 border border-gray-500 rounded bg-white flex items-center'>
                <div>
                    <img
                        src={data.picture.medium}
                        className='w-16 h-16 rounded-full border-2 border-green-600'
                        alt='user'
                    />
                </div>

                <div className='ml-3'>
                    <p className='text-base font-bold'>
                        {data.name.first} {data.name.last}
                    </p>
                    <p className='text-sm text-gray-800'>
                        {data.location.city}, {data.location.country}
                    </p>
                    <p className='text-sm text-gray-500 break-all'>
                        {data.email}
                    </p>
                </div>
            </div>
        );
    };

    return (
        <div className='mx-44 bg-gray-100 p-6'>
            <h1 className='text-3xl text-center mt-4 mb-10'>All users</h1>

            <div className='grid grid-cols-3 gap-4'>
                {allUsers.length > 0 &&
                    allUsers.map((user, i) => {
                        return i === allUsers.length - 1 &&
                            !loading &&
                            pageNum <= TOTAL_PAGES ? (
                            <div
                                key={`${user.name.first}-${i}`}
                                ref={setLastElement}
                            >
                                <UserCard data={user} />
                            </div>
                        ) : (
                            <UserCard
                                data={user}
                                key={`${user.name.first}-${i}`}
                            />
                        );
                    })}
            </div>
            {loading && <p className='text-center'>loading...</p>}

            {pageNum - 1 === TOTAL_PAGES && (
                <p className='text-center my-10'>♥</p>
            )}
        </div>
    );
};

Let's understand the code in-depth.

We have defined the Intersection Observer and stored it to const observer. The intersection observer have a callback function which accept array of all the intersecting objects. But since, we will be passing only last element to it, we are always checking the 0th entry of this array. If that element intersects means become visible, we will increment the page number.

We have added one more state lastElement and initialised it to null. Inside the page, we will be passing last element of the array to this state.

Hence, when the value of lastElement state will be changed calling another useEffect (with lastElement in dependency-array). In this useEffect, if we get value of lastElement we will pass that element to our intersection observer to observe. Our observer will then check the intersection of this element and increment the page count once this happens.

As the page number changes, the API will be called and more users will be fetched. Notice the small change we did to add these new users to existing state and avoiding duplications.

And The app will run effortlessly and you can now see infinite scroll in action!🥁

That is it for now! If you want to see the full code for this, you can check that in my Github repository here.

Thank you so much for reading this article. Let me know your thoughts on this and you can also connect with me on Twitter or buy me a coffee if you like my articles.

*Happy coding and keep learning 🙌 *

Simple progress bar component with React and Tailwind

Yogini Bende — Tue, 08 Jun 2021 10:45:27 +0000

Hello folks,

Recently, I was working on a feature and I had to implement a progress bar in it. Till now, I have always been scared of progress bars (reason: unknown 😂). Most of my previous projects used Bootstrap, and because bootstrap has its own progress component, I didn't need to create a progress bar all by myself.

But fortunately, the current project I am working on is using Tailwind and that means I had to create a progress bar myself! Initially I felt this will be super complicated and I will have to handle so many states and all. But it ends up being a very small and fairly simple component.

In this article, let's understand how to create this easy and simple progress bar. So next time, we will not need any library for this!

Let's get started 🚀

To build a progress bar we will need only two parts.
1- We will need an outer div to show the complete progress bar.
2- Inner div to show the progress.

Let's dive into the code and understand this! Our progress bar component will look something like this -

const ProgressBar = ({ progressPercentage }) => {
    return (
        <div className='h-1 w-full bg-gray-300'>
            <div
                style={{ width: `${progressPercentage}%`}}
                className={`h-full ${
                    progressPercentage < 70 ? 'bg-red-600' : 'bg-green-600'}`}>
            </div>
        </div>
    );
};

These 4 lines of code and your basic progress bar component is ready. 😇

If you see in code, the outer div is the complete progress bar. It has a total of 3 classes, height, width and background color.

The height here is kept 4px only, but that you can change as per your need. Here, to make it more generic, we made the width 100%. Due to this, we will be able to control the width of the progress bar based on the outer component. The background color given to this div defines the empty state of progress bar. Hence we have used bg-gray-300 from tailwind default colors.

Now, as the inner width represents actual progress of this progress bar, we will need to keep its width dependent on the value passed as a percentage of progress. So, we have added an inline style attribute to this div and the percentage goes as a value to the width property. Also, we added 100% height to this inner div. Hence it will consume the whole height of the outer div.

As per my use case, if the progress is below 70%, we need to show the progress bar in red color otherwise green. We can achieve this simply by using conditional styling. You can see we are conditionally applying the classes of background color to this div. If you have more than one condition, you can use a variable to get the value of the background color and apply that class to this div.

This is the bare minimum structure of any progress bar and you can keep on adding more features to it as per requirements. But I guess, this basic structure will solve most of the needs.

That’s it for now. I have created a github repo to create React and Tailwind components. You can check that out and feel free to add more components there if you are interested.

Thank you so much for reading this article. Let me know your thoughts on this and you can also connect with me on Twitter or buy me a coffee if you like my articles.

Happy coding and keep learning 🙌

5 mini-projects to sharpen your frontend development skills!

Yogini Bende — Tue, 01 Jun 2021 10:47:33 +0000

Hi folks,

Frontend development is continuously evolving with new technologies and frameworks. It is always said that the best way to master a new framework is by building something in it while learning. Though we all know this, the question which remains constant is, what to build?

Most tutorials start with either a to-do app or a counter. These are the best examples to cover the basics while learning, but they are also very repetitive. So let’s see some fun and real life relevant projects to practice any frontend framework. In this article, I have shared 5 fun projects which are inspired by real life use-cases to solidify your frontend skills.

Most of these projects require different components to build. But they are tricky enough to make you understand different features and their implementation patterns of the framework.

You can build these projects in any framework. I have also created a github repository to store all these project ideas. If you like these challenges, would appreciate getting a star to this repository 🌟. You can also contribute to these challenge lists or share your solutions. We can create a solutions section too for those links!

Here is the list of all challenges -

Smart Textarea: Twitter like textarea with character count
Dropdown Component with select/multiselect feature - Similar to React Select
Autosuggest Input
Manage cookies pop-up
Progress Bar

Smart Textarea

Twitter like textarea with character count

If you have ever used twitter, you must know your tweet will have a character count limit of 280 characters and once you cross that character limit twitter starts marking your characters with red background and you will see a character count going in a negative value! That's it, that is the task. You can build the same textarea with a customised character count limit.

Features to include in it -

Create a simple textarea and add necessary styling.
There should be a customisable character count limit to your textarea.
Show this limit below the textarea. Improvement - You can add progress circle showing the count.
If characters goes beyond the limit, highlight them, decrease the count to negative value and disable the submit button.
You can also add warnings when only the 10% character limit is remaining.
If a user is adding symbols such as @ or # made them as a link with relevant href.
After a submit button, display that paragraph.

Dropdown Component

A component with select/multi select feature, similar to React Select

Dropdowns are part of most applications and they are smart to implement components. React Select is one of those libraries which I heavily trust on for any type of dropdown I need. But while learning if we can create a simple dropdown component, it will have so many benefits over going for the library.

Features to include in it -

Dropdown component, where list will be open on click of dropdown.
This list should get closed on clicking the dropdown again, on pressing esc key, on clicking outside and after selecting any element.
Enable multi select option as well.
Search function on type will be a bonus.

Autosuggest Input

We all have tried Google search input. It's pretty cool how it shows you some suggestions based on your typing. We need to create exactly the same. Consider a search location feature, where you are adding names to your city and country. Implement a search feature with a list of cities and countries and show user options based on what the user is typing.

This is one of the most frequently asked questions in the interviews. So that is a bonus point.

Features to include in it -

A search input with auto suggest option.
Enable debouncing feature to save excess api calls.
Use any api or json list to show suggestions

Manage cookies pop-up

Ever opened a website and saw an annoying pop-up asking to accept cookies or manage your preferences? We need to build that! A custom pop-up component for creating and managing cookies in an application.

Features to include in it -

After loading a page, a pop-up asking to accept cookies should show up.
Users should have preferences on accepting all/some or no cookies.
Same preference should work in your app.
After 10-15 seconds the pop-up should become hidden with a default state.

Progress Bar

Progress bars showing progress of something are commonly seen. Here you can develop 3 types of progress bar

Progress bar showing page scroll progress, at the top most position of your page.
Progress bar showing progress as per value passed in percentage.
Circular variant of same progress bar.

That’s it for now. Do not forget to check the github repo for the same, as I will be adding more challenges to this list. If you have more such ideas, please create a pull request for the same or if you have created any solution for this, I will link that too, below the challenge.

Thank you so much for reading this article. Let me know your thoughts on this and you can also connect with me on Twitter or buy me a coffee if you like my articles.

Happy coding and keep learning 🙌

useContext for better state management!

Yogini Bende — Tue, 25 May 2021 11:01:38 +0000

Hi folks,

Managing data in an app is little tricky when many components are sharing and updating it. useState, useReducer, useMemo etc. are some state management hooks in React, which are very efficient and have their own ways to work in different scenarios. Though all these hooks are effective, there are still some situations where managing state becomes difficult.

If you already know why we need context hook, you can directly jump to its implementation here

Consider an app which works on user’s data. On loading, the app fetches this data from a backend and stores it in an app component. Later, this data is shared between many other children components. If child components are just using that data, then it’s fine. But, problems will arise, if one of them will update the data.

As we know, the app component fetches the data, we need to use prop drilling to share it with all the children. In this case, we create a prop userData and pass it to all the children of this app component, making it look something like this -

This approach works when the children are just consuming the data and not updating it. But if you see in the diagram, the children four is performing an update operation on our user data. After this update, the new version of data should be made available to all the other components.

If you notice, this transaction of data becomes fairly difficult when the app is complex and there are multiple states to handle across multiple components.

These are the scenarios where state management libraries like Redux are introduced in the app. But with React context in hand, we can do the state management efficiently and natively.

P.S Redux is a very good and very vast state management system. It is the best choice for complex applications. But if the app has only a few shared states, I prefer working with context over Redux.

What is Context?

React context is nothing but a global state to the app. It is a way to make a particular data available to all the components no matter how they are nested. Context helps you broadcast the data and changes happening to that data, to all the components. That’s why it is a very useful state management hook, when it comes to use cases like we discussed above.

You can read more on React context in the official documentation of react

How to use it?

Now that we understand the what and why behind a context. Let’s understand how we can use it. To create a context in any React app, you need to follow 4 simple steps -
1- Create a context
2- Create a provider
3- Add provider to the app
4- UseContext

These terms can become super confusing in the start. The best way to understand context is, consider it as a simple state, a state which we create using useState. The only thing context will do is to share this state and its changes throughout the app.

Hence, when we say, we are creating a context, we are creating a state! When we say we are creating a provider, as its name says, we are creating a wrapper component to provide that state to all the components. It is that simple!

Now, let's dive into code and create a context! In the below code, we will be covering step 1 and 2.



// UserDetailsProvider.js

import { createContext, useState } from 'react';

//create a context, with createContext api
export const userDetailsContext = createContext();

const UserDetailsProvider = (props) => {
        // this state will be shared with all components 
    const [userDetails, setUserDetails] = useState();

    return (
                // this is the provider providing state
        <userDetailsContext.Provider value={[userDetails, setUserDetails]}>
            {props.children}
        </userDetailsContext.Provider>
    );
};

export default UserDetailsProvider;

In the code above, we have used createContext api to create our userDetailsContext. Now, the context got created, so we will need to create a provider.

In the function UserDetailsProvider, we created a provider for userDetailsContext. <contextname.Provider> is a common syntax for creating it. Please note a value prop here. The value prop will be used always to pass the shared state down. In this case, we are passing both state and setState functions down. This is because, even though any component updates the state, the global state can get updated which will be available for all the components.

Now that our context and provider are created. Let’s add the provider to the app. This is the most important step, as it will make the provider available to all components. Hence, let’s wrap our app component inside this provider. Our app component will look something like this -



//App Component

import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { RouteWithSubRoutes } from './utils/shared';
import UserDetailsProvider from './context/UserDetailsProvider';
import routes from './Routes';

function App() {
    return (
        <BrowserRouter>
            <Switch>
                // As login do not require the userDetails state, keeping it outside.
                <Route path='/' component={Login} exact />
                // All other routes are inside provider
                <UserDetailsProvider>
                    {routes.map((route) => (
                        <RouteWithSubRoutes key={route.key} {...route} />
                    ))}
                </UserDetailsProvider>
            </Switch>
        </BrowserRouter>
    );
}

export default App;

In this code, the data will not be fetched by the app component. Note, here we are adding only those components inside UserDetailsProvider which actually needs this state.

So here we come to the last part, using this context in any component. You must have guessed, this step needs the hook useContext as we will be using a context here! (No claps on guessing 😛)

This is done in the same way as we declare a state using useState. Something like this -



// Profile.js

import { useEffect, useState, useContext } from 'react';
import { getUser } from '../../utils/api';
import { userDetailsContext } from '../../context/UserDetailsProvider';

const Profile = ({ email }) => {

  // This is how we useContext!! Similar to useState
    const [userDetails, setUserDetails] = useContext(userDetailsContext);
    const [loading, setLoading] = useState(false);

    const handleGetUser = async () => {
        try {
            setLoading(true);
            let response = await getUser(email);
            setUserDetails(response.data);
        } catch (error) {
            console.log(error);
            // TODO: better error handling
        }
        setLoading(false);
    };

    useEffect(() => {
        if (!userDetails) {
            handleGetUser();
        }
    }, []);

    return <div className='bg-gray-gray1 h-full'>// do something</div>;
};

export default Profile;

If you have noticed, the useContext looks similar to useState. And later we will be using it same as useState!! Hence, whenever the setUserDetails function is called, the state change will be effective throughout the app, saving too much prop drilling.

So, that’s all about useContext hook. I have also seen many examples of context api being used in toggling and setting themes for an app. Do share your use-cases for using this context api.

Thank you so much for reading this article and please let me know your comments/feedback/suggestions. You can also connect with me on Twitter or buy me a coffee if you like my articles.

Keep learning 🙌

useAxios : A simple custom hook for calling APIs using axios

Yogini Bende — Tue, 18 May 2021 10:52:54 +0000

Hello folks,

Frontend apps are not complete if there are no api calls involved and calling an api becomes a little repetitive thing to do. By creating a custom hook for this, we can save this repetition. To make an api call from frontend, popular methods are fetch and axios. Because of the feature like interceptors which axios support, we will be using them in this hook.

We will create useAxios hook in the following steps -
1- Do the api call from a component using axios.
2. Add states for the API response, loading and error.
3. Create a hook for calling an API using all above.
4. Make the hook dynamic, to call all types of API methods.

If you don’t want to go through these steps and directly jump to the final code, check here.

Now, let's dive in and create our custom hook, step by step!

1. Simple API call from the component

To create this example, we will be using jsonplaceholder’s posts api. They have many more such APIs created for the practice purpose.

Generally, all the apis of an app have the same base URL. We will first set up our base URL for axios, so will not need to pass it again and again. In case you are using more than one base URLs, axios supports it via creating instances. You can check that in their documentation.

In our App component, we will just call a get api to get the list of posts. For this, we are using useEffect hook. The basic api call from an App component will look something like this -

//App Component

import { useEffect } from 'react';
import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

const App = () => {
    const fetchData = () => {
        axios
            .get('/posts')
            .then((res) => {
                console.log(res);
            })
            .catch((err) => {
                console.log(err);
            });
    };

    useEffect(() => {
        fetchData();
    }, []);

    return (
          <div className='app'>
              //do something
          </div>
       );
};

export default App;

The api call made above is simple. We used axios.get to call an api and using promises we will get the result or the error. Because we already had set up a baseURL, we just passed the specific path to the axios method.

2. Adding different states to the API call

But till now, we are just logging the response coming from api. Let’s use react’s states to save our response and error, if occurred. Also, we will be adding a loading state to conditionally show loaders on the page.

// App Component

import { useState, useEffect } from 'react';
import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

const App = () => {
    const [response, setResponse] = useState(null);
    const [error, setError] = useState('');
    const [loading, setloading] = useState(true);

    const fetchData = () => {
        axios
            .get('/posts')
            .then((res) => {
                setResponse(res.data);
            })
            .catch((err) => {
                setError(err);
            })
            .finally(() => {
                setloading(false);
            });
    };

    useEffect(() => {
        fetchData();
    }, []);

    return (
        <div className='app'>
            //do something
        </div>
    );
};

export default App;

3. Creating a custom hook

Custom hooks might be overwhelming in the beginning. But, if you view them just like other components, they will make more sense. One thing to keep in mind, custom hooks are just another component, which returns values instead of JSX. This is my definition for custom hooks and somehow it made the concept more clear to me. You can read more about custom hooks here.

So now, let’s copy the logic of calling an api from our app component to our custom hook. So, the first draft of our useAxios will look something like this -

// useAxios hook (first draft)

import { useState, useEffect } from 'react';
import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

const useAxios = () => {
    const [response, setResponse] = useState(null);
    const [error, setError] = useState('');
    const [loading, setloading] = useState(true);

    const fetchData = () => {
        axios
            .get('/posts')
            .then((res) => {
                setResponse(res.data);
            })
            .catch((err) => {
                setError(err);
            })
            .finally(() => {
                setloading(false);
            });
    };

    useEffect(() => {
        fetchData();
    }, []);

    // custom hook returns value
    return { response, error, loading };
};

export default useAxios;

If you notice carefully, we have literally copy pasted the code and created a custom hook. The only difference is this hook is returning us 3 values, loading, response and error.

Till now, everything looks fine but the hook we created is not at all dynamic. If we need to change the API path or if we want to make a post call instead of get, then we are right now not capable of doing so.

Hence, here comes the last step of making our hook more flexible. -

4. Making our hook more dynamic

To make our hook dynamic, we can create a variable for the url path and pass it as a prop to our hook. Also, axios can have any method from get, put, post and delete. Hence, we will need a variable for method name too. With path and methods, we will be adding two variables which can be used to pass body and headers to the request. After adding all these, our hook will look something like this -

Final code


// useAxios hook

import { useState, useEffect } from 'react';
import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

const useAxios = ({ url, method, body = null, headers = null }) => {
    const [response, setResponse] = useState(null);
    const [error, setError] = useState('');
    const [loading, setloading] = useState(true);

    const fetchData = () => {
        axios[method](url, JSON.parse(headers), JSON.parse(body))
            .then((res) => {
                setResponse(res.data);
            })
            .catch((err) => {
                setError(err);
            })
            .finally(() => {
                setloading(false);
            });
    };

    useEffect(() => {
        fetchData();
    }, [method, url, body, headers]);

    return { response, error, loading };
};

export default useAxios;

As our useAxios hook is ready, let’s now use it into our app component and try to create a new post using that. Hence, the App component will be -


// App Component

const App = () => {
    const { response, loading, error } = useAxios({
        method: 'post',
        url: '/posts',
        headers: JSON.stringify({ accept: '*/*' }),
        body: JSON.stringify({
            userId: 1,
            id: 19392,
            title: 'title',
            body: 'Sample text',
        }),
    });
    const [data, setData] = useState([]);

    useEffect(() => {
        if (response !== null) {
            setData(response);
        }
    }, [response]);

    return (
        <div className='App'>
            <h1>Posts</h1>

            {loading ? (
                <p>loading...</p>
            ) : (
                <div>
                    {error && (
                        <div>
                            <p>{error.message}</p>
                        </div>
                    )}
                    <div>{data && <p>{data.id}</p>}</div>
                </div>
            )}
        </div>
    );
};

export default App;

This is the very basic version of useAxios hook. You can add more customisations to it as per your requirements.

Thank you so much for reading this article and do let me know your thoughts about this custom hook! Also, for daily updates you can also connect with me on Twitter or buy me a coffee if you like my articles.

Keep learning 🙌

Form inputs with React and Tailwind

Yogini Bende — Tue, 11 May 2021 10:46:28 +0000

Hello There,

TailwindCSS is a utility-first library which encourages to build everything using it's utility classes. With growing projects, we see the set of elements repeating themselves. With a utility-first approach, we not only repeat the list of classes but also the html structure of those elements. Best and well known way of handling this is creating components for mostly used elements.

In this article, I will be covering one mostly used component in any project - Form Input. Let’s dive in and understand how we can create it.

We will be creating an input element similar to the input shown in the image above. Let’s divide the whole process into 3 different parts -

Styling the element.
Handling error.
Improving its usability.

1. Styling the element

If you notice, the input element has a label and border around both label and input. So let's take a wrapper div and put our label plus input element inside it. Hence the HTML look something like this -

const Input = (props) => {
    const { id, placeholder = '', label = '', type = 'text', ...rest } = props;
    return (
        <div>
            <label htmlFor={id}>{label}</label>
            <input type={type} id={id} placeholder={placeholder} {...rest} />
        </div>
    );
};

export default Input;

This is the simplest react component which will take id, label, type and placeholder as a prop and we have also added ...rest to maintain its flexibility.

Now, to add styling, the idea is, add a border to the outer div and place the label inside. Also, hide the border for the input element.

After adding Tailwind's utility classes this input will look like this -

const Input = (props) => {
    const { id, placeholder = '', label = '', type = 'text', ...rest } = props;
    return (
        <div
            className={`border transition duration-150 ease-in-out focus-within:border-primary border-gray-gray4`}
        >
            <label
                htmlFor={id}
                className={`text-xs text-primary font-light placeholder-gray-gray4 px-2 pt-1.5`}
            >
                {label}
            </label>
            <input
                type={type}
                className={`w-full px-2 pb-1.5 text-primary outline-none text-base font-light rounded-md`}
                id={id}
                placeholder={placeholder}
                {...rest}
            />
        </div>
    );
};

export default Input;

Notice how we have used focus-within property to change the border color after focusing input.

Till this point, we have already created a good looking input element. But, this element still have two issues -

It will not show error
If a user clicks on the box, outside the <input/> tag, the input will not be focused.

Let's solve these issues now.

2. Handling input error

To show input error efficiently, we will need to add two things, we will need to make the border red when error occurs and we will need to show error text below the input component.

Let's see the code first -

const Input = (props) => {
    const {
        id,
        wrapperClassName = '',
        placeholder = '',
        label = '',
        type = 'text',
        error = '',
        required = false,
        ...rest
    } = props;

    return (
        <div className={wrapperClassName}>
            <div
                className={`border transition duration-150 ease-in-out ${
                    error
                        ? 'focus-within:border-red border-red'
                        : 'focus-within:border-primary border-gray-gray4'
                }`}
            >
                <label
                    htmlFor={id}
                    className='text-xs text-primary font-light placeholder-gray-gray4 px-2 pt-1.5'
                >
                    {label} {required && <span className='text-red'>*</span>}
                </label>
                <input
                    type={type}
                    className='w-full px-2 pb-1.5 text-primary outline-none text-base font-light rounded-md'
                    id={id}
                    placeholder={placeholder}
                    {...rest}
                />
            </div>
            {error && <p className='text-xs pl-2    text-red mb-4'>{error}</p>}
        </div>
    );
};

export default Input;

Here, to add the error, we added a <p> tag in the bottom. As React needs only a single element wrapper, we added one more div outside. This div will be helpful to add margins or other styles to complete the input component.

We have also changed the border color conditionally for the outer component and added an asterisk, if the input is mandatory.

With this error handling, we have almost finished creating out component. One last thing pending here is, focusing our input when we click the outer div.

3. Improving usability

To focus our input on after clicking the outside div, we have useRef to our rescue😅. We added a ref to the input element inside our component. When we will click the outside div, we will add focus to the input using this ref.

Notice the onClick event we added to the outside div of input. This will solve all our requirements and a complete input component becomes ready.

Final version of our component will look something like this -

import { useRef } from 'react';

const Input = (props) => {
    const {
        id,
        wrapperClassName = '',
        placeholder = '',
        label = '',
        type = 'text',
        error = false,
        errorText = '',
        required = false,
        ...rest
    } = props;

    const inputRef = useRef();

    return (
        <div className={wrapperClassName}>
            <div
                className={`border transition duration-150 ease-in-out ${
                    error
                        ? 'focus-within:border-red border-red'
                        : 'focus-within:border-primary border-gray-gray4'
                }`}
                onClick={() => inputRef.current.focus()}
            >
                <label
                    htmlFor={id}
                    className='text-xs text-primary font-light placeholder-gray-gray4 px-2 pt-1.5'
                >
                    {label} {required && <span className='text-red'>*</span>}
                </label>
                <input
                    ref={inputRef}
                    type={type}
                    className='w-full px-2 pb-1.5 text-primary outline-none text-base font-light rounded-md'
                    id={id}
                    placeholder={placeholder}
                    {...rest}
                />
            </div>
            {errorText && (
                <p className='text-xs pl-2  text-red mb-4'>{errorText}</p>
            )}
        </div>
    );
};

export default Input;

And that's it!

You can create many such components using Tailwind and React. I have used this code for my side project and I am creating more such components in my github repository.

Thank you so much for reading this article and always happy to receive your feedback. You can also connect with me on Twitter or buy me a coffee if you like my articles.

Thanks a lot! Keep learning 🙌