DEV Community: Somnath Pan

I Built Something That Helps You Launch & Validate 100 Startups Everyday😬

Somnath Pan — Sun, 25 Jan 2026 03:23:23 +0000

Hi I'm back after a long time,
And this time with a new update...

I have recently launched GoStarterAI

Check here

What is it?

GoStarterAI is an AI system that turns a single prompt into a fully deployed app startup.

You describe what you want to build.

It generates the app structure, code, and deployment-ready setup.

Then it pushes the project and deploys it.

No templates to stitch together.

No boilerplate scavenger hunt.
No “I’ll finish this later”.

You go from prompt → live app.

Why I Built

I kept seeing the same pattern:

People can generate code

People can design UIs

People still don’t ship

Most AI tools stop halfway. They help you write code, not finish products.

I wanted something that behaves more like a startup co-founder than a chat box.
So GoStarterAI focuses on:

End-to-end generation
Real project structure
Deployment, not demos

What It Does

Right now, GoStarterAI can:
Generate real-world app code (Next.js-based)

Structure the project like a production repo

Prepare it for deployment
Help you get to a live version fast

The goal isn’t perfection.
The goal is momentum.

You can iterate once something exists. You can’t iterate on nothing.

Who It's For?

GoStarterAI is built for:

Indie hackers who want to ship faster

Students learning by building real products

Founders validating ideas quickly

Developers tired of redoing the same setup work

If you like speed, ownership, and shipping, you’ll feel at home.

What It's Not

Not a no-code website builder
Not a toy demo generator
Not “AI magic” with no control

Whats Next?

I’m actively working on:

Better agent orchestration

More flexible app types

Faster iteration loops

Community-driven experiments (CTFs, challenges, live builds)

The long-term vision is simple:

Turning ideas into real startups should be boringly fast.

Try It / Follow Along

GoStarterAI is live and evolving.

If you’re interested in:

AI-assisted startup building
Extreme shipping speed

Tools that actually finish the job

You’ll probably like what’s coming.

Thanks for reading.

Back to building.

Here's how i built a blog app using javascript & firebase

Somnath Pan — Sat, 19 Oct 2024 01:12:36 +0000

Hi everyone 👋🏼
I am pretty excited to share the launch of my project:DevCorner,a cutting edge blogging platform for developers!

features

secure login/sign up using
email
customizable user profiles
create blog posts
search for blog posts
update/delete your posts
comments
notifications on new
follows & comments

technologies used

-HTML/CSS
-BOOTSTRAP 5
-JAVASCRIPT
-FIREBASE

journey

A few days ago,I was in search of a project idea,
After checking hundreds of websites and YouTube videos,i finally decided to build a blog app,
But the problem was... I didn't know backend,so i searched for alternative ideas,and found firebase,which is a BaaS by Google.
So I was pretty excited to build the project,
It took me 4 days to build it,
And it wasn't as much challenging as i thought,the workflow was almost flawless and i didn't even face any major bugs...😅

Join The Community Today

I made LexioJS: a NLP library built in VanillaJS

Somnath Pan — Mon, 07 Oct 2024 07:18:47 +0000

Hey there! I am thrilled to share my new project LexioJS,
A simple lightweight library,which allows you to perform NLP tasks,such as:

tokenization
stop word removal
NER
stemming
lemmatization
sentiment analysis

introduction

LexioJS is a very fast,simple & lightweight(~7.60 kb minified) NLP library,which allows you to perform all the basic NLP tasks.

features

tokenization
stop word removal
NER
stemming
lemmatization
sentiment analysis

getting started with LexioJS

Including LexioJS in your project using a CDN:

<script src="https://cdn.jsdelivr.net/gh/SomnathDevPro/LexioJS@main/src/lexio.min.js"></script>

You can refer to LexioJS docs for tutorials:
Documentation
GitHub repository

Use cases

Text Preprocessing
Sentiment Analysis
developing small ChatBots & virtual assistants

