DEV Community: Gulshan Aggarwal

TEMPLINK Single, Secure link to access multiple files in seconds

Gulshan Aggarwal — Sun, 13 Oct 2024 19:30:25 +0000

What TEMPLINK actually do?

Templink allows you to create a single, secure link to access multiple files in just a few seconds. With options to set expiration dates and password protection, you get full control over your file sharing experience.

Try here - https://templink-nu.vercel.app/
Github Repo - https://github.com/Gulshanaggarwal/TempLink

Features

1.Drop or upload images, documents, audio, and video files and generate a single link to access them.

2.You can set an expiration time for your link, or choose "Never" for permanent access.

3.You can add an extra layer of security by enabling optional password protection.

4.Support of various file types:
Images: JPG, PNG, GIF, WEBP
Documents: PDF, Word, Excel, PowerPoint
Audio: MP3, OGG, WAV
Videos: MP4

Integration with PINATA

TEMPLINK integrates with PINATA to upload various types of file quickly & expire those files on specified time if user has selected any expiry option while generating link. File expiry is being handled by PINATA which allows to focus on other important parts of the app.

Motivation

I'm looking to switch in upcoming months of my software developer journey after working 2 years with a startup since college. Just thought, need to brush-up my skills & push myself a bit extra on weekends, so did that.

Thanks for reading, have a nice day!

JOBPKDO- you may be the next one who gets the job through Twitter

Gulshan Aggarwal — Thu, 08 Dec 2022 19:38:08 +0000

What I built

I've built a platform, titled as JOBPKDO which allows people to search for job tweets that come through Twitter daily.

Inspiration

(What made you decide to build this particular app? What inspired you?)
Recently I secured a full-time job as a full-stack dev in a Start-up company & the best thing about the job is I got it from Twitter. So I thought if I make a platform like this then it would be easy for everyone to search for jobs like me.

Now the question arises why people can't search through Twitter ?
You know there are lots of unnecessary tweets which may distract a user, but JOBPKDO brings only JOB-specific tweets for you.

Category Submission:

Choose Your Own Adventure

App Link

https://jobpkdo.vercel.app/

Screenshots

Features

Jobmarket Page

Bookmarks Page

Link to Source Code

Repo Link - https://github.com/Gulshanaggarwal/v2.jobpkdo

Permissive License

Apache-2

How I built it

(How did you utilize MongoDB Atlas? Did you learn something new along the way? Pick up a new skill?)
I've used MongoDB Atlas to save users' login data & bookmark data. Yes, during the project I first-time used Typescript which is a totally new learning experience for me.

What's next?

Notification & Reply features are the two features that are currently under development. The notification feature will notify you for the tweets you saved directly to your mailbox.
The Reply feature is a totally advanced feature where users need to register to the platform for once only & then they can reply to a tweet with our JOBPKDO handle while using Twitter, JOBPKDO will auto-save the job for them.

🏁 That's all about the project. Suggestions & reviews are welcome ♥

5 NPM Packages you can use for Drag & Drop in your React app 🙌

Gulshan Aggarwal — Tue, 19 Jul 2022 12:52:51 +0000

Drag & Drop is something that can enhance your user's experience if you are building graphic designing tools like Canva. A few days back, I developed a blog post cover designing tool titled Cover-Builder that allows you to create nice cover images for your blog posts. The tool heavily relies on Drag & Drop feature. This was the first time, I was looking to add Drag & Drop into any of my apps & luckily found some cool packages.

1. React-Dnd - When it comes to dragging into different parts of your application then this is the most used package by developers.
Note: You will also need to install a second package react-dnd-html5-backend so that react-dnd can use HTML 5 drag-drop API under the hood.

2. React-Beautiful-Dnd - Most famous package to create beautiful drag and drop lists that anyone can use - even people who cannot see. It provides you features like multi-dragging, auto-scrolling, and support for mouse, keyboard, and touch devices.

3. React-Draggable - Unlike the react-dnd package, you need to install only a single package here. It provides you a draggable component that you can wrap around the element you are looking to drag & that's all. Here you can also pass props like defaultposition, axis & some others for customization.

4. React-Rnd - If you are looking to resize your items with Drag &Drop then this is for you. Like React-Draggable it also allows you to pass some props for better customization.
Note: It also has a bound prop which allows you to bound Drag & Drops in a particular region.

