DEV Community: Utsav bhattarai

Introducing Snapshot - A high quality screenshot clicker

Utsav bhattarai — Fri, 20 Oct 2023 08:12:17 +0000

Overview

Snapshot is an MIT Licensed open-source solution, designed for effortless high-quality screenshot captures. Input the website URL you want to capture, tweak a few advanced settings if you fancy, and you're set! Plus, for registered users, there's the added convenience of saving and organizing these screenshots.

At a glance

Designed with user experience in mind, Snapshot presents:

1. Home page

The simple yet effective entry point to our tool.

2. Auth Page

3. Screenshot Preview

Instantly view the screenshot you've just taken.

4. Your Screenshot Collection page

For registered users, manage your saved screenshots with ease. Download or delete as per your preference.

5. Advanced Options

For those who like a little more control over their captures.

Behind the Scenes: Tech Stack 👨‍💻

Keeping things streamlined and effective, Snapshot employs:

Reactjs with vite: Driving our user-friendly frontend.
Amplication : Powering our backend operations. If you're new to Amplication, it's a fantastic platform that simplifies backend development, offering a versatile suite of tools to enhance and speed up the development process. It's particularly favored for its intuitive handling of data models and ease of integration.

How It Works ⚙️

I am not going to explain all of the technical stuff here. Instead, I will take you quick work through the web app.

At first, You need to enter the URL of the website where you want to take screenshots then, as per your requirement fill up or tick the advanced option and just hit the Take a shot button. then you are redirected to the image viewing page and there will be a download button by clicking it you can download the image. You get one more button to save the image if you are logged in.

But Sometimes, The Download button doesn't work. So, you have to right-click on the image and click on save as option to download it.

You can also access the collection of your saved screenshots by clicking on the button My collection on the top-right side of the navbar. At last, You can download or delete the saved screenshot by hovering them.

What I learned ?

Every project brings new lessons, and Snapshot was no different. Here’s a dive into the specifics:

Mastering Styling with Custom CSS:
While working on Snapshot, my skills with custom CSS grew leaps and bounds. I experimented with layouts, played with colors, and ensured the tool was as visually appealing as it was functional.
Discovering Amplication:
This was my first rendezvous with Amplication, and it's safe to say I'm impressed. It wasn’t just about learning a new backend service; it was about understanding its unique features and capabilities. The seamless data handling, intuitive setup, and scalability options were particularly eye-opening. I've been familiar with other backend platforms before, but Amplication stood out with its user-friendly approach and robust functionality. I can definitely see myself integrating it into future project.

Links

Source code: Click here

Amplication Docs: Click here

For the authentication using amplication, I got reference from tutorials provided by amplication. Click here

Conclusion

Building Snapshot during Hacktoberfest was a unique blend of challenges and discoveries.

Hacktoberfest, as we know, is a celebration of open-source contributions. Engaging with the open-source community during this event made the creation of Snapshot even more enlightening. Not only was I navigating my own learning curve, but I was also incorporating feedback, ideas, and sometimes even code from contributors worldwide.

Discovering Amplication amidst Hacktoberfest was like hitting a jackpot. I was already in the thick of coding and collaboration, and adding a new tool was challenging. But as I dug deep into Amplication, the community's support and shared experiences made the journey smoother and more insightful.

DevHub - Twitter for developer (Dev + Linode Hackathon)

Utsav bhattarai — Mon, 20 Feb 2023 19:18:01 +0000

What I built

For the hackathon submission, I built a web application called DevHub. DevHub is a platform that allows developers to connect with each other and stay informed about ongoing hackathons, as well as centralize all the resources on a single platform.

In addition to the features previously mentioned, DevHub has a web scraper that allows it to collect and display popular tech blog posts from around the internet. This feature makes it easy for developers to stay informed about the latest technology news and trends.

DevHub also offers an API that allows users to embed their "Devits" (tweets on DevHub) into their own websites. This feature makes it easy for developers to showcase their work and engage with their audience directly from their own website.

Category Submission:

Integration Innovators

App Link

DevHub

Screenshots

Hero section

Features section
Signup / login Page

Complete user profile page

Home Page

Discover page

