DEV Community: Md. Lavib Uddin Ashik

Building a Sales Management System for Khalid's Dreams

Md. Lavib Uddin Ashik — Tue, 14 Jul 2026 08:13:28 +0000

Building a Custom Sales Management System for Khalid’s Dreams: My 15-Day Development Journey

Introduction

Building a real-world project is one of the most effective ways to grow as a developer. Tutorials can teach syntax, frameworks, and individual concepts, but working on an actual business problem teaches something different: how to understand requirements, design a practical solution, solve unexpected problems, and turn an idea into a working system.

Recently, I developed a custom Sales Management Web Application for Khalid’s Dreams, a business based in Sirajganj, Bangladesh.

This project was created specifically for the company’s internal and personal business operations. It was not designed as a public e-commerce website. Instead, the main goal was to create a practical system that could simplify everyday tasks such as recording sales, managing orders, generating invoices, tracking customers, reviewing sales history, and organizing business data.

The entire development journey took me approximately 15 days.

Those 15 days were much more than simply writing HTML, CSS, and JavaScript. Throughout the project, I gained practical experience in business workflow analysis, sales calculations, order management, cloud-based data handling, Google Sheets integration, PDF generation, responsive design, debugging, and building software around real operational needs.

This article is the story of how I approached the project, the challenges I faced, what I built, and most importantly, what I learned.

Understanding the Real Business Problem

Before writing code, I needed to understand the actual problem.

A business handles different types of information every day:

Customer information
Phone numbers
Addresses
Product details
Order information
Sales amounts
Pending orders
Previous customer records
Daily sales totals
Invoices

When these processes are handled manually or through disconnected tools, managing information can become time-consuming.

So, instead of building a website simply because it looked good, I wanted to build something that could solve practical problems.

The goal became clear:

Create one internal web application where Khalid’s Dreams could manage important sales and order-related operations more efficiently.

That changed my approach to development.

I was no longer thinking only about pages and buttons. I had to think about workflow.

What happens when a customer places an order?

How should customer information be stored?

What happens when the same customer orders again?

How can an invoice be generated?

How can sales data be viewed later?

How can pending orders be separated from completed sales?

These questions shaped the entire project.

Choosing the Technology Stack

For this project, I worked primarily with:

HTML5
CSS3
Vanilla JavaScript
Google Sheets
Google Apps Script
Browser localStorage
jsPDF
html2canvas
Netlify

The application was built without relying on a large frontend framework. This gave me an opportunity to work more deeply with JavaScript, DOM manipulation, application state, data handling, and browser APIs.

For cloud-based business data, I connected the application with Google Sheets through Google Apps Script. Some offline-first data, such as product and pending-order information, could also be handled through browser localStorage.

The project also uses jsPDF and html2canvas for invoice generation.

Building the Sales Entry System

One of the most important parts of the application was the new sales entry system.

The goal was to make entering an order simple and efficient.

The sales form handles information such as:

Customer details
Phone number
Address
Location
Products
Quantity
Price
Total amount
Additional notes

I also implemented dynamic order items so that multiple products could be added to a single sale.

As products and quantities are entered, the system calculates the subtotal dynamically.

This part of the project taught me that calculation logic in a real business application requires careful attention. A small calculation error can create incorrect records, invoices, or financial summaries.

I had to think carefully about:

Input validation
Numeric values
Dynamic items
Total calculations
Duplicate submission prevention
Data consistency

The system also captures date and time automatically and creates an invoice number for the transaction.

Connecting a Website with Google Sheets

One of the most valuable technical experiences from this project was learning how to connect a web application with Google Sheets.

Before working on this system, I understood Google Sheets primarily as a spreadsheet tool. During this project, I explored how it could also work as a lightweight data layer for a specific internal application.

The workflow involved:

Web Application → Google Apps Script → Google Sheets

This allowed sales records to be stored in a cloud-accessible spreadsheet.

The integration also required me to deal with browser communication constraints. The project uses a JSONP-based approach for retrieving data through Google Apps Script.

This was an important learning experience because I had to understand more than frontend design.

I needed to think about:

How data is sent
How data is retrieved
How responses are handled
How customer information is matched
How records remain consistent
What happens when new data is added

This feature gave me practical experience connecting a frontend application to an external cloud-based service.

Building the Customer Auto-Fill System

One feature that I particularly enjoyed building was the repeat customer auto-fill system.

The idea was simple:

If an existing customer orders again, why should the same information have to be entered manually every time?

The system can use a phone number to check previously stored customer information. When a matching customer is found, relevant details can be filled automatically.

Conceptually, the flow works like this:

Enter phone number → normalize number → search customer data → find match → auto-fill available information

This feature required careful handling of phone numbers because the same number can sometimes appear in different formats.

For example, formatting differences involving spaces or country codes can make two identical phone numbers appear different to a program.