5. React-Dropzone - Creating Drag & Drop feature for uploading files is not so easy task, many JS events are involved in it. This package makes file Drag & Drop handling easy for you.

🏁 The aim of the article is to give you a brief look of available Drag & Drop packages which can make Drag & Drop easy for you. If you have used another package let me in know in the comments.

Thank you for reading.

Add Github Star Icon to your project in just 1 HTML tag

Gulshan Aggarwal — Wed, 06 Jul 2022 06:05:36 +0000

Do you know you can add Github Icons like Star, Fork & others to your project in just 1 line of code?
If not, then keep reading...

You might have seen the Github star icon on many websites or projects that shows the total number of people who marked the repo as a star & clicking it redirects you to the repo where you can also mark it as a star.

Let's jump into the code

<iframe 
src="https://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=star&count=true&size=large" frameborder="0"
scrolling="0"
width="170"
height="30"
title="GitHub">
</iframe>

Live Examples

You may be thinking...

How can I customize it for my own repo? 🤔
Src attribute let you customize it, by changing query parameter key values you can make it useable for your own repo. Let's take a look at these 5 important keys of the URL-

user - replace it with your Github Username
repo - your repo name
type -icon type(keep the value same)
count - shows the number of star count(optional)
size - for large icons(optional)

You are almost done!
But what if I want to resize the icon ?🤔
Ok, then there are also some other attributes such as width and height that are gonna help you in resizing. Don't add pixels units with width & height attribute, just add the value & then it will automatically do it for you.

🏁 Here we discussed one of the commonly used star icon, there is more than that, read more about other icons here.
If you know a better way then let me know in the comments.

Thank you for reading

Let's generate cover for your blog posts using Cover Builder

Gulshan Aggarwal — Mon, 04 Jul 2022 07:37:17 +0000

A few days back I went through an open-source project blog-cover which is designed to build cover images for your blogs. I was just thinking about its design, and build process, then I thought I should also try to build a similar kind of cool app to polish my skills & that's the way Cover Builder born.

App Link:- https://cover-builder.vercel.app/
Github Link:- https://github.com/Gulshanaggarwal/coverbuilder

Key Features

Unlimited images from Unsplash
Custom Image Upload & auto Save in browser storage
Pre-Written Texts
Emojis

🏁 That's all about the project. Suggestions & reviews are welcome ♥

Say Goodbye to console.log from Production environment

Gulshan Aggarwal — Fri, 24 Jun 2022 04:57:42 +0000

I have been working on a project with Next.js since last month and used the console.log statement in lots of components & files even though I don't remember. Usually, we use it to check API responses and some other areas of the application.

Making console statements public is not a good idea at all, it may bring your app at a security risk. Checking every file, and deleting the statement is very time-consuming & boring too. As a developer, we all hate boring tasks so, in the article here we discuss how you can say goodbye to console.log in your Next.js app from the Production environment in just less than 1 minute.

Sounds good! let's goooo...😎

👉 Follow the steps mentioned below -

1. Install the babel-plugin-transform-remove-console package as a development dependency.

2. Create a .babelrc file at the root of your project, copy the below content & that's all.



{
    "presets": [
        "next/babel"
    ],
    "env": {
        "production": {
            "plugins": [
                "transform-remove-console"
            ]
        }
    }
}

🏁 This is just a short trick that I used to enhance my productivity, even you should use it next time.
I will keep sharing more tips & tricks related to web dev,stay tuned!.

Thanks for reading.

9 Beautiful Cool Text Effects using Google font Effects👌

Gulshan Aggarwal — Sun, 12 Jun 2022 10:18:49 +0000

Looking to style your headers or text in a more decorative way? Then you are in right place. We all use google fonts in our daily projects but did you ever notice google font is more than just that. Google fonts provide a font effect feature that is less popular & can help you in generating stylish text for your projects.

Are you, excited gang?

How to use this feature?

Simply add effect= to your Google Fonts API request and add the corresponding class name to the HTML element(s) that you want to affect. In our example above, we used the shadow-multiple font effect, so the request would look like this:



https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple

To use the effect, add the corresponding class name to your HTML element(s). The corresponding class name is always the effect name prefixed with font-effect-, so the class name for shadow-multiple would be font-effect-shadow-multiple:



<div class="font-effect-shadow-multiple">This is a font effect!<div>

You can request multiple effects by separating the effect names with a pipe character (|).



https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

👇Here is a list of some of the effects that API offers -