Hackathons Page

Blogpost Page

API and credentials page

Specific Post

Description

DevHub is a web application that allows developers to connect with each other and stay informed about ongoing hackathons. With its Twitter-inspired interface, DevHub offers features such as tweeting, retweeting, and following other users. In addition, DevHub can collect and display popular tech blog posts from around the internet and allows developers to embed their Devits into their own websites through its API. By providing a platform for developers to connect, stay informed, and showcase their work, DevHub is a valuable tool for anyone looking to improve their coding skills and build their online presence.

Tools and Technologies

React JS (Frontend)
Node and Express (Backend)
Mongo DB (Database)
Linode (For serving the api and react app)
playwright(for web scraping)

Why we scrap a data ?

In DevHub, we use tools like Playwright, a Node.js library, to automate the web scraping process and make it more efficient. This helps us gather the information we need, such as popular blog posts from other platforms, to make it easier for developers to access the resources they need to stay up-to-date and grow their skills. Our goal is to provide a centralized platform for developers to find the information they need, and web scraping tools like Playwright are an important part of achieving that goal.

Link to Source Code

utsavbhattarai007 / twitter-for-developer

Introducing DebHub - Twitter for developer

Project Demo link

👉 DevHub

Description

In addition, DevHub can collect and display popular tech blog posts from around the internet and allows developers to embed their Devits into their own websites through its API. By providing a platform for developers to connect, stay informed, and showcase their work, DevHub is a valuable tool for anyone looking to improve their coding skills and build their online presence.

Why we scrap a data ?

In DevHub, we use tools like Puppeteer, a Node.js library, to automate the web scraping process and make it more efficient. This helps us gather the information we need, such as popular blog posts from other platforms…

View on GitHub

Permissive License

MIT

Background

The inspiration behind building DevHub was to create a platform where all the resources needed for developers are centralized at a single place. "By 'resources', I mean hackathons, blog posts, and tech news that are relevant to developers and can help them stay informed and up-to-date in their field. With DevHub, we set out to create a platform that makes it easier for developers to stay informed, connect with other developers, and grow their skills.

Our goal was not just to submit a hackathon project, but also to create a platform that would be useful for other developers as well. With DevHub, we hope to help other developers grow, share their insights, thoughts, and make connections with other developers in the community.

How I built it

I utilized Linode in two key ways while building DevHub. First, I used Linode to deploy the application, which helped me ensure that the app was accessible to users around the world. Second, I used Linode for DNS and domain configuration , which allowed me to manage the application's web address and ensure that it was easy to access.

Along the way, I learned a great deal about working with Linode and gained new skills that I can use in the future. For example, I learned about node balancing and how to optimize my application's performance. In addition, working with Linode helped me start my journey into the cloud, which is an important skill for developers in today's world.

Overall, I found Linode to be a valuable tool for building and deploying DevHub, and I look forward to using it again in the future.

Additional Resources/Info

I worked on this project in collaboration with Rajesh Khadka, and I have credited him by including links to his dev and Twitter profiles.

This blog is posted via Easy blog

Utsav bhattarai — Sat, 10 Dec 2022 08:47:37 +0000

Introduction
Hi everyone, This blog is posted through easy blog which is MIT licensed open source project which helps developer to post blogs in different blogging platform in just a few click.

Introducing Devport - a mini portfolio maker

Utsav bhattarai — Thu, 08 Dec 2022 15:33:34 +0000

What I built

I built the web app which is Devport, A stunning portfolio maker. It's help you specially developer to make the collection of their social media and showcase them with top notch customization. It has 7+ theme which you can try in your portfolio.

Category Submission:

Choose Your Own Adventure

App Link

Devport 👉 devport.me

Screenshots

Home page

Feature page

Dashboard Page(Set up Link)

Customization page

Profile page

Search page

Portfolio page

Automated mail

Description

Devport is the MIT licensed open source project that helps you specially developer to make stunning dev portfolio with top notch customization and good looking UI. You can also switch the status of your portfolio to active or offline. And One last thing, You can also subscribe to our newsletter to get engagement update of your portfolio.

Features

