DEV Community: Swapnadeep Mohapatra

Mastering JavaScript in 30 Days: My Transformational Journey

Swapnadeep Mohapatra — Wed, 26 Feb 2025 14:52:55 +0000

A few months ago, I was frustrated with JavaScript. No matter how many tutorials I watched or articles I read, I couldn’t fully grasp its concepts. Asynchronous programming felt like a mystery, closures confused me, and debugging code felt like an endless struggle. I knew I needed a structured approach—something that would take me from a beginner to a confident developer.

That’s when I came across the 30 Days of JavaScript course. The idea of committing to a daily learning routine intrigued me, so I decided to give it a shot. What followed was a transformational journey that completely changed how I understood JavaScript.

What Made This Course a Game-Changer? 🔥

Step-by-Step Learning Path – Each lesson was structured in a way that made even the most complex topics easy to digest.
Hands-On Practice – Instead of just passively consuming content, I worked on daily coding exercises that solidified my understanding.
Gradual Progression – The course started with the fundamentals and gradually introduced advanced concepts, making the transition seamless.
A Supportive Community – Learning alongside others and discussing challenges kept me motivated and accountable.
Practical Projects – By the end, I had built multiple projects that showcased my skills, reinforcing my confidence.

The Key Lessons I Learned 📚

Every day brought a new concept, and by the end of 30 days, I had developed a strong grasp of JavaScript:

Days 1-5: JavaScript Basics – Variables, Data Types, Operators, Functions, Scope
Days 6-10: Control Flow – Loops, Conditional Statements, Debugging Techniques
Days 11-15: Data Structures – Arrays, Objects, Higher-Order Functions
Days 16-20: DOM Manipulation – Event Handling, Forms, Dynamic UI Updates
Days 21-25: Asynchronous JavaScript – Promises, Async/Await, Fetch API, API Calls
Days 26-30: Advanced JavaScript – Closures, ES6 Features, Local Storage, Performance Optimization

My Biggest Takeaways ✅

JavaScript is not as intimidating as it seems. With the right approach, even the trickiest concepts become manageable.
Consistency is the key to mastery. Learning every day, even for a short time, helped me absorb and retain information.
Real-world practice is essential. The more I applied what I learned through projects, the more confident I became.

Who Should Take This Course? 💻

Beginners looking for a structured, step-by-step guide to learning JavaScript.
Developers who want to brush up on their JavaScript skills and strengthen their foundations.
Frontend Enthusiasts eager to build interactive, dynamic web applications.
Job Seekers & Interview Candidates preparing for coding assessments and technical interviews.

My Advice for JavaScript Learners 🎓

If you’ve been struggling with JavaScript like I was, don’t give up! Find a structured course, stay consistent, and apply your knowledge through coding challenges and projects. In just 30 days, I went from feeling lost to confidently writing and debugging JavaScript code.

Ready to Take Your JavaScript Skills to the Next Level?

If my journey resonates with you, I highly recommend checking out 30 Days of JavaScript. Commit to it, and in just a month, you’ll see a significant improvement in your JavaScript skills.

This course transformed my learning experience—maybe it can do the same for you! 🚀

Performance Metrics - WebPerf#0

Swapnadeep Mohapatra — Thu, 18 Aug 2022 08:16:09 +0000

You must have visited a lot of websites in your lifetime. And the user experience on the site is

Good site performance is sometimes vital for a good user experience (UX). But what is performance, how can it be measured, and how can it be improved?

Web Vitals

Web Vitals are the parameters on which a Site’s Performance is measured. Just like in a human body we have vitals like Blood Pressure, Pulse Rate, etc which are essential to know about the performance of a person, we have parameters like Largest Contentful Paint, First Contentful Paint, Cumulative Layout Shift, First Input Delay, etc to measure a website’s performance.

Core Web Vitals

Core Web Vitals are the subset of Web Vitals that apply to all web pages. The three Core Web Vitals are:

Largest Contentful Paint (LCP)
First Input Delay (FID)
Cumulative Layout Shift (CLS)

