Forem: Souvik Mandal

Web3bie - a beginner friendly resource to jump into web 3.0

Souvik Mandal — Thu, 12 May 2022 21:00:41 +0000

Overview of My Submission

web3bie is a platform to get resources and concept about various kind of web 3.0 related things (e.g. blockchain, smart contract, nft, DAO). Friendly, interactive and graphical interface is used to make understand easily.

Submission Category:

Web3 Wunderkinds

Link to Code

8-bit-souvik / web3bie

know the basic concepts of blockchain technology, it's applications and future. get news regarding web 3.0, track price of all registered Cryptocurrencies, API for NFTs and more!

WEB3BIE

beginner friendly resources to explore web 3.0

What do this app do?

Provides basic knowledge about web3
Lists all registered cryptocurrencies and their price, marketcap etc. in a single table
Collects and provides news on various topics related to web3 and and specialized topics
Provides Articles, Blogs to readers.
readers can also upload articles (building stage...)
Mint NFTs and keeps track like SaaS (planning stage...)

Tools and Frameworks used:

Setup local environment

install and run docker image of appwrite to build the headless CMS (installation guide)
setup CMS with APP ID and DB collections
use these schema to setup the database:

blogs:-
  blog_title:{type: String}
  blog_content:{type: String}
  image:{type: String}

about:-
  title:{type: String}
  paragraph:{type: String}
  card:[]

crypto:-
  home:{type: String}
  learn:{type: String}
  concept:{type: String}

blockchain:-
  home:{type: String}
  concept:{type: String}
  features:{type: String}
  learn:{type: String}

dao:-
  home:{type: String}
  concept:{type: String}
  features:{type: String}

add data into these collections.

get url, project_ID…

View on GitHub

Additional Resources / Info

tools used:

NEXT JS
Appwrite
Docker

Project Details:

Here Apprite is used as a headless CMS to fetch the content of the site where read access is given to role:all.
In the front-end ISR is implemented with NEXT JS to make incremental static regeneration.

Through this application we can provide concept and knowledge to web 3.0 newbie. Till now 4 topics are covered through this application. In the blog section.

in the crypto section The concept about is being cleared along with chart and some API's

same way for NFT, DAO section the concept's are being cleared.

There is a separate blog section to cover all the possible topic.

future implementation:

A login/signup feature will be enabled using appwrite's server side integration, so that user can post their queries and those will be solved by other people.

Conclusion:

This project is already hosted. So, If you wanna get something new take a look here.

Thank you!

"Transcriptube" - maintain the habit of reading news, podcast

Souvik Mandal — Mon, 11 Apr 2022 19:01:18 +0000

Overview of My Submission

In the the era of of fast internet we can listen or watch any news or podcast by a single tap without any hassle. But because of this facility we don't need to read any words, which is disrupting our reading habits day by day. To maintain this good habit we can read any article or podcast instead of listening.
Here This Transcriptube web application comes to play a major role.
we can easily transcribe any youtube video by just providing the URL of that video

After submitting the URL the backend process will start:

First it will fetch the youtube video of given link through SocialDownloader API.
It will take a few seconds. After that the API will generate the link of downloadable mp4 video.
As soon as the link get fetched the deepgram API will pick it and starts generate the the transcript of the video. This process can take upto 5 minutes!
After generating the whole transcript will fetch the data and comes to the frontend.

Now I have created it just for Youtube videos but in future I'll enable it for any vocal media link.

Land on the Home Page

Submission Category:

Accessibility Advocates

Link to Code on GitHub

8-bit-souvik / Transcriptube

Transcript any voice or podcast from youtube using Deepgram api

Transcriptube

Transcript any voice or podcast from youtube!

Tools used:

Node JS
Express JS
EJS template engine

Resources used:

Deepgram API
SocialDownload API

Snap:

demo:

transcriptube.mp4

View on GitHub

Additional Resources / Info

Tools used:

Resources used:

weTalk - Inter college social media application

Souvik Mandal — Thu, 13 Jan 2022 08:26:35 +0000

Hello Everyone,
First of all thank dev.to and mongoDB for hosting this Hackathon to give a chance to work with NoSQL database program.

Ideology:

