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
Top comments (0)