So, phone number normalization became an important part of the system. The project normalizes phone numbers before matching customer records.

This taught me an important software-development lesson:

Real-world data is rarely as clean and consistent as we expect.

Developing the PDF Invoice System

Another major feature was automatic PDF invoice generation.

After a sale is processed, the system can generate an invoice containing relevant transaction information.

The invoice includes elements such as:

Business information
Invoice number
Date and time
Customer information
Order details
Total amount
Optional notes

The implementation uses html2canvas and jsPDF to render invoice content and generate the PDF.

Building this feature required attention to both functionality and presentation.

An invoice is not simply another webpage. It needs to be readable, structured, and suitable for sharing or record-keeping.

I also had to think about variable order sizes. An order with one product and an order with many products do not require the same amount of space.

Working on this feature helped me better understand document generation from web applications.

Creating the Sales History and Reporting Section

Recording a sale is only one part of sales management.

A business also needs to review previous information.

For this reason, I developed a Sales History section that retrieves stored sales data and presents it in a more useful form.

The system includes features such as:

Sales summary information
Date-range filtering
Search functionality
Sales data table
Data refresh
CSV export
Visual sales representation

The project also includes an SVG-based bar chart for recent sales visualization.

This part of the development process helped me think differently about data.

Storing information is not enough.

The real value comes from making that information:

Searchable
Filterable
Understandable
Exportable
Useful for decision-making

Product Management

I also created a product catalog management section.

The system can organize product information and track stock-related status.

Features include:

Adding products
Editing product information
Deleting products
Category filtering
Stock status indicators
Product summary information

For this part of the application, browser localStorage is used as part of the offline-first approach.

Building this section improved my understanding of CRUD-style operations and local browser data management.

Customer Directory

Over time, sales records naturally create valuable customer information.

Instead of leaving that information scattered across individual orders, I developed a Customer Directory.

The system can build customer information from sales data and organize records more effectively.

It includes capabilities such as:

Customer search
Sorting
Customer summaries
Order history viewing
Customer categorization

The project summary also includes customer tier logic based on order activity or purchase value.

Working on this feature helped me understand how raw transaction data can be transformed into useful business information.

Building the Order Tracker

Not every order should immediately become a completed sale.

Some orders remain pending.

For that reason, I developed a separate Order Tracker.

The system can maintain pending order information and later process an order when it is ready.

The tracker includes:

Pending order entry
Customer auto-fill support
Pending order cards
Order age information
Pending statistics
Order completion workflow
PDF and sales-record integration

The navigation also provides a pending-order indicator so that unfinished orders are easier to notice.

This was one of the features that helped me understand workflow design more deeply.

A good application should reflect how the business actually works.

Making the Website Responsive Across Devices

Responsiveness was one of my major priorities.

The system was designed with a mobile-first approach and adapted for:

Small mobile devices
Standard smartphones
Tablets
Laptops
Desktop screens

The documented responsive structure includes different layouts below 380px, from 380–600px, 600–900px, and above 900px. The application also uses a mobile-oriented menu approach and includes safe-area considerations for devices with screen notches.

My goal was not simply to make the website “fit” on smaller screens.

I wanted the interface to remain:

Clean
Usable
Professional
Easy to navigate

This project significantly improved my understanding of responsive UI development.

The Challenges I Faced

The approximately 15-day development process was not without challenges.

Some of the most important areas I had to work through included:

1. Understanding the business workflow

Before implementing features, I had to understand how sales, customers, invoices, and pending orders were connected.

2. Google Sheets integration

Connecting frontend logic with Google Apps Script and retrieving data correctly required experimentation and debugging.

3. Data consistency

Phone numbers, customer records, invoice numbers, and transaction data needed consistent handling.

4. Calculation logic

Sales totals and dynamic order items required careful implementation.

5. Responsive design

A data-heavy business interface needs to remain usable even on small screens.

6. Managing interconnected features

A customer record can affect sales, order tracking, invoices, and history. Features cannot always be developed in isolation.

These challenges were exactly what made the project valuable to me.

What I Learned from This Project

This project gave me experience beyond writing frontend code.

I learned more about:

Translating business requirements into software features
Structuring a real-world application
Managing sales-related calculations
Building an order-management workflow
Integrating Google Sheets with a web application
Working with Google Apps Script
Generating PDF invoices
Handling customer data
Normalizing inconsistent user input
Using browser localStorage
Designing responsive interfaces
Debugging interconnected features

Most importantly, I learned that software development is fundamentally about solving problems.

The technology is important, but understanding the problem comes first.

How This Project Helped Khalid’s Dreams

The purpose of this application was to support the internal operations of Khalid’s Dreams.

Instead of treating sales, customers, pending orders, and invoices as completely separate tasks, the system brings these workflows into a more connected environment.