Drawbacks & Limitations

Although I've tried to build a comprehensive library,it has some limitations:

limited features: I have provided basic functionalities for NLP tasks,but it's important to note,that it lacks some other complex features such as POS tagging,dependency Parsing & ML integration.

-Currently Lexio only supports English language processing.

-sentiment analysis model may struggle with sarcasm & nuanced text.

I plan to address these limitations in future updates.

Creating A Lightweight Code Editor Using Vanilla Js

Somnath Pan — Fri, 04 Oct 2024 04:39:49 +0000

Hey there!👋🏼
I am excited to share my new project,NEXON,a simple frontend code editor,
Which i built using vanilla js.

Introduction

Nexon,is a simple & lightweight online code editor, which allows you to write frontend code online,
It also provides a robust project Management,where you can save your projects,edit them & also you can download your projects in .html format!

features

project management
live code preview
download feature
simple & intuitive UI

technologies & libraries used

html
javascript
litestyle.css
FileSaver.js

Check out my project

Nexon
GitHub

the idea

Yesterday,boredom struck & i decided to build something and thus,NEXON was born

the process

So firstly,i designed the UI,I planned to use litestyle.css,Which is a css framework I built a few months ago, because I wanted to check it's capabilities,
& Then i wrote the js,for this,
I've used a simple iframe and an textarea,where the value of the textarea is set as the srcdoc of the iframe,whenever you type.
I leveraged local storage,for storing user data.

challenges faced

Implementing,the download feature,proved to be tricky,so I used FileSaver.js to overcome this challenge

lessons learnt

Building NEXON was a great learning experience.
Building NEXON,helped me to solidify my JAVASCRIPT knowledge,
& Also I have learnt the importance of writing modular code.

Conclusion

Building NEXON,marks a significant milestone in my front end journey, showcasing the power of vanilla JS.

One Byte Explainer:Phaser.Js

Somnath Pan — Sat, 28 Sep 2024 02:02:55 +0000

This is a submission for the Web Game Challenge: One Byte Explainer

Explainer

Phaser.js is the ultimate superhero for HTML5 game development,with its powerful features and simple,intuitive API, phaser makes engaging games a reality!,
Phaser features:

Robust physics engine
Game objects & sprite management
Audio management 4.scene management 5.particle effect & animations

With phaser you can create complex animations and large-scale games.
Also phaser has a large
community to help you.

With Phaser.js you can create 2d platformers,arcade style games,puzzle games etc...

Additional Context

Phaser has a robust scene management system,where you can use multiple scenes for your game.
Each scene has preload() for loading sprite,create() to show and implement game logic, animations etc,update() to implement game loop.

Xylophia VI : An Endless Survival Shooter Game

Somnath Pan — Thu, 26 Sep 2024 11:54:13 +0000

This is a submission for the Web Game Challenge, Build a Game: Alien Edition

Introduction

I am excited to share my submission for the web game challenge,Xylophia VI: an endless shooter game,
Here,You're a brave agent of CTMA,who is stranded in Xylophia VI,an isolated planet inhabited by malevolent polycerebroxes,you have to survive by fighting them,until help arrives.

What I Built

I have built an endless shooter game,where you're an agent of CTMA(cosmic threat management agency),you crash land on Xylophia VI,while going for an investigation in the planet,you have no other choices but to stay in the planet,until help arrives,but the planet is inhabited by hostile polycerebroxes,you have to fight them to survive on the planet as long as possible!

I Have Used Phaser 3 to simplify the development process,
Also it's my first time using it so it was a great learning experience also!

Game Play Mechanics & Features:

•Player Movement & Joystick Controls: I have used Phasers Built-in Graphics To create a Basic Joystick,By Which You Control The Player.

•Player Attacks: You can just tap the screen to shoot projectiles,you can kill polycerebroxes by them,after getting killed,each alien,respawns after sometime.