Create Portfolio - You can create your portfolio with your own information in just a few minutes.
Top notch customization - You can use any of the 7+ pre-built themes to customize your portfolio.
Active/Offline status - You can switch the status of your portfolio to active or offline.
Newsletter - You can subscribe to our newsletter to get engagement update of your portfolio. There is a automated auto running in server which track the views of every user whose newsletter is enable.
SEO friendly - This website is SEO friendly. You can easily rank your portfolio on google.
JWT based login system - Devport is fully optimized by jwt due to which It has secure environment.

Link to Source Code

utsavdotdev / portfolio-maker

A mini portfolio maker with full customization

Introduction

Devport is the MIT licensed open source project that helps you specially developer to make stunning dev portfolio with top notch customization and good looking UI. You can also switch the status of your portfolio to active or offline. And One last thing, You can also subscribe to our newsletter to get engagement update of your portfolio.

Features

Create Portfolio - You can create your portfolio with your own information in just a few minutes.
Top notch customization - You can use any of the 7+ pre-built themes to customize your portfolio.
Active/Offline status - You can switch the status of your portfolio to active or offline.
Newsletter - You can subscribe to our newsletter to get engagement update of your portfolio.
SEO friendly - This website is SEO friendly. You can easily rank your portfolio on google.

Screenshots

Home page

Feature page

Dashboard Page(Set up Link)

Customization page

…

View on GitHub

Video

Permissive License

MIT

Background

I got inspiration from Linktree, where user can make collection of their social media and showcase them to others but I don't like the classy design of linktree. So, I decided to make the one with modern design and top notch
customization. In this way, Devport has been immersed.

How I built it

I usually used Mongodb as the primary database and I love it. So, Using It as a hackathon project, enhance my backend skill. MongoDb database was my first non-sql database that I learned due to which it been easy to use it.

I used the basic crud functionality of Mongodb to make the backend of the devport. There are 4 schema. They are:

For user
For portfolios
For bot to count views
For token (JWT)

Additional Resources/Info

MongoDb 👉 docs
React js 👉 docs

Authorization vs Authentication

Utsav bhattarai — Tue, 25 Oct 2022 13:12:54 +0000

Overview

When you are starting out in web development, you will likely hear the terms authorization and authentication all the time. They might sound similar but they are totally different from each other. In Simple words, Authentication is the process of verifying someone's identity, whereas Authorization is the way to provide permission to someone to access particular resources or information.

They are essential and basic security terms that need to be understood thoroughly. So In this blog, We will discuss what authentication and authorization are and how they are differentiated from each other.

Ok, Let's get started!

What is Authentication?

Authentication is the process of identifying or verifying someone's identity by assuring that the person is the same as what he is claiming for. It is used by both clients and servers. The server uses authentication when someone wants to access the information, and the server needs to know who is accessing the data. The client uses it when he wants to know that it is the same server that it claims to be.

Authentication by the server is done mostly by using the username and password. Other ways of authentication by the server can also be done using cards, retina scans, voice recognition, and fingerprints. Authentication does not ensure what tasks one person can do, and what resources he can read and write. It only identifies who the person or system is actually.

Methods of Authentication

Single-factor Authentication

Single-factor authentication is the simplest way of authentication. It just needs a username and password to allow a user to access a system. So, It is less secure and mainly used by beginner developers to develop their side projects.

Two-factor Authentication

As the name suggests, It is a two-level authentication where the user needs to pass two-step verification to authenticate. It does not require only user name or password but also needs certain information that the authenticated user only knows such as birth date, favorite food, school name, and other information. Apart from this, it can also verify the user by sending the OTP or a unique link to the user's registered number or email address.

Multi-factor Authentication

This is the most secure and advanced level of authorization. It requires two or more than two levels of security from different and independent categories. This type of authentication is usually used in financial organizations, banks, and law enforcement agencies. This type of authentication protects the system from data miners or hackers.

Authentication techniques

1. Password-based authentication

It is the simplest way of authentication. It requires the password for the particular username. If the password matches the username and both details match the system's database, the user will be successfully authenticated.

2. Passwordless authentication