The project was built specifically for the company’s own internal use.

For me, seeing a project move from an idea to a usable business tool was one of the most rewarding parts of the development journey.

My Personal Growth as a Developer

When I started this project, I knew I would be writing code.

What I did not fully expect was how much I would learn about:

Business logic
Data flow
User experience
Operational workflows
Debugging
Software planning

This project forced me to think beyond:

“How do I build this feature?”

Instead, I started asking:

“Why does the business need this feature, and how should it actually work?”

That shift in thinking is one of the biggest lessons I am taking from this project.

What I Would Improve in the Future

No software project is truly finished forever.

Possible future improvements could include:

Stronger authentication and role-based access
A dedicated backend and database as requirements grow
More advanced analytics
Automated backup strategies
Improved inventory workflows
Additional reporting features

These are future possibilities rather than features I claim are currently implemented.

Final Thoughts

Developing the custom Sales Management System for Khalid’s Dreams was one of the most practical learning experiences in my development journey so far.

In approximately 15 days, I worked through the process of understanding a real business problem and turning it into a functional web application.

I worked with sales management, order tracking, customer information, PDF invoice generation, Google Sheets integration, product management, data handling, and responsive design.

But the biggest achievement was not simply completing a website.

The biggest achievement was gaining the experience of building software around a real-world need.

Every bug I fixed taught me something.

Every feature forced me to think more deeply.

Every challenge improved my understanding of development.

This project strengthened my confidence and motivated me to continue building more useful, secure, and meaningful applications in the future.

Written by Md. Lavib Uddin Ashik
Web Developer | Cybersecurity Enthusiast

My First Bug Bounty Experience: Lessons, Challenges, and Growth

Md. Lavib Uddin Ashik — Fri, 15 May 2026 13:49:51 +0000

Bug bounty hunting is one of the most exciting ways to learn cybersecurity while working on real-world applications. Unlike theoretical learning, it gives you the opportunity to test live systems, think like an attacker, and help organizations secure their platforms.

When I first started my bug bounty journey, I was full of curiosity—but also confusion.

🚀 The Beginning: Excitement Meets Reality

At the start, everything seemed simple in theory. I had learned about vulnerabilities like XSS, SQL Injection, and IDOR. I thought I could easily find bugs if I just followed tutorials.

But reality was different.

When I began testing real applications:

I couldn’t find any vulnerabilities
I didn’t fully understand the application logic
I felt lost and frustrated There were moments when I questioned whether I was on the right path.

💭 The Struggle Phase

One of the biggest challenges in bug bounty hunting is not finding anything at the beginning.

You test:

Input fields
URLs
Parameters

But nothing works.

This phase is where most beginners give up.

But I made a decision:
👉 I will keep learning, no matter how long it takes.

📚 Learning and Improving

Instead of randomly testing, I started focusing on structured learning.

I improved my understanding of:

How web applications work
How authentication and authorization function
How data flows between client and server

I also began practicing more:

Testing different endpoints
Observing application behavior
Reading write-ups from other researchers

Slowly, things started to make sense.

🔍 The Breakthrough Moment

After consistent effort, something finally happened.

I discovered a small vulnerability.

It was not critical. It didn’t have a huge impact. But for me, it meant everything.

Because:

It proved that my learning was working
It boosted my confidence
It motivated me to keep going

That small finding was the turning point in my journey.

🧠 Key Lessons I Learned

Patience is Everything

Bug bounty is not about quick success. It takes time, practice, and persistence.

Consistency Beats Talent

Even if you don’t feel smart enough, consistent effort will always win.

Understanding > Tools

Tools are helpful, but real skill comes from understanding how systems work.

Failure is Part of the Process

Not finding bugs is normal. It’s part of learning.

⚙️ My Approach Now

Over time, I developed a simple workflow:

- Reconnaissance
- Understanding application structure
- Identifying input points
- Testing for common vulnerabilities
- Looking for unusual behavior

This structured approach helps me stay focused and efficient.

🎯 Advice for Beginners

If you’re starting bug bounty:

Start with small programs
Don’t rush for big payouts
Focus on learning, not earning
Practice daily, even for 1 hour Most importantly: 👉 Don’t give up in the early stage.

🌍 Beyond Money

Bug bounty hunting is not just about earning money.

It’s about:

Building skills
Thinking critically
Helping secure real-world systems

This mindset makes the journey more meaningful.

🔥 Final Thoughts

My first bug bounty experience was challenging, frustrating, and incredibly rewarding.

That small vulnerability I found changed my perspective. It showed me that progress is real—even if it’s slow.

This is just the beginning of my journey.

Written by Md. Lavib Uddin Ashik
Cybersecurity Enthusiast | Ethical Hacker

From Beginner to Job Placement: My 6-Month Web Development Journey with Programming Hero

Md. Lavib Uddin Ashik — Tue, 28 Apr 2026 17:18:34 +0000

In today's fast-evolving digital world, web development has become one of the most valuable and in-demand skills. But like many others, my journey didn't start with expertise - it started with curiosity, uncertainty, and a strong desire to grow.

This is the story of how I transformed myself over six months, completed a structured web development program, and successfully moved toward job placement - with a bigger vision ahead.

🚀 The Beginning: A Decision to Change
Six months ago, I made a decision that would shape my future - I committed to learning web development seriously.

At that time, I was a beginner. I had limited knowledge about how websites work, how code is written, or how developers build real-world applications. Everything felt new and sometimes overwhelming.

But I had one thing clear in my mind:
I wanted to grow, and I was ready to put in the effort.

📚 The Learning Phase: Building Strong Foundations
During this journey, I focused on learning the core fundamentals of web development:

HTML for structuring web pages
CSS for styling and responsive design
JavaScript for interactivity and logic

Step by step, I started understanding how modern websites are built. From simple static pages to more dynamic and interactive interfaces, each concept added a new layer to my skills.

Learning was not always easy.

There were moments of confusion, bugs that took hours to fix, and concepts that required repeated practice. But consistency made the difference.

💪 Discipline, Practice, and Growth
Over these six months, I pushed myself to improve every single day.

Practiced coding regularly
Built small projects
Fixed errors and learned from them
Followed a structured roadmap

Instead of giving up during difficult moments, I used them as opportunities to grow.

This mindset helped me move from:

👉 "I don't understand this"
to
👉 "Let me figure this out."

🛠️ Projects and Real-World Experience
One of the most important parts of my journey was working on practical projects.

Projects helped me:

Apply what I learned
Understand real-world scenarios
Improve problem-solving skills

Building projects gave me confidence. It showed me that I wasn't just learning theory - I was actually becoming a developer.

🎯 The Breakthrough: Course Completion & Job Placement
After six months of consistent effort, I successfully completed my Level 1 Web Development course.

But the journey didn't stop there.

Through dedication, learning, and continuous improvement, I achieved something even more meaningful -
I moved forward into job placement with the Programming Hero team.

This milestone represents more than just completion - it represents growth, discipline, and belief in myself.

🧠 Lessons I Learned Along the Way
This journey taught me valuable lessons that go beyond coding:

Consistency is more powerful than motivation
Practice is the key to mastery
Failure is part of the process
Growth requires patience and persistence

Every challenge I faced helped me become stronger and more confident.

🌍 Looking Ahead: Bigger Goals, Bigger Vision
Although I've achieved an important milestone, I believe this is just the beginning.

My next goals are:

To become a more advanced developer
To learn modern frameworks and technologies
To build impactful real-world applications
To continue improving my problem-solving and technical skills

I am committed to going beyond my current level and reaching new heights.

🔥 Final Thoughts
This six-month journey was not easy - but it was worth every effort.

From being a beginner to reaching job placement, this experience has changed my mindset and my direction.

If you're starting your journey, remember:
👉 You don't need to be perfect
👉 You just need to start and stay consistent
Success doesn't come overnight - but with dedication, it definitely comes.

Written by Md. Lavib Uddin Ashik
Web Developer | Cybersecurity Enthusiast | Ethical Hacker

How I Started My Cybersecurity Journey

Md. Lavib Uddin Ashik — Sun, 26 Apr 2026 02:17:59 +0000

Cybersecurity is one of the most exciting and rapidly growing fields in the digital world. My journey into cybersecurity began with curiosity and a strong desire to understand how systems work and how they can be secured.

At the beginning, I had little knowledge about hacking or security. I started by learning the basics of networking, web technologies, and programming. Understanding how websites work helped me realize how vulnerabilities can exist in real-world applications.

Gradually, I explored topics like ethical hacking, penetration testing, and bug bounty hunting. I began practicing on legal platforms and intentionally vulnerable applications. This hands-on practice helped me gain real-world experience.
One of the biggest turning points in my journey was discovering bug bounty programs. These programs allowed me to test real websites and find vulnerabilities in a legal way. It was both challenging and rewarding.

Cybersecurity is not just about hacking - it's about protecting systems, data, and people. As I continue learning, I aim to become a skilled ethical hacker and contribute to building a safer digital world.

Written by Md. Lavib Uddin Ashik
Cybersecurity Enthusiast | Ethical Hacker

This is Md. Lavib Uddin Ashik, a cybersecurity enthusiast and aspiring ethical hacker with a strong foundation in web development.

Md. Lavib Uddin Ashik — Sat, 25 Apr 2026 18:45:12 +0000

I focus on web security, bug bounty hunting, and building secure web applications.
I also share knowledge to help beginners grow in cybersecurity and development.