These core web vitals are based on the three main aspects of user experience: Loading, Interactivity, and Visual Stability

We will be learning these in very detail so here is a brief on them

Largest Contentful Paint (LCP)

It is the time taken by the site to load the largest image or text block visible within the viewport of a site.

First Input Delay (TID)

It is the time from when a user first interacts with a page (i.e. click a link, tap on a button) to the time when the site is able to begin processing event handlers in response to that interaction.

Cumulative Layout Shift (CLS)

You might have seen in some sites that the banner or the navbar is not rendered in the first go and is rendered afterward which causes the components below it to shift. CLS is a measure of that layout shift.

How is the core web vitals measured?

They can be measured by a variety of tools. Some of the most popular ones are:

It can be measured by a tool present in the chrome browser itself known as Lighhouse. Or it can be installed as a browser extension
It can be also measured through PageSpeed Insights
There is also a javascript library known as web-vitals which can be also used.

Example of how Web Vitals looks like

This is the measurement of my portfolio site. swapandeep.com

Connect with me

For more awesome JS or WebDev related blogs check out my profile

LinkedIn My Portfolio Twitter Instagram

Image credits: web.dev

.map() Polyfill

Swapnadeep Mohapatra — Sun, 29 Aug 2021 17:21:35 +0000

What is a polyfill?

Polyfill is code that implements a feature on web browsers that is expected to be provided by the browser natively but is not available. The developer uses one's logic to implement the solution.

What is .map()

It is an array function that is used to iterate over an array and create a new array with the results of the calling of the function. This comes in handy when we don't want to implement the for loop from scratch and want to modify all the elements of the array in the same way, hence saving a lot of time as well as some lines of code.

The function is applied in an array and takes in another function as a parameter (known as callback function). In the callback function's parameters the current element of the array, index , and the complete array are passed. They same way it happens in the .forEach() function.