In this technique, the user doesn't need any password; instead, he gets a unique OTP (One-time password) or link on his registered mobile number or phone number. It can also be said OTP-based authentication. It is used to enhance the user experience on the system.

3. Single Sign-on(SSO)

Single Sign-on or SSO is a way to enable access to multiple applications with a single set of credentials. It allows the user to sign in once, and it will automatically be signed in to all other web apps from the same centralized directory.

4. Social Authentication

Social authentication does not require additional security; instead, it verifies the user with the existing credentials for the available social network. It is mainly used authentication which is more secure and does not affect the user experience. Users can authenticate with one click. Mainly used and popular social media credentials(not passwords) are used for this type of authentication.

What is Authorization?

Authorization is the process of verifying that you're allowed to access an area of an application or perform specific actions, based on certain criteria and conditions put in place by the application. You may also hear it called access control or privilege control.
The authorization usually works with authentication so that the system could know who is accessing the information.

Authorization is not always necessary to access information available over the internet. Some data available over the internet can be accessed without any authorization, such as you can read blogs from here.

Authorization techniques

1. Role-based access control

The role-based access control technique is given to users as per their role or profile in the organization. It can be implemented for system-system or user-to-system. It ensures the users on the basis of their roles or profile for accessing the particular area or resources of the system.

2. JSON web token

JSON web token or JWT is an open standard used to securely transmit the data between the parties in the form of the JSON object. The users are verified and authorized using the private/public key pair. It is used to access and refresh tokens to authorize the user to access the resources.

3. OAuth

OAuth is an authorization protocol, which enables the API to authenticate and access the requested resources.

4. OpenID authorization

It helps the clients to verify the identity of end-users on the basis of authentication.

5. SAML

SAML stands for Security Assertion Markup Language. It is an open standard that provides authorization credentials to service providers. These credentials are exchanged through digitally signed XML documents.

Differences between Authentication and Authorization

Authentication	Authorization
1. Authentication is the process of identifying a user to provide access to a system.	1. Authorization is the process of giving permission to access the resources.
2. It is usually performed before the authorization.	2. It is usually done once the user is successfully authenticated.
3. It requires the login details of the user, such as user name & password, etc.	3. It requires the user's privilege or security level.
4. Authentication credentials can be partially changed by the user as per the requirement.	4. Authorization The permissions are given to a user by the owner/manager of the system, and he can only change it, User can't change.
5. Example: Entering Login details is necessary for the employees to authenticate themselves to access the organizational emails or software.	5. Example: After employees successfully authenticate themselves, they can access and work on certain functions only as per their roles and profiles.

Comparing these processes to a real-world example, when you go through security in an airport, you show your ID to authenticate your identity. Then, when you arrive at the gate, you present your boarding pass to the flight attendant, so they can authorize you to board your flight and allow access to the plane.

Why Should You Implement Both Authentication and Authorization?

As you can see, although authentication and authorization are very different, each plays an integral part in the security and integrity of the application or system.

These processes go hand in hand, and without one the other is kind of meaningless. If you can gain access to the Admin area, but do whatever you want once in there, it could lead to big problems.

On the other hand, you can't authorize individuals without knowing who they are! Which is why authentication always comes before authorization.

Conclusion

As we discussed above, we can say Authentication verifies the user's identity, and Authorization verifies the user's access and permissions. If the user can't prove their identity, they cannot access the system. And if you are authenticated by proving the correct identity, but you are not authorized to perform a specific function, you won't be able to access that. However, both security methods are often used together.

I hope this blog has been insightful and You have now a clearer view and understanding of this term.

Feel free to get in touch via social media.
You can mostly find me at 👉 @utsavbhatrai007

Thanks for reading🔥

Just a minute👇

if( Do you like the blog🤩? ) {
   console.log("Don't forget to give reactions and your views in the comments😉")
}
else{
   console.log("Thanks for reading💖")
}

Introducing Ideao - A web portal of exploring ideas.

Utsav bhattarai — Mon, 29 Aug 2022 11:38:00 +0000

Overview of My Submission

Ideao is a web platform of exploring, sharing the creativeness in the form of idea. It allows to search the idea which helps you to make awesome things.