•Health Pack: You'll also get health packs which shows up randomly and increases your health,you can only use it when your health is less than 120.

•Enemy behaviour: i have implemented simple enemy AI,
The polycerebroxes chases you whenever you're close,also i have implemented,co operative attacks,where multiple enemies,works together to attack you!,the enemies gets destroyed once they complete there attack,once every minute,a large wave of enemies attack you including a boss enemy.

•Scoring & High Score System: Your score is determined by your kill count,and also highest kills are stored,I have used local storage to store high score data.

•player levels: I have implemented a very simple player level progression system,in which the player have to gain experience points by playing and levels are determined by exp points,
Difficulty increases with increasing level!.

screenshots

Technologies Used:

1.javascript
2.Phaser 3.85
3.HTML5

Compatibility:

I have made & optimised the game specially for mobile phones,so playing it on desktop can cause screen issues, specially with placement of game UI & joystick controls,
So i request you to use a mobile device to play this game.

Demo

Click Here To Play!
You can check the source code on my GitHub Repository

Journey

I loved top down shooter games and I was just learning about Phaser when I got to know about the web game dev challenge,I first decided to create a top down shooter game,using my knowledge of phaser,i created the first game.js file and created the prototype for the game,and later with the help of tutorials and ai,and my own creativity i created the enemy AI and the other features as well!

I gathered assets from the internet and I've also used ai to generate the maps and background.
I got the sound effects from pixabay & sprites from open game art.

It was a great learning experience 😊
I've learnt a lot about game development & phaser!

I am also proud of the enemy AI & the joystick.

license

This project is licensed under MIT License.
Check GitHub Repository for more information.

CONCLUSION

in conclusion, development of Xylophia VI for the web game dev challenge was successful,I have successfully created an endless survival game using phaser 3,with a wide range of features.

I overcame challenges in:

1.developing enemy AI
2.optimizing the game for mobile

Through this experience,I have gained valuable skills,such as:

Phaser 3
HTML5 & JAVASCRIPT
GAME DEVELOPMENT & MECHANICS

Thank you 💕 for checking out my project!
If you've liked the game,please star my repository ⭐

Play Xylophia VI & give me your feedback now!

If you find any bugs or issues,make sure to inform me...

Submission For Front-end Challenge 2024 Earth Day Edition 🌎: "Earth's Future In Our Hands"

Somnath Pan — Sun, 21 Apr 2024 14:16:23 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.

Introduction

"Climate change is a pressing global issue that requires immediate attention and action. Rising temperatures, melting ice caps, and extreme weather events are just a few of the devastating consequences of human activities on our planet. We must reduce our carbon footprint, transition to renewable energy sources, and adopt sustainable practices to mitigate the effects of climate change. It's a collective responsibility that demands individual and collective action. Let's work together to protect our planet and ensure a livable future for generations to come."

Inspiration

I have created a CSS art piece that depicts the impact of climate change on our planet. Using only CSS, I have designed an interactive animation that showcases the Earth's distress and its potential transformation into a thriving planet.

Through careful manipulation of CSS gradients, shapes, and animations, I have brought this environmental message to life. The Earth's "face" and "eyes" are crafted from intricate CSS shapes, while the animations simulate the effects of global warming and the potential for positive change.

Demo