.map() is very similar to that of .forEach(). But instead of returning the items, .map() returns the a new array by modifying the existing elements. (the old array doesn't get changed)

Writing the Polyfill

We will be iterating over an array of some listed companies in NSE and adding the prefix of "NSE:" before every stock.

var stocks = [
  'COLPAL',
  'ITC',
  'IOC',
  'NHPC',
  'INFY',
]

Firstly let's try running the native .map()

nseStocks = stocks.map(function (stock) {
  return `NSE: ${stock}`
});

console.log(nseStocks)
// ["NSE: COLPAL", "NSE: ITC", "NSE: IOC", "NSE: NHPC", "NSE: INFY"]

So, now let's write the polyfill and add the map function to the prototype of Array.

Array.prototype.myMap = function (callback) {
  var newArray = [];
  for (var i = 0; i < this.length; i++) {
    newArray[i] = callback(this[i], i, this)
  }
  return newArray;
}

Now let's try running our polyfill.

nseStocks = stocks.myMap(function (stock) {
  return `NSE: ${stock}`
});

console.log(nseStocks)
// ["NSE: COLPAL", "NSE: ITC", "NSE: IOC", "NSE: NHPC", "NSE: INFY"]

Connect with me

For more awesome JS or WebDev related blogs check out my profile

LinkedIn My Portfolio Twitter Instagram

.forEach() Polyfill

Swapnadeep Mohapatra — Wed, 18 Aug 2021 12:20:38 +0000

What is a polyfill?

Polyfill is code that implements a feature on web browsers that is expected to be provided by the browser natively but is not available. The developer uses one's logic to implement the solution.

What is .forEach()

It is an array function that is used to iterate over an array. This function comes in handy when we don't want to implement the for loop from scratch, hence saving a lot of time as well as some lines of code.

Writing the Polyfill

We will be iterating over an array of some listed companies in NSE.

var nseStocks = [
  'PIDILITIND',
  'ASIANPAINT',
  'ZOMATO',
  'RELIANCE',
  'INFY',
]

Firstly let's try running the native .forEach()

nseStocks.forEach(function (stock) {
  console.log(stock);
});

// PIDILITIND
// ASIANPAINT
// ZOMATO
// RELIANCE
// INFY

So, we will be adding the forEach function to the prototype of Array.

Array.prototype.myForEach = function (callback) {
  for (var i = 0; i < this.length; i++) {
    callback(this[i], i, this)
  }
}

Now let's try running our polyfill.

nseStocks.myForEach(function (stock) {
  console.log(stock);
});

// PIDILITIND
// ASIANPAINT
// ZOMATO
// RELIANCE
// INFY

Connect with me

For more awesome JS or WebDev related blogs check out my profile

LinkedIn My Portfolio Twitter Instagram

How I landed a Software Developer job at the age 16

Swapnadeep Mohapatra — Mon, 01 Jun 2020 07:36:43 +0000

How it began

It was 14th December 2017 when I first installed Android Studio in my PC. Back then I didn’t understand a single line of code, was really overwhelmed to see such syntax and immediately shut it. Fast forward to March 2018, I took an Android Development Course from Udacity and my programing journey started from that day on. To be honest, Udacity’s simplified courses helped me overcome my fear of code and I was able to try things on my own. I also learnt Java and a bit of GitHub & Git from another website called LearnCodeOnline.

Later that year I started working with IoT for one of my school projects and got the opportunity to travel across the country displaying my project and winning many nation level competitions as well. This gave me the confidence to explore more and soon I started to code as a hobby.
Around March 2019 I started learning JavaScript, I really like that language – it is simple and the most important thing is that we do not need to declare the type. What also fascinated me was that we can develop pretty much everything with JavaScript. After completing JavaScript, I took a React-Native course from LCO which was pretty awesome. It was the first time I used JavaScript to develop products.

Experience with freelance

In the summer of 2019, after learning React-Native, JavaScript and Android Development I thought to get my hands on some freelance projects. I started with supporting some college projects, gained a good initial experience, and gradually moved towards complex projects. Back then I wasn’t aware of the monetary value of this kind of work. I remember having worked on an Android project that had almost 20K lines of code with database, GPS, Notifications and a whole lot of other things, for INR 600. However, I learnt a lot from these projects. I faced many challenges while debugging that improved my debugging skills, and gave me a kick start to work with a real project.

#TeamTanay

After June 2019, I didn’t get much time to code, as I had to study for my 10th board exams. One day I came across a particular video on Instagram where a Microsoft employee, Tanay Pratap was talking about the gaps in our college education system that really touched my heart. I followed him on social media and started learning React from his YouTube videos. It was through his channel that I got to know React is trending in the web world. Coding in React is pretty similar to React-Native and as I have a bit of experience in React-Native, it helped me understand the concepts of React to a great deal. Within a week I was quite comfortable with React.

Finally after my board exams were over in March 2020, I came across the #TeamTanayJobChallenge where one has to build 5 projects, 3 blogs and get 2 reviews in order to get a job interview. I thought of giving it a try to understand the tech world and to assess myself.

Getting into MERN stack

I studied full stack development in MERN from an LCO course, and started with building an e-Commerce site that taught me a lot. I got to work with payment gateways and understood how file structure works in big apps.

Once I had a solid knowledge in MERN, I thought of building clone of big apps as a learning experience. I started with Tinder whose swiping cards feature is cool. I came up with an app named TinDev where developers can left or right swipe other developers and can collaborate based on their coding preferences. It turned out to be quite good with 160+ users.

Likewise, I built a clone of YouTube, called DevTube which has over 500 views. Here I worked with uploading files, playing views, handling likes, dislikes, comments, subscription and many other things.

With different projects I built, I used different CSS frameworks so that I get to work with a variety of CSS flavors.

Getting my job interview

After successfully completing 5P 3B 2R as part of the #TeamTanayJobChallenge, Tanay forwarded my profile to one of the hiring partners, he liked it and that’s how I got my first interview.

It was not a regular interview where the recruiter asks about data structures, algorithms and other technical questions. Instead, I was given a Figma UI design and asked to code in React and submit. My code underwent some code reviews, I was suggested some changes which I addressed and I was hired. Although it seems simple, the whole process was unknown to me, I ended up doing quite a few typos and forgot to adhere to the best practices, but later it was all taken care of.

What do I do?

I am working as a Frontend React Developer, and currently developing an application dashboard that will be managed by the end consumers.

While adapting to this new atmosphere, I am learning a lot from the day to day challenges, and getting to work on new technologies (such as SASS). Overall, I am enjoying this whole experience and look forward to many such opportunities that will strengthen my skills and help me realize my goals.

Connect with me

useEffect()- React Hooks

Swapnadeep Mohapatra — Thu, 14 May 2020 08:16:31 +0000

What is React Hooks?

Hooks are functions that let you use the React state and lifecycle events in a functional component. Hooks won't work inside classes. They came into existence to solve many problems created by the class-based components. In class, it was hard to reuse stateful logic between components. But in function, hooks allow us to reuse stateful logic without changing the component hierarchy.

There are many Hooks. Two of the most commonly used are State Hook and Effect Hook. In this post, we will be taking a look at the Effect Hook.

What is Effect Hook?

If you have used class-based components in react then you might be knowing about the Lifecycle events like componentDidMount, componentDidUpdate, and componentWillUnmount. The Effect Hook, useEffect, serves the same purpose as these but unified into a single API.

How to use Effect Hook?

Now we will be using the mighty Effect Hook.

importing useEffect

import React, { useEffect } from 'react'

Calling on every render

This function will be called on every render of the component.

// called on every render
useEffect(function callMeEveryRender(){
    // do something
});

Calling on Mount

This function will be called when the component will be mounted.

// called only on mount
useEffect(function callMeOnMount(){
    // do something
}, []);

Calling when value changes

This function will be called when the value count changes.

// called when count changes
useEffect(function callMeOnCountChanges(){
    // do something
},[count]);

Calling and Cleaning up on every render

This function will be called on every render of the component and perform the cleanup.

// called when count changes
useEffect(function callMeAndCleanupEveryRender(){
    return function foo(){
        // do something
    }
});

Calling on Mount and cleanup before Unmount

This function will be called when the component will be mounted and perform the cleanup before the component gets unmounted.

// called only on mount and cleanup before unmount
useEffect(function callMeOnMountAndCleanupBeforeUnmount(){
    return function foo(){
        // do something
    }
},[]);

Some rules of useEffect

Don’t call Hooks inside loops, conditions, or nested functions. Only call Hooks at the top level.
Don’t call Hooks from regular JavaScript functions. Only call Hooks from React function components.

And don't break the rules, if you will then you will be in great trouble and may get into infinity loops.

Conclusion

We have seen how to use useEffect in a React Function Component

I hope this helped you with understanding useEffect!
Thanks for reading!
Happy Coding!

How to get started with React Router

Swapnadeep Mohapatra — Mon, 04 May 2020 16:07:43 +0000

What is React Router?

Before learning about React Router let's see whats react and why we need to use react-router?

React

React is a JavaScript framework that is used to make SPAs (Single Page Application).

Single Page Application (SPAs)

It's a website that has only one page. It re-renders its content in response to actions without refreshing the page. Simply, You don’t need to refresh the whole page when you click on any link.

Why to use react-router?

As the page won't reload so how to change pages? So, here comes react-router which is used to move between different pages of the application without refreshing the page.

So, I hope now you know why we use react-router.

Let's now start by creating a react project and use react-router in that.

Create a New React Application

Firstly create a new react application and call it routerapp. Run the command below in your command prompt/terminal/git bash.

create-react-app routerapp

Now, you will see a new folder created and inside the file, you can see something similar to this.

Now navigate into the folder using the below command.

cd routerapp

Install React Router Dom

Now it's time to install the react-router-dom NPM package into the project. To do run the below command.

npm install react-router-dom
or
yarn add react-router-dom

Let's run the app

Now you can run the app using the below command.

npm start
or
yarn start

After a while, you can see the browser popping up and showing a site at localhost:3000

And it looks something like this.

Open the project in Editor

Open the project in your editor or IDE of your choice and open app.js from the src folder.

Now delete the previously written code and let's write it from the scratch.

import React from "react"

const App = () => {
    return (
        <div>
           <h1>Hello World</h1>
        </div>
    )
}

export default App;

Now let's add a new route

To create the first route in our app, let us import BrowserRouter from react-router-dom library.

import React from "react"
import { BrowserRouter, Route } from "react-router-dom"

Now create a new file named home.js and the home page should have a logic just like this.

const Home = () => {
    return (
        <div>
            <h1>Home Page</h1>
        </div>
    )
}

Now let's import the home page into our App.js

import Home from "./home"

Now it's time to create a route, for that we will be using from the react-router-dom. A has a prop called path which is always matched with the location of the app. On the basis of this prop, the desired component gets rendered.

const App = () => {
    return (
        <BrowserRouter>
            <Route path='/' exact component={Home} />
        </BrowserRouter>
    )
}

This will render the staring page as the home component.

Now, if we visit the site we will see the Home component being rendered.

Now let's add another as the second route and let's name it About.

import React from 'react';

function About() {
    return (
        <div>
            <h1>About</h1>
        </div>
    );
}

export default About;

Now let's add this route to the App.js

The App.js will look something like this.

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
    return (
        <BrowserRouter>
            <Route path="/" exact component={Home} />
            <Route path="/about" exact component={About} />
        </BrowserRouter>
    );
};