Note:- Google font API offers 25+ effects but Some of the font effects (e.g. 3d) do not scale particularly well, and tend to look best when used with larger font sizes. Read more about the feature in the docs here.

Thanks for reading!

Day.js a cool library for working with Dates in JavaScript🙈

Gulshan Aggarwal — Wed, 08 Jun 2022 08:57:43 +0000

In the previous article, we discussed JavaScript date libraries which make working with date & time easy. Working with dates isn't so hard although it wasted a lot of my time so, during the last hackathon project I found this cool library.

👉 How to install ?
Use the npm install dayjs command

⚠️ Day.js also ships with Typescript declaration in the npm package, if you feel trouble while importing Day.js then check out the guide here

Can't wait, excited! lets gooooo...

How Dayjs is different from the native Date.prototype?
Instead of modifying the native JavaScript Date object it creates a wrapper around it & returns an immutable object. If we apply any operations on this object it will return a new instance of it.

Confused 😕
You might get confused about what the immutable date object Dayjs gives us & how it is different from a regular JavaScript date object which is mutable. So let's kick off the confusion & understand it with a clear example.

let d = new Date();
console.log(d);  // 2022-06-06T08:13:28.387Z
let d1 = d.setMonth(2);
console.log(d); // 2022-03-06T08:13:28.387Z

// value of object changed.

let d = dayjs();
console.log(d); // {
  '$L': 'en',
  '$d': 2022-06-06T08:13:28.391Z,
  '$x': {},
  '$y': 2022,
  '$M': 5,
  '$D': 6,
  '$W': 1,
  '$H': 13,
  '$m': 43,
  '$s': 28,
  '$ms': 391
}
let d1 = dayjs.set('month',2);
console.log(d); // {
  '$L': 'en',
  '$d': 2022-06-06T08:13:28.391Z,
  '$x': {},
  '$y': 2022,
  '$M': 5,
  '$D': 6,
  '$W': 1,
  '$H': 13,
  '$m': 43,
  '$s': 28,
  '$ms': 391
}

// value of object remains same.

What does the above example do?
In both coding examples, we create first a date object and then set the month value to 2. If you see the output of the console you will find the object we created in the first code gets modified but the object we created using Day.js keep remains the same after the operation so, it shows the immutability of the Day.js.

Now we have understood how Day.js is different from the native JS date object so let's move ahead & understand Day.js with the help of a few examples.

How to get the current date object using Dayjs ?

import dayjs from 'dayjs';
const d = dayjs();
console.log(d);
// {
  '$L': 'en',
  '$d': 2022-06-06T08:13:28.391Z,
  '$x': {},
  '$y': 2022,
  '$M': 5,
  '$D': 6,
  '$W': 1,
  '$H': 13,
  '$m': 43,
  '$s': 28,
  '$ms': 391
}

The object contains lots of helpful properties such as year, month, date, hours, minutes, seconds & more.

How to convert a UNIX Timestamp into a nice Dayjs object?

const timeStampValue = 1318781876406  // in milliseconds
const d = dayjs(timeStampValue);

TimeStamp value is also possible in seconds.

How to create a Day.js object with a pre-existing date?

const d = new Date(2018, 8, 18)
const day = dayjs(d)

How to validate a value whether the Dayjs's date is valid?

const isValid = dayjs('2022-06-06').isValid; 
console.log(isValid);  // true

How to get a particular value like Milliseconds, Hour, Month, Minute....?

Get the Milliseconds from the current time

dayjs().millisecond()

Get the Hour from the current time

dayjs().hour()

Get more details for fields such as Date of the month & Day of the week read here;

How to perform addition & substraction with dayjs object ?

Adding 1 day in the current time

dayjs().add(1,'day');

Subtracting 1 year from the current time

dayjs().subtract(1,'year')

How to display the current time in Day,DD/MM/YY format?

const d = dayjs();
console.log(d.format('dddd, DD/MM/YY')); // Tuesday, 07/06/22

Where dddd returns the name of the day of the week, DD date, MM months & YY year. You can apply /, , or more symbols like these as a parameter. There are more formats available check out here

⚠️ Up to now, we have discussed available methods & formats without any kind of plugin usage. Dayjs also supports a lot of useful plugins such as utc(for converting time in UTC), IsLeapYear(for checking Leap year or not) & much more...

How to install a plugin?

Day.js doesn't provide by default plugin support, although it provides plugin support in the same package but inside a plugin submodule. For example, If we need a UTC plugin that provides us time in UTC then we should extend something like below-