Code:


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <style>
  *{
    transition:1.5s;
  }
  body{
    background-color:#0924A8;
    display: grid;
    place-items: center;
  }
    .earth{
      height:300px;
      width:300px;
      background:radial-gradient(circle at 50% 1%,#0D9008,#2A64D9,#D53B3BBD);
      border-radius:50%;
      box-shadow:0 0 40px #FF0000;
      overflow:hidden;
      transition:1.5s;
    }
    .face{
      position: absolute;
      left:50%;
      top:50%;
    }
    .eye1,.eye2{
      height:50px;
      width:25px;
      background-color:black;
      border-radius:50%;
      position: absolute;
      top:-60;
    }
    .eye1{
      left: -50px;
    }
    .eye2{
      left:50px;
    }
    .mouth{
  position: absolute;
  width: 178px;
  height: 180px;
  border: 15px solid transparent;
  top:5px;
  left: -75px;
  box-sizing: border-box;
  border-radius: 50%;
  border-top-color:black;
  transition:0s;
}
.earth:hover .mouth{
    border-bottom-color:black;
    border-top:none;
    top:-90px;
}
.earth:hover{
  box-shadow:0 0 100px #08FFB9;    background:radial-gradient(circle at 50% 1%,#0D9008,#2A64D9);

}
.earth:hover .eye1{
  top:-100px;
}
.earth:hover .eye2{
  top:-100px;
}

  </style>
<body>
  <div class="container">
  <div class="earth">
    <div class="face">
      <div class="eye1"></div>
      <div class="eye2"></div>
      <div class="mouth">
      </div>
    </div>
    <div class="plant"></div>
  </div>
  </div>

</body>

Live link to view the project:
https://earthdaycss.netlify.app/

Journey

Through this project, I have learned:

The importance of environmental awareness and the impact of climate change on our planet
How to effectively convey a message through interactive and visually striking designs
Advanced CSS techniques, including gradients, shapes, and animations
The power of creativity and coding in raising awareness and inspiring action
The value of experimentation and iteration in refining a design concept
How to balance aesthetics and meaning to create a impactful and thought-provoking artwork

This project has not only honed my technical skills but also deepened my understanding of the critical issues facing our planet, and I hope to continue exploring the intersection of art, design, and environmental awareness in future projects.

Front End Challenge 2024 Earth Day Edition🌎CSS ART SUBMISSION: "Plants: The Heart of Our Planet"

Somnath Pan — Fri, 19 Apr 2024 12:12:48 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.

Inspiration

Gazing at plants' lush foliage and vibrant blooms, I felt wonder and awe. Their intricate patterns, delicate petals, and majestic branches whispered secrets of resilience and beauty. I realized they're the heart of our Earth, providing oxygen, food, and shelter. I knew I had to create a design that celebrates their splendor and highlights the urgent need for preservation. Through this project, I aim to inspire others to protect our planet's precious green treasures, for the future of our Earth depends on it.
Therefore,
I Created a CSS art which depicts plants as earth's heart.

Demo

Journey

My journey began with a Google search for ideas, sparking a creative flame. I dove into writing HTML and CSS, bringing my initial vision to life. But, as often happens, my plan suddenly changed direction. Embracing the pivot, I adapted and evolved my design. Through this process, I discovered new skills and perspectives, ultimately leading to the creation of this project. It's a testament to the power of flexibility and creativity, showcasing how unexpected twists can lead to something truly special

Submission Of Project For Front-end Challenge 2024-Earth Day Edition: Glam up My Markup

Somnath Pan — Thu, 18 Apr 2024 15:39:07 +0000

This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration Landing Page

What I Built

For the Dev.to Front-End Challenge: Earth Day Edition, I embarked on designing a captivating landing page to raise awareness about Earth Day,I depicted climate change with help of images and inspire the developer community to take action

Demo

Access the code on:
https://github.com/Codevsom/Earth-day-landing-page

Live link:
https://codevsom.github.io/inde.html

Journey

My Journey Was Extremely Simple:
⟩I looked up for inspiration on Google,but I didn't find anything to get inspired...
⟩then i used my own imagination and creativity to create a wonderful design that depicts climate change with the help of images.

Images I used for successfully creating my project:
•https://w0.peakpx.com/wallpaper/43/25/HD-wallpaper-earth-cool.jpg?hl=en_IN
•https://cdn.mos.cms.futurecdn.net/6ZW3VY5dZJbYSD7FeAsKe6-1200-80.jpg

Submission For Front-end Challenge 2024 - Earth Day Edition 🌍 CSS ART: A Visual Exploration of Our Planet

Somnath Pan — Thu, 18 Apr 2024 10:22:48 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.

Introduction:

Happy Earth Day, DEV community! In honor of this important day, I'm thrilled to share my project: a unique artwork depicting the Earth's continents, entirely crafted using CSS!

Inspiration:

This project was inspired by the beauty and fragility of our planet. Earth Day is a reminder to appreciate and protect our environment.

Demo:

Let's celebrate our planet with this artistic exploration! Check out the live demo and share your thoughts:
HTML MARKUP

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="html" content="text/html; charset=utf-8" />
    <title>earth day css art</title>
    <link rel="stylesheet" href="earthday-art.css">
  </head>
  <body>
     <div class="container">
       <div class="earth">
         <div class="text">
           <h1>Happy Earth Day</h1>
           <p>"The environment is where we all meet; where all have a mutual interest; it is the one thing all of us share".</p>
         </div>
       </div>
     </div>
  </body>
</html>

CSS CODE

body{
  background:#4BD2FB;
}
.earth{
  background:url('land.png');
  background-color:#48C528;
  border:2px solid whitesmoke;
  border-radius:100%;
  height:50em;
  width:50em;
  position: absolute ;
  top:10rem;
  left:5rem;
  text-align:center;
  animation:rotate 3s infinite;
}
@keyframes rotate{
  50%{
    transform:rotate(10deg);
  }
}
h1{
  position:absolute;
  top:2em;
  left:0.6em;
  font-size:99px;
  text-shadow: 5px 6px #C5C13A;
  font-family:"Brush Script MT",cursive;
  transition:0.4;
  animation:shadows 5s infinite;
}
p{
  position:absolute;
  top:24em;
  left:0.6em;
  font-family:"monospace";
}
@keyframes shadows{
  0%{
      text-shadow: 5px 6px #C5C13A;
  }
  25%{
      text-shadow: 5px 6px #20FFBB;
  }
  50%{
     text-shadow: 5px 6px #3F9B34;
  }
  75%{
     text-shadow: 5px 6px #18A3C1;
  }
  100%{
      text-shadow: 5px 6px #186DC1;
  }
}

Public Link:
https://earthdaycss.netlify.app/earthday-markup.html
Journey:

This project was a fun and educational dive into the world of CSS art. Here's a look at my creative process:

Technical Exploration: This project allowed me to experiment with different CSS properties. I used features like gradients, shadows, and potentially even subtle animations to create a sense of depth and dimension for the continents and background.
Enhancing the Continents: While the continents might have started as a reference image (PNG), the focus was on transforming them with CSS. I experimented with stylistic borders, textures, and highlighting specific geographical features to make them stand out.
Crafting the Background: Creating a visually compelling backdrop for the continents was key. This could involve contrasting colors, textures, or even elements like oceans or clouds created with gradients and filters.

Celebrating Earth Day with Code:

This project has been a rewarding way to celebrate Earth Day with a creative twist. It allowed me to showcase how code can be used for artistic expression and raise awareness about our planet's precious resources.

Call to Action:

What do you think of my Earth Day-themed CSS art? Do the visuals inspire you to take action towards protecting our planet? Share your thoughts and ideas in the comments below!

Let's use creativity and technology to celebrate Earth Day and advocate for a sustainable future!

Resources I Used In My Project:
I used a png image from i.pinimg.com
https://i.pinimg.com/originals/75/7e/10/757e102d4571bc9f23e33d74b2ba7945.png

Litestyle CSS: A Lightweight Alternative to Full-Fledged Frameworks

Somnath Pan — Mon, 15 Apr 2024 17:07:02 +0000

When it comes to CSS frameworks, Bootstrap is often the first name that comes to mind. But what if you don't need a comprehensive framework with a steep learning curve? What if you just want a lightweight, flexible solution for styling your web pages? That's where Litestyle CSS comes in.

Litestyle CSS vs. Other Lightweight CSS Libraries

Litestyle CSS is not the only lightweight CSS library out there. Pure CSS, Skeleton, and Milligram are just a few examples of other minimalistic CSS frameworks. So how does Litestyle CSS compare?

Pure CSS is a more comprehensive framework that includes a set of pre-designed components, while Litestyle CSS is more focused on providing a set of utility classes.
Skeleton is a more opinionated framework that includes a set of pre-designed components and a grid system, while Litestyle CSS is more flexible and customizable.
Milligram is a more minimalistic framework that provides a set of utility classes, similar to Litestyle CSS, but with a different syntax and approach.

Litestyle CSS Use Cases

So when should you use Litestyle CSS? Here are a few use cases where Litestyle CSS shines:

Small to medium-sized projects that require a lightweight and customizable CSS solution.
Projects that need a fast and efficient CSS framework that won't slow down page load times.
Developers who want a flexible and easy-to-use CSS framework that doesn't require a steep learning curve.

Conclusion

Litestyle CSS is a great choice for developers who want a lightweight, flexible, and easy-to-use CSS framework. While it may not be as comprehensive as full-fledged frameworks like Bootstrap, it provides a minimal set of classes and utilities that are perfect for small to medium-sized projects. By comparing Litestyle CSS with other lightweight CSS libraries

Introducing litestyle css

Somnath Pan — Sat, 13 Apr 2024 12:00:59 +0000

Litestyle:

A Lightweight and Flexible CSS Micro-Framework
Litestyle is a minimal CSS micro-framework designed to streamline your web development workflow. It provides a solid foundation for building modern and responsive websites with minimal overhead. Litestyle focuses on essential styles and utility classes, allowing you to achieve clean and consistent layouts without the bulk of a larger framework.

Getting Started

There are two main ways to use Litestyle:

•Download the files: Download the Litestyle.css file from Github .Include litestyle.css in your HTML document using the tag.
•CDN (Content Delivery Network): Use a CDN link to include Litestyle directly in your project. cdn:https://litestylecss.netlify.app/litestyle.css

Core Styles

Litestyle provides basic styles for common HTML elements like headings, paragraphs, lists, links, and images. These styles are designed to be unobtrusive and can be easily overridden with your own custom styles.

Here are some examples:

Headings: Headings use a clean and modern font with appropriate sizes for hierarchy.
Paragraphs: Paragraphs have a comfortable reading line height and default margin for spacing.
Lists: Unordered lists use bullet points, while ordered lists use numerical counters.
Links: Links are underlined by default and change color on hover.
Images: Images have a slight border for better visibility.
Layout

Layout:

Litestyle offers various utility classes to help you create flexible layouts:

•Flexbox: Use classes to achieve flexbox layouts with different alignments.
•Grid: Utilize classes for grid-based layouts with various gap options and centering.

Utility Classes

Litestyle provides a range of utility classes for common styling needs:

Margins & Padding: Easily adjust margins and padding using designated classes.
Width & Height: Control element dimensions with width and height classes.
Colors: Access predefined color classes based on the color variables defined in Litestyle CSS.

Typography: Adjust font sizes, weights, and styles with typography classes.

Advanced Features

Litestyle also includes some additional features for more complex styling:

•Animations: Utilize pre-defined animation classes for basic animation effects.
•Responsive Design: While not a core focus, Litestyle provides some basic utility classes for responsive adjustments.

Customization

Litestyle is built with customization in mind. You can easily override its default styles using your own CSS rules.

Conclusion

Litestyle offers a lightweight and flexible foundation for building modern websites. With its core styles, layout options, utility classes, and customization potential, it empowers you to create clean and responsive user interfaces efficiently. We encourage you to explore Litestyle and see how it can streamline your web development process.

read our docs:
https://litestylecss-docs.netlify.app/docs-homepage.html