export default App;

If we go to localhost:3000/about. We will something like this.

Add Navigation

Now let's add a navbar so that we can easily navigate through these pages.

Firstly let's import NavLink from react-router-dom

import { BrowserRouter, Route, NavLink } from 'react-router-dom';

Now let's wrap the routes inside a div and add a navbar on the top.

const App = () => {
    return (
        <BrowserRouter>
            <div>
                <nav>
                    <NavLink to="/">Home</NavLink>
                    <NavLink to="/about">About</NavLink>
                </nav>
                <Route path="/" exact component={Home} />
                <Route path="/about" exact component={About} />
            </div>
        </BrowserRouter>
    );
};

It will look something like this.

You can add a bit of styling to make it look a bit beautiful.

import React from 'react';
import { BrowserRouter, Route, NavLink } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
    return (
        <BrowserRouter>
            <div style={{ margin: 10 }}>
                <nav>
                    <NavLink to="/" style={{ padding: 10 }}>
                        Home
                    </NavLink>

                    <NavLink to="/about" style={{ padding: 10 }}>
                        About
                    </NavLink>
                </nav>
                <Route path="/" exact component={Home} />
                <Route path="/about" exact component={About} />
            </div>
        </BrowserRouter>
    );
};

export default App;

The app looks now a bit better. You can navigate between the pages by clicking on the links.