We've seen all the inventions comes from a single spark of ideas. Just take a scenario, where a student from 1st year have a great idea and some students from 3rd year have extraordinary skills to work on that idea and a final year student has a lot experience to execute project ideas and leadership. If somehow we can connect them we may get a great result. All we have to do: circulate the idea and create a close environment and we can do it using this application.

For quick readers:

Overview of My Submission
Submission Category
Link to Code
Additional Resources / Info
Screenshots and demo videos

lets have a deep dive into this project!...

Overview of My Submission

This is an inter-college social media application where users can interact to each others and share their ideas, doubts or any queries and can do like, comment to others' post.

Backend of this project is built with nodeJS, express and Mongoose,
For DataBase MongoDB Atlas is being used.

this project is remotely deployed here: 👉WeTalk

GitHub repository of it's source code is here: 👉github Repository

Here is a quick guide to setup the environment locally

Submission Category:

Choose Your Own Adventure

Link to Code

8-bit-souvik / weTalk

A social media platform where user can share thoughts with text and media and build community with fun!

About weTalk

This is an inter-college social media application where users can interact to each others and share their ideas, doubts or any queries and can do like, comment to others' post.

JavaScript · Node JS · Express
API · JSON · mongoose
HTML · CSS · ejs
Social media · blogging app
Try it

Click here to land on the Homepage

Intro

weTalk is a Social media application built with NodeJS where user can get socialize with each other by uploading post, like and comment on their posts.

Summary

First thing first, user have to signin with github account
User can see What other users are posting
User can also upload any post (till now only text), character limit: 1-1500
User can like and comment in any post
User can hide any post for that time from news feed
User can delete his own post or comment

💻 Tech

…

View on GitHub

Additional Resources / Info

Resources, frameworks and code-stack Used in project:

Front-End:
EJS
CSS, JavaScript
BootStrap
Back-End:
NodeJS
Express
cookie-parser
JWT
Mongoose
axios
crypto-js (for AES encryption)
dotenv
uuid
DataBase
MongoDB Atlas
Other
Github OAuth
Git
Heroku
docs for deployment of free cluster with MongoDB Atlas:
Get Started with Atlas
docs for connect NodeJS application with MongoDB:
MongoDB Node Driver

Screenshots and demo videos

Demo usage of this App:

Demo video to setup this Application in local environment:

Screenshots of working application's interface:

News Feed:

Expanding any post:

roadmap for front-end development

Souvik Mandal — Sun, 13 Jun 2021 11:11:36 +0000

There are plenty roadmaps for web developers out there. But some of them make you solve a "puzzle" before even getting started, as there are a lot of choices that you can do.

When I started to learn Web Dev, I wished that I could find a promising and easy to learn road map to learn. But I got lost in the crowd of these different roadmaps.

I will also be talking about some example projects that you can build to practice your skills and do show off to be an intern.

Tools You Need to Know to Become a Web Developer

I'm assuming that you are a beginner. In that case, there are a few tools that you need to know before getting into programming especially web development.

VS Code (or other code editor)

First, you should learn how to use Visual Studio Code, which is a source code editor. It is a free and powerful tool. Well, I've some beginner aka web developer uses sublime text. That's also good but I'm not so usual with sublime text, as VScode has rich features for software development.

In the beginning, I recommend learning some of the basic shortcuts and installing some of the extensions like ESlint, Prettier, Live Share, Material Icon Theme, or Live Server.

The Command Line

Next, you need to know about the Command-Line interface. You should learn what it is, and some of the basic commands like how to move around directories, how to create a new directory, or how to create a new file.

Version Control - Git and GitHub

No matter what you do, as a developer, you need to know about Git. Git is a Version Control system used for tracking changes. It is usually used with GitHub, which is a code hosting platform.
Well there is many hosting platform e.g. Big Bucket but github is popular.

In the beginning, learning Git might be overwhelming, therefore you just need to know some of the basics like to create a new Repository, to clone a project, to make a new commit, and how to pull and push the new changes. You can take guidance under any good youtube channel and put down commands in note book, atleast I learned in this process.

One of the best ways to practice Git is by working in a team. There, you need to know how to create a new branch, how to make pull requests, and how to resolve conflicts. You can create your own community in school or college for WebDev. This helps a lot!

Design tools - Figma

The last tool is Figma. Figma is a design tool and is free to use for individuals. But here I want to talk about how to use Figma as a developer.

