DEV Community

Cover image for DevEmbed: Embed your dev.to profile anywhere using widgets - Linode Hacakathon
ashish
ashish

Posted on

DevEmbed: Embed your dev.to profile anywhere using widgets - Linode Hacakathon

What I built

I built a dev.to profile widget generator so that people can showcase their dev profiles on their personal sites or any other site without having to go through all the API stuff themselves! You just need to head over to the site, enter your dev username and then just copy the script code, and put it inside your HTML file - That's it.
The embed includes your profile basic information along with your social links and your some of your latest blog posts as well!

Category Submission:

  • SaaS Superstars
  • Wacky Wildcard

App Link

Screenshots

Landing Page

Linode Instance

Description

The project utilizes Linode VPS for backend API which provides the details needed for creating the widget using the dev.to API. The frontend made using Next.js creates the page and provides a simple script that embeds the page on your site using Iframes.

Link to Source Code

Permissive License

The app is licensed under the MIT License

Background

I have seen a lot of people adding their blog posts from dev.to to their own personal sites using the API and it's a time consuming process. I wanted to make the process easy as well as adding more details to it so that people can use the widget to share most of the stuff from their dev.to profile.

How I built it

For the backend, I used a simple python web server made using Flask and used Linode to host the Flask server. While doing so, I learnt a lot about linux commands and using a VPS, connecting with VPS and adding files to it and running your own web server using nginx and gunicorn.
For the frontend, I used Next.js and Tailwind CSS. I learnt a lot about utilizing Iframes to create embeddable widgets and also about creating scripts for widgets.

Top comments (3)

Collapse
 
mamontesp profile image
Andrea Montes

This is pretty cool! thanks for sharing

Collapse
 
asheeshh profile image
ashish

thanks a lot!

Collapse
 
deezy profile image
DEE

Waku Waku😊🤩