The app is now completed. It's time for some theory.

exact
This will make the path to match exactly to assigned value. For example, in about route, it will be matched on /about not /about/me

path
Inside the path, the path that will link to the component is assigned. For example, /about is assigned to go to the assigned component.

component
Here the component that is to be rendered is passed. For example, About is passed if the About component is to be rendered.

to
Here the path of the component that is to be rendered on click is passed. For example, /about is passed if on click of the NavLink, 'about' is to be rendered.

Conclusion

We have seen how to get started with React Router and enable routing in a React SPA.

I hope this helped you with understanding React Routing!
Thanks for reading!
Happy Coding!

What is Redux?

Swapnadeep Mohapatra — Mon, 04 May 2020 14:04:20 +0000

Everyone on this planet refers Redux to be a state management JavaScript Library but what it is exactly.

Redux is obviously a State Management Library. With this, the state of the application is stored aside in a store and every component can access this from this Central Store.

Why you need state management?

In apps of most libraries like React, React Native, Angular, etc data travels from one component to another one step at a time. This may be easy for an app having fewer components like 5 or 10 components. But when an app has like 50 or 100 components then it becomes really confusing to track how information is passed from one to another and thus making debugging really tough.

On the other hand with Redux. When a component does some changes that go straight to our store from where the change is then communicated to all other components. Therefore, it makes it debugging easy.