Alright, so these are the tools that you need to know of when getting started. You don't need to know everything, but be sure that you understand the basics so that you can improve while learning to code.

HTML and CSS

Next, let's continue with programming languages. And let's start off by talking about Responsive Websites.

Responsive websites are sites that look good and are usable on all devices or screen sizes. You probably know how important it is to build a responsive website, as people use so many different devices these days.

So let's jump to the first two languages that you need to know to build a website: HTML and CSS.

HTML stands for Hypertext Markup Language. It it is used to build the skeleton for your website. HTML is not difficult to learn, but you might want to pay more attention to HTML forms as they will be fundamental in the future.

CSS stands for Cascading Style Sheets. This is a markup language but I also consider it to be a programming language. CSS is not necessarily difficult to learn but it's difficult to master.

There are few topics that you want to pay more attention to like:

• Box model - how margins, padding, and borders work together.
• CSS units - used for expressing lengths (e.g: rem, vh, and vw).
• Position - specifies the type of positioning method. It also confuses many people so make sure you spend some time on it.
• Variables - or Custom properties are entities that can be reused throughout a document. This is my favorite feature in CSS. They make working with CSS so enjoyable and you can create themes with just a few lines of code.
• Media query - decides what to show on different screen sizes. They are a key component of responsive design.
• Animation - lets an element change from one style to another. If you know how to use animation correctly, it makes your site stand out. Otherwise, it will make your website look unprofessional, so be careful.
• Flexbox, CSS Grid - used for building Responsive layouts (I forgot to mention this in the video).

When you know the basics of HTML and CSS, the next step is to build some basic websites. For example, you can try a Homepage, a Form like a login page or a checkout page. You can even build a basic Portfolio. You can find example projects on DevChallenges.io.
But you can create small snippets before that like newsletter, profile card, login card, carousal etc.

Website deployment

Once you have your website, you need to put it on the internet, so people can see it. Deployment is the process of deploying your code to a hosting platform.

Back in the day it was a lot more difficult to do. But now, it's super easy and you can use tools like GitHub Pages, Netlify, or Vercel.

JavaScript - Fundamentals

Alright, the next topic is JavaScript. JavaScript is a popular programming language and is widely used for Web Development, among other things.

You will need to learn some of the basic features of the language like Data Types, Loops, and Conditionals.

Then there are topics that you will want to dive deeper into.

First, we have debugging. This is the process of finding and fixing errors. Here's a great in-depth guide to bug squashing to get you started.

Then there are other topics like Objects, Primitives, and Arrays. Especially when working with Arrays, you need to know about Array methods as well.

Functions are the main building blocks in your program. So make sure that you don't overlook them.

One of my favorite features in JavaScript is de-structuring – it is easy to write and makes the language super powerful.

And no matter how good you are with programming, you will have errors in your scripts. This means you'll want to know about Error handling as well.

Asynchronous programming is important, especially when you need to communicate with the server. So spend some time learning about Promises and Async/Await.

JavaScript - Browser

Let's move on to how JavaScript is used in the browser.

First, you need to know what a Document Object Model or DOM is. Then you need to know how to get elements, how to change the classes, or how to change the style with JavaScript.

After that you have to introduced with JS DOM (Document Object Model)

You also need to learn about different User Interface Events like click, mouse over, mouse down, and so on.

And, you'll also want to pay more attention to Forms in JavaScript as they have many events and properties

JavaScript - Other features

The Fetch API is an important topic. It lets you send network requests to servers. This is useful, for example, when we need to submit a form or get a user's information.

Another important topic is Storing Data in the browser. Here you need to know what the differences are between Cookies, LocalStorage, and sessionStorage.

Other less important topics when you are just getting started are Regular expressions, Web Components, and Websockets.

Regular expressions are used to search and replace text. Web Components, are a new thing but you should totally check them out.

Lastly, we have Websockets. They are useful when you need to have continuous data exchanges like in chat applications.

So after learning Javascript, you might want to spend some time to learn about TypeScript. I love TypeScript as it gives me a safe feeling while writing code.

TypeScript provides static typing, that allows you to catch errors earlier in the debugging process. It also saves your time as it finds bugs before the code runs.

Here's a helpful post on TypeScript types to help you think about them the right way.

You can stop here and start working on some projects. But personally, I would continue by learning at least one framework. Then you can practice JavaScript at the same time.