The idea behind this was to built a web portal which makes easy connection for idea seeker and idea provider. This project is built especially for the developer who are eagerly searching for ideas for hackathon or some other works.

This project is crafted using

ReactJs (For Frontend)
Custom css (For styling)
ViteJs (For Development tool)
Redis Modules (Redis Om)
- RedisJson (For database)
- RedisSearch (For searching)

Apart from that, I was just roaming around the internet and saw the announcement of Redis Hackathon Organized by dev.to. I was so excited to participate on it but my excitement went down when I can't think of awesome idea which can won the case prize (Just kidding🤣).Thinking of idea wasted my 2 3 days. But after the huge brainstorming I converted my problem into my idea called as Ideao.

Submission Category:

This project is built upon on MEAN/MERN Mavericks

Video

Architecture

Language Used

This project is built using

Js/React
NodeJs/ExpressJs

In general, This project is made up using RERN (Redis, Express, React, Node.js)

Link to Code

utsavdotdev / ideao

Ideao is the web portal for exploring the ideas.

Introducing Ideao - A web portal of exploring ideas

Ideao is a web platform of exploring, sharing the creativeness in the form of idea. It allows to search the idea which helps you to make awesome things.

Overview video

How it works

At first, Ideao communicated with the api for retrieving the idea and user data, posting them to the backend server, Searching idea and delete the idea according to the user.

How the data is stored:

The ideao's data is stored in JSON format based upon RediJSON. The overall mapping of data is configured by Redis Om Node js package.

At first connection need to be established in redis cloud by:

import { Client } from "redis-om";
const client = new Client();
const con = await client.open(process.env.REDIS_URL);
if(con){
  console.log

…

View on GitHub

Website

Visit it: Ideao

Additional Resources / Info

Home page

Main App

Search page

Mobile view

Check out Redis OM, client libraries for working with Redis as a multi-model database.
Use RedisInsight to visualize your data in Redis.
Sign up for a free Redis database.

My first Blog - How to write 8log🙂🙂

Utsav bhattarai — Thu, 02 Jun 2022 05:08:10 +0000

Let's start today's blog with the topic How to write Blog🔥

Blogging is the best way to share your skill, experience, knowledge, mistake and many other things you have been learned throughout your journey to the new comers in your field. It help a lot to the beginners what to do and how to do and overcome you mistake.

Today's world🌎 is advancing beyond we think. Small contribution to this world make one step far in advancement. The best way to do such thing is Blogging so place your finger in keyword and just write.

This is also my first blog giving you the knowledge How to write Blog?? sound weird😄.
But Giving you little much knowledge which helps you little bit that's sound better🙂.

I wouldn't give you the best tip and do many mistake and You laugh😂 on it and you avoid mistake done by me. That's the thing I want. In this way, Mistake is passed as knowledge. This is the beauty of Blogging🙂.

There are some tips that I will follow throughout my blogging journey. They are:

1. Just start to write anything that you think

Starting to write is toughest, make it as easy as possible. I also hesitate to write but overcoming this fear I started it. To be honest, If you started to write blog , you will stop at the end of your blog. Something you will stop when brain stop to think what to write then you must take break and relaxed automatically new ideas will born as the word for your blog.

2. Title is everything

We should name your blog in a descriptive and helpful way which makes reader to attract towards your blog.

3. Unique voice

Always be unique to write. Rather than copying other write simple which makes feeling of This blog is written by me. Get inspired by other content creator but don't forget what you are and who you are!

4. Try to read your blog as reader

Assume that you are reader and think🧐 what you want from this blog and write it.
It help a lot to find the mistake and you can easily refactor it.

5. Consistently in blogging

Blogging is the skill which is improved when we write blog again and again.
It increases your productivity, perspective and confidence when you are consistent
in blogging. Sharing my opinion, This is also my first blog I don't know what will be in future but there is a will to do something today.

Summary

Blogging is the skill of sharing and gaining the knowledge. It help you to be what you want. New ideas and concept are born automatically in this field. Just it need practice like as other work. In blogging, Our improvement are easily detectable. It gives awesome refreshment when we read our blog.

Thanks for reading🔥
Giving your precious time to read it. Its awesome😎