const dayjs = require("dayjs");  // import dayjs
const utc = require('dayjs/plugin/utc');  // import utc plugin 
dayjs.extend(utc) // connect the plugin with dayjs

How to get the week of the year with the help of the weekOfYear plugin?

const dayjs = require("dayjs");
const weekOfYear = require("dayjs/plugin/weekOfYear); // import week of year plugin
dayjs.extend(weekOfYear);

console.log(dayjs().week()); // returns week of the year

For more plugins checkout here

🏁 Here, I shared my learnings with Day.js, we discussed basic methods, formats & a little bit about plugins, although day.js provides more formats, and a timezone-based time feature that requires plugin support.

JS Date-Time libraries you should use instead of traditional methods 😋

Gulshan Aggarwal — Tue, 31 May 2022 06:07:20 +0000

Working with Dates is a common task while building an application. First, we store the Date object, retrieve & then convert it into readable form, when it comes to a special format traditionally, we need to use a lot of functions and methods that make the process problematic and complex.

Even when I have used to work with dates, converting them into desirable formats becomes problematic. I used to do a lot of research over the StackOverflow; how to change into this, that format blah blah ...
So, through the article, we will see a few JS libraries which will make the building process easy.

1. Day.js - Day.js is a minimalist JavaScript library for working the dates and times.

Bundle size 2KB which is very less.
Alternative to moment.js.
Works both with Node.js and Browser.
Install using npm install dayjs command

2️. date-fns - This is a modern JS library that is simple & a toolset for manipulating dates.

Simple & 200+ functions.
Works both with Node.js and Browser.
Install using npm install date-fns command.
date-fns provides some optional features through submodules in the same package.

3. js-joda - js-joda is a lightweight & fast library which has no third party dependencies.

43Kb Size and compressed
Works both with Node.js and Browser.
Install using npm install @js-joda/core command.

4️. Luxon - If we need operations like add, subtract & parse with dates then, Luxon provides an easy way to deal with it.

Good for Math operations.
Works both with Node.js and Browser.
Install using npm install luxon command.

Q. Why we haven't discussed yet Moment.js 🤔

You might be thinking why we haven't discussed yet a famous library Moment.js. Moment.js itself says not to use it for your new projects because of its size and immutability of objects & as a result, it increases web application size.
-If you are using Moment in your old project then you should continue with it.

🏁 We have discussed Date-Time libraries that make working with JavaScript dates easy. I have personally used Day.js, so in the next article, we will take a deeper look at Day.js.

-If you have used some other library, please mention it in the comments, It will be great to see you.

NPM packages to generate Unique IDs for your next project 😎

Gulshan Aggarwal — Mon, 23 May 2022 05:40:20 +0000

While tweeting something or sharing something over Linkedin requires a unique id to identify a particular post. On the daily basis, we need to store or retrieve data uniquely & generating random numbers is not a cool idea. So through the post, we will take a look at the most commonly used NPM packages which are used for generating unique Ids.

1️⃣ UUID - UUID is the most popular npm package used for generating unique Ids. The npm package supports node version 10, 12, 14, and 16 & also provides support for React Native & browsers. It also supports version 1, 3, 4, and 5.
The Package can be installed by the npm install uuid command. It provides support for both ES6 and CommonJS syntax.

Using the ES6 module syntax -



import { v4 as uuidv4 } from 'uuid';

const userId=uuidv4();
console.log(userId); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

Using the CommonJS syntax -



const { v4: uuidv4 } = require('uuid');

const userId=uuidv4();
console.log(userId); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

The Module also provides a bunch of methods & methods for versions, check out all of them here 👉 Github

2️⃣ Nano ID - Nano ID is very popular, tiny, URL-friendly & 2 times faster than uuid.

The package can be installed by npm install --save nanoid command. Like uuid, it also provides support for both ES6 and CommonJS syntax.

Let's see an example through ES6 syntax -



import { nanoid } from 'nanoid'

const userId=nanoid();
console.log(userId); // => "V1StGXR8_Z5jdHi6B-myT"

Suppose, if we need to reduce the id size to 10, then we can pass size as an argument like this -



nanoid(10) //=> "IRFa-VaY2b"

3️⃣ Cuid -

Install using the command npm i cuid
Provides support for both ES6 and CommonJS syntax.
Example(using ES module syntax) -



import cuid from 'cuid';

console.log( cuid() );

// cjld2cjxh0000qzrmn831i7rn

4️⃣ crypto-random-string - It generates cryptographically strong random string.

Works in Node.js and browsers.
Install using the command npm install crypto-random-string
Example -



import cryptoRandomString from 'crypto-random-string';

cryptoRandomString({length: 10});
//=> '2cf05d94db'

It also supports a second argument type(optional) along with length. The Default value for the type is hex.

5️⃣ uniqid -

Install using the command npm install uniqid.
Unique Hexatridecimal ID generator.
Creates unique IDs based on the current time, process, and machine name.
Works in Node.js and browsers.



import uniqid from 'uniqid';

console.log(uniqid()); // -> 4n5pxq24kpiob12og9

🏁 We have discussed the npm packages which are used for generating unique IDs. If you use a different package feel free to mention it in the comments.

10 Free API resources for beginners 🤩

Gulshan Aggarwal — Thu, 19 May 2022 10:00:26 +0000

Application Programming Interface(APIs) makes it easy for two applications to talk to each other. Each time we book a movie ticket, flight ticket, or may be using Facebook, or Instagram we are using API.
As a beginner while we are learning to build something may be it a simple image gallery app or weather forecast app, we need data. So, In this article, we will see some free API resources that will help you to learn & build your app quickly.

The purpose of the article is to provide free API resources that are totally free and don't required any kind of registration.
Best thing about these resources are, they are CORS (cross-origin resource sharing) free.

1. Postman News API - The API provides you different types of news such as Health, Sports, Business, etc...
For example to fetch the health related top headlines you can request the endpoint mentioned below -
https://saurav.tech/NewsAPI/top-headlines/category/health/in.json

2. JSONPlaceholder - The most commonly used free fake API for testing & prototyping.

3. Lorem Picsum - Get random Unsplash images.

4. KONTEST - The API brings info about all running & future coding contests from different platforms like CodeForces, Hackerrank, Codechef, Leetcode etc..

5. Random User - If you need random users for your project then you should use it.

6. Postal Pin Code - Postal PIN Code API allows developers to get details of Post Office by searching Postal PIN Code or Post Office Branch Name of India.

7. Nager.Date - Get list of public holidays for more than 90 countries.

8. Coin Stats - A Crypto tracker API that provides you coin details with prices & latest crypto news from verified 40+ news sources.

9. Exchangerate.host - Exchange rates API is a simple and lightweight free service for current and historical foreign exchange rates & crypto exchange rates.

10. Bored - The Bored API helps you find things to do when you're bored! There are fields like the number of participants, activity type, and more that help you narrow down your results.

Conclusion - Through the article, we have seen free API resources which a beginner can use easily. There are still a lot of free APIs available but many of them require registration, check it out here - Public APIs

-If you like the article then don't forget like, comments & let's do some fun over the Twitter 😎

Cloudy- a storage service to store your files & folders

Gulshan Aggarwal — Thu, 12 May 2022 13:09:18 +0000

Overview of My Submission

Cloudy is a storage service that allows users to store their files & folders faster and securely. At Cloudy users can create folders and store their files smoothly. Cloudy is superfast at uploading your files, a user can upload multiple files at a time & It will take a very less amount of time compared to other services because of the Appwrite storage service.

Submission Category:

Web2 Wizards

Link to Code

Repo Link- https://github.com/Gulshanaggarwal/Cloudy

Features

Superfast file uploading(multiple files included)
Support file extensions- .jpg, .png, .gif, .txt, .pdf
Easy File Preview
File Download
File Link Copy
File & folder Delete(right click on a file or folder to delete)

Tech-Stack

NextJS
Appwrite
Firebase
Material-UI

We are already using Appwrite, then Firebase

We are using Appwrite's Login, SignIn & Storage services but for Database we preferred Firebase. The reason for choosing Firebase is the lack amount of support from Appwrite's database service, we have nested fields like the array of objects or deeply nested objects in our documents but Appwrite doesn't support these complex data structures. I opened a comment in the discussion thread regarding the problem, check it out here - comment

Additional resources and info

Screenshots

Dashboard page

Click on folder Icon(right side) for a new folder

Files + Folders

Click on a file for preview
File Details

Delete file & folder(click right button on a file or folder)

Contributors

@gulshanaggarwal and @aniruddhasoni

-If you like the post, then don't forget like, comments & let's have some fun over the Twitter