Raspberry Pi 4 : quick review

Souvik Mandal — Sun, 13 Jun 2021 09:43:40 +0000

In the month of June of 2019 raspberry Pi foundation introduced a new model of SBC(single board computer) named 'Raspberry Pi 4 (model B)', which was 50% more powerful and 30% more efficient than its previous version. this was one of among most powerful ARM devices in the first two decades of 21st century.

Spec.:

         RAM: 1GB/2GB/4GB/8GB (DDR4)
         CPU: 4 cores (64-bit ARM cortex A72)
         GPU: VideoCore VI
         Clock Speed: 1.5gHz
         Storage type: micro SD card, USB(external)
         Wireless connectivity: bluetooth 2.4/5 gHz, Wifi 802.11ac

I/O:

         2x USB type-A (3.0)
         2x USB type-A (2.0)
         1x USB type-C 
         1x Ethernet port (RJ-45)
         2x micro HDMI
         1x headphone jack (3.0)
         1x CSI connector
         1x DSI connector
         40x GPIO pin
         4x PoE hat

software:

• Raspbian OS (officially supported)
• Ubuntu 20.4 LTS (officially supported)
• Windows IoT version
except these a wide range of linux distros is supported unofficially.

pros.

       •  Most powerful Raspberry Pi to date.
       •  Offered in three RAM amounts.
       •  Supports two 4K external displays.
       •  Gigabit Ethernet jack onboard.
       •  USB 3.0 support.

cons.

       •   Needs fan and case.
       •   No built-in storage.
       •   Alternate operating systems need higher-spec, more expensive versions.

pricing:

    (from electronicscomp.com)

     •   1 GB - ₹2690.00 (tax excluded)
     •   2 GB - ₹3085.00 (tax excluded)
     •   4 GB - ₹4185.00 (tax excluded)
     •   8 GB - ₹5695.00 (tax excluded)

conclusion:

As an educational & development and introductory computer, it's hard to bet to Raspberry Pi. Every new release has managed to do more without fundamentally changing the size of the board, adding more powerful features day by day while still supporting the same interface for third party hardware, supporting a wide range of Operating Systems. As someone who grew up with 1980s 8-bit or 16-bit computers, there's a certain nostalgia in a device like this, but this category of hardware clearly looks forward, building on its heritage and aiming to encourage more developer and engineers.

Real Time Remote Collaboration using Live Share Extension

Souvik Mandal — Sun, 07 Feb 2021 14:49:58 +0000

Recently our college held an inter college Web Design competition which held in online and duration was two hours. So all participants were instructed to create a group of two members each. As usual I also picked a friend to collab. But the problem was it was the time of the lock down period and we both are from different town. As we need a need real time remote collaboration for that two hours, we started searching for such kind of things and luckily found it in youtube named 'Live Share'.

• Basically this is an extension of Visual Studio Code.

• There is an another audio version where we can do voice chat while working.

• Maximum members/collaborators can be upto 30!

• and most interesting part is everyone here can watch in real time what other fellow collaborators are typing/removing in which line of which file even exact location of their cursor.

Installation:

requirements:
•windows (7 or above)
•macOS (Sierra 10.12 or above)
•linux (32-bit is not supported by liveShare)

procedure:

First of all install Visual Studio Code in system.
Then go to extension and search 'Live Share' which is done Microsoft and install it. after installation it should automatically enable. If an icon of it is added in the slide bar that indicates liveShare is enabled.

Quickstart:

**Microsoft or GitHub account is required to join or start a session.

On clicking the liveShare icon a new vision will appear in the slide bar. Where upper part will show session details and lower part about contact details where list of other collaborators and their state will be appeared.

sharing:

• To share your repository click on the share button.It may take time to setup.
• You'll be asked to sign in with your Microsoft or GitHub account.
• After setting it all up you'll get an icon on the top of session details part to copy collaboration link click it to copy the link. And share it to your collaborators.

joining:

• To join anyone's collaboration session click the 'Join' button of the slide bar.
• For the first time you'll be asked to sign in with your Microsoft or GitHub account.
• After that a bar will be appeared on the top where the URL of that collaboration session will be asked. After putting that hit enter and you'll be entered into collaboration session.

For more information check the documentation here
Good Luck!