Green is the components that updates and blue is the central store

How Redux Works?

Before knowing how it works let’s see a real like example so that we can relate to it.

If in a country people are unhappy with some law and they want to make some changes, they cannot do that directly. For that, there are some procedures.

Firstly, people make a protest for a law to be changed. They make their appeal to the ministers who are in power. The ministers take that for debates into the parliament and after that, the law is amended in the parliament. Then the parliament notifies the press so that they can notify the people about the changes made.

Similarly, Redux works.

Firstly, a component dispatches an action. The action goes to the reducers. The reducers make changes in the Central Store. The Central Store triggers subscriptions that pass updated States as Props to the component about the changes made.

Here what is what?

Components are the People. Dispatches are just like Protests. Actions are the laws. Reducers work as ministers. Here Central Store is the Parliament. Triggers are just like notifications. Subscriptions are the Press. And finally, the updated States As Props are passed like the news is passed.

Learning about the Jargons

Actions

They are what we want to do. They are the events and the only way to send data to the store. For example, “add a number”

Reducer

They are the functions that tell how the state should change in response to each action. For example, “our state should be higher than our existing state”

Store

It is the one and only place where the store state of the application is present. It brings everything together. For example, “it contains the number”.

Conclusion

We have seen how Redux works and what redux is exactly. We will further see Redux in action in some other blog.

Redux is used in some large scale applications. Without Redux, your apps will also work but it is better to get use Redux in your apps as it has its own benefits.
But you should not go on adding Redux to all of your apps.

I hope this helped you with understanding Redux! Thanks for reading! Happy Coding!

19 App Ideas for the Job Challenge

Swapnadeep Mohapatra — Mon, 04 May 2020 13:49:18 +0000

Here are some APIs and some app ideas that you can try for making projects and those can help you get a job or an internship.

All the data has been collected from the live stream done by Tanay Pratap and Sarosh Mohammad in the Instagram account of Tanay. You can get the list of all this API from the resources section given below.

Clarifai API

It offers image and video recognition as a service. It can recognize Celebrities, food, travel, face, NSFW and a lot more.

https://www.clarifai.com/

You can use this API to make a gallery app that can tag your photos and you can use it to easily navigate to the right photo by searching for that tag.

This can be also helped in a nutrition app where you can give it some photos and this API can get you the food name and type and combining with other APIs you can make the user know about the nutrition value of the app. This can turn out to be an awesome Diet App.

Open Weather Weather API

It offers Current & Forecast weather data collection. Access current weather data for any location including over 200,000 cities.

https://openweathermap.org/

This can be married with a travel booking app so that you can get some really good suggestions about the weather of the location for which you are booking tickets for your travel period so that you can choose whether to go or not.

It can also turn out to be a great Chrome Plugin that can give you the weather for the location of the period for which you are planning your journey. And you can decide accordingly.

JokeAPI

Can be used to get Programming and Miscellaneous jokes.

https://sv443.net/jokeapi/v2

You can make an NPM package out of it which can put some good jokes in front of the user while the page loads. This can make the waiting for the page load very interesting. This also may happen that the user stops the page loading to read the joke. 😉

This can be used in a chatbot which can suggest you put some jokes in the middle of any humorous conversation.

Edamam API

It offers access to a vast database of Recipes! (Also with Nutrition info for the diet conscious)

https://developer.edamam.com/

You can think of making a product where it challenges a recipe every day to make. Perfect skill to learn while quarantine is going on 😋. This can be a really good Recipe App for the diet conscious people where they can put the nutrition value like the amount calorie, carb, protein, etc and it can suggest some really good recipe.

URLTOSCREENSHOT

This API gets a screenshot from a webpage. Simply indicate the webpage url, and our API will do the rest. You can also indicate various parameters such as width, height, allocated time, and mobile view settings.

http://www.urltoscreenshot.com/

This can be used in a blog to put some screenshots. In case the page is removed then this can be useful.

IndiaStack

This provides API support for Aadhaar, eKYC, eSign, UPI and DigitalLocker. API’s for India made for people.

https://www.indiastack.org/

This API can be used for verifying the Aadhar number of users. And the use of UPI can not be kept limited.

Corona API

This lets you get status of affected people, recovered cases and much more., you can access it here

https://github.com/pomber/covid19

You can make an infographic app and show the status of this widespread pandemic.

languagelayer

Provides you with JSON API supporting 173 languages, a simple way to automate language detection. You can access it here.

https://languagelayer.com/

This API is useful in interaction with people with other countries whose language you cannot understand. This can be used in a chatbot or can be used in the chat of multiplayer games. In multiplayer games like PUBG where gammers from different countries play together and chat, you can integrate this there and do the live translation of chats.

Mailbox Validator:

The Single Email Validation API does validation on a single email address and returns all the validation results in either JSON or XML format.

https://www.mailboxvalidator.com/api-single-validation?ref=apilist.fun

This API can be great while email validation. If the app uses the email for sending subscription emails or newsletter then it can be used greatly for the validation. The user cannot get away by entering a fake email id.

Bored

Provides API with the data of random activities to fight boredom.

https://www.boredapi.com/documentation

This can be merged with the Corona App so that you don’t feel bored while the quarantine or self-isolation.

Holidays

Provides API with Historical data regarding holidays.

https://holidayapi.com/

This can be used as a very good trivia app. This can be great if you can be integrated into a loader in booking or planning applications. This is a great thing for engagement in your portfolio or your blog.

NASA API

They have APIs that return Mars images captured by rovers, APIs for earth pictures from space and an API that returns near-earth objects.

https://api.nasa.gov/

This would be great to make a wallpaper app. Some kind of theme app would be a great app to build around this API.

Spotify API

It provides API to manage spotify play list, pause, play songs, make playlist and much more

https://developer.spotify.com/documentation/web-api/

This can be used to get a suggestion about some really good music. This can be used as an app that can suggest music based on your mood. You can also give it a piece of music and you can get music out of that.

This can be an added on top of Instagram to give you music to put on your stories by the analysis of the images in the story.

Google Books API

By using google book API application can perform full-text searches and retrieve book information, viewability, and eBook availability. It can also manage personal bookshelves.

https://developers.google.com/books

This can turn out to be a great recommendation system for books. You can get books based on your likes. You can put genre, past reading history, social profile, and other things and with the help of some AI Engines, you can get the recommendation and then can suggest some really good pieces of books.

You can also you this to get quotes from a book or the other way around. This can also be turned into a Chrome Plugin where you can get all of the details of the quote, who wrote it, from which book it came from and all other information.

PlayerUnknown’s Battlegrounds

Provides API with data of PUBG players and stats.

https://developer.pubg.com/

With the help of this, you can develop some online games like the trump card. This can be a stress buster and at the time of quarantine, it can help you get out of boredom.

Rick and Morty API

Information about the characters from the series, “Rick and Morty”

https://rickandmortyapi.com/documentation

With the API of this amazing cartoon series, you can make some trivia app. You can also make an app for fan stories.

Resources

https://github.com/tanaypratap/teamtanay.jobchallenge.dev/issues/232

https://twitter.com/tanaypratap/status/1238738672075165696

About me

Hey folks, I am Swapnadeep Mohapatra. I just got done with my class 10 this week. I am an Android and Web Developer. I have been coding for the past 2 years. I have done about 6 freelance projects in my vacations. I have won 4 national level science exhibitions for my innovation. I was featured 4 times in newspapers including TOI & Indian Express. I have experience with IoT and I am currently trying my hands with MERN Stack.

Connect with me

My Portfolio

Instagram

Twitter