My Journey as a Freelance Web Developer for Etugi

TL;DR

Built a local Vietnamese website for Etugi Bình Dương.
No backend — everything was pure HTML, CSS, and JS.
Blogs stored as Markdown files, products in JSON.
Shopping cart + checkout built entirely on the frontend using cookies and EmailJS.
Functional, beautiful UI but poor SEO performance.
Final self-score: 7.25/10.

When I first started as a freelance web developer, I didn’t have a personal portfolio or past projects to showcase.

So when Etugi Bình Dương, a local branch of a company in my hometown, approached me, I knew this project would be a turning point in my freelance journey.

Their initial requirement was simple:

“We need a website to showcase our products and brand.”

At that time, I promised myself I would build everything from scratch using only HTML, CSS, and JavaScript — no backend, no PHP, no CMS like WordPress.

It sounded simple, but as the project grew, I quickly realized it would push my limits as a developer.

1. Background: Etugi Bình Dương

Etugi Bình Dương focuses on water filtration solutions.

They needed a clean, functional website to represent their brand and make it easier for customers to explore products.

The entire website structure was Vietnamese-only, as Etugi serves only the local community in Bình Dương.

Website Structure:

Trang chủ (Homepage)

Giới thiệu (Introduction)

Về chúng tôi (About Us)
Showroom

Sản phẩm (Products) with six categories:

Dân Dụng (Residential)
Bán Công Nghiệp (Semi-Industrial)
Công Nghiệp (Industrial)
Thiết Bị Lọc Tổng (Whole House Systems)
Vật Liệu Lọc Nước (Filtration Materials)
Phụ Kiện Máy Lọc Nước (Accessories)

Công nghệ MOFs (Technology Page)

Tin tức (Blog/News)

Giỏ hàng và thanh toán (Shopping Cart & Checkout)

Liên hệ (Contact)

2. Planning and Inspiration

I spent a lot of time researching modern UI layouts and eventually drew inspiration from

HKAngles Freshter.

The clean layout matched Etugi’s vision, and I made sure to adapt the design creatively.

As people say: “Steal like an artist.”

From the beginning, I had two goals:

Build a lightweight, clean frontend with HTML, CSS, and JS only.
Create a functional shopping experience without relying on third-party services — except for sending emails.

3. Development Challenges

Design was the easy part.

The real challenge came from the limitations of a no-backend project.

Key decisions I made:

EmailJS would handle all forms and order notifications.
Product data would be stored in JSON files and fetched dynamically.
Blog posts would be written as Markdown files, also fetched dynamically.
All features — shopping cart, blog, and checkout — had to work purely in the frontend.

4. Blog System

I decided to store all blog posts as Markdown (.md) files.

The website fetches these files and renders them dynamically.

While this approach was lightweight, it came with serious limitations:

Each new article required manual file creation and path configuration.
No CMS or dashboard to manage posts.
Metadata like titles and descriptions had to be written directly inside each file.

Functionally, the blog worked, but from an SEO perspective, it was a disaster:

Poor URL structure.

No dynamic metadata.

Google Search Console struggled to index content.

5. Product Pages

For the product catalog, I stored all product information in a single JSON file.

The website would fetch this JSON and display products dynamically.

While this was cleaner than hardcoding every product, it wasn’t perfect:

Adding or editing products required manual JSON updates.
With six product categories, the file grew very large and hard to manage.
The client couldn’t update anything themselves.

It was better than static HTML, but still required a lot of manual work from me every time Etugi needed changes.

6. Shopping Cart & Checkout System

This was by far the most difficult part of the project.

The client wanted a simple flow:

Customer browses products.
Click “Add to Cart.”
Cart page displays selected items.
Customer fills out shipping information.
Both Etugi and the customer receive email confirmations.

Sounds easy? Without a backend, it was a nightmare.

6.1. Storing Cart Data

My first problem: how to persist cart data between pages?

After a lot of trial and error, I decided to store cart data in browser cookies.

When the user clicks "Add to Cart", JS saves the product name, price, and quantity to cookies.
On the cart page, JS reads the cookies and dynamically renders the list of items.

It wasn’t scalable, but it worked perfectly for a fully frontend-based site.

6.2. Handling Orders with EmailJS

Next challenge: handling orders.

Normally, a backend would:

Save the order in a database.
Send email notifications.

But with no backend, I had to rely on EmailJS — and I went so far as to create three separate EmailJS accounts:

Homepage contact form.
Contact page form.
Shopping cart order system.

6.3 Checkout flow

[User] --Add to Cart--> [Cookies] --Go to Cart Page-->
[JS Form] --Collects Cart Data + Customer Info-->
[EmailJS] --> [Etugi receives order summary]
          --> [Customer receives confirmation email]

This structure was 100% imagined and implemented by me, born from necessity and creative problem-solving.

6.4. Honest Reflection

While the system worked, I have to admit:

It’s not scalable or SEO-friendly.
Using cookies for cart storage feels hacky and fragile.
Managing three EmailJS accounts is messy.
There’s no database — orders exist only in emails.

But for my first serious freelance project, it was an achievement I’m proud of.

It gave the client exactly what they asked for: a functional online store.

7. SEO Struggles

Because the entire site was built manually:

No dynamic metadata.
No schema markup.
Poor Google rankings, even after attempts to optimize.
Cloudflare analytics even revealed thousands of hits per day from strange countries.
Clearly, the site was also being DDoS attacked, adding to the stress.
The client also chose the wrong SEO partner, which hurt the site’s performance further — they weren’t doing real SEO at all, just DDoS attacking the site.

As a result, the website never reached its full potential in organic search.

8. Final Results

The website etugibinhduong.com launched successfully.

Strengths:

Beautiful, modern UI.
Fully functional shopping cart and checkout.
Clean and fast frontend performance.

Weaknesses:

Poor SEO performance.
Manual content management.
Hard to scale for future growth.

If I were to score myself honestly: 7.25/10.

I delivered a working product that met the client’s initial goals, but I know it could have been better.

9. Lessons Learned

This project taught me lessons I’ll never forget:

Clean code isn’t enough — SEO and scalability matter just as much.
Purely frontend systems are fun to build, but painful to maintain.
Good communication is essential when working with non-technical clients.
Even the most beautiful UI can fail without proper marketing.
Freelancing without a portfolio is extremely difficult — convincing your first client is the hardest step.

Most importantly, this project helped me master HTML, CSS, and JavaScript.

It gave me the confidence to move on to more advanced projects — including the very portfolio site you’re reading now.

10. Conclusion

While the Etugi website wasn’t perfect, it was a milestone in my freelance journey.

It represents my growth as a developer, my struggles, and my determination to solve problems creatively.

It’s okay to start imperfectly.

Every flawed project is a stepping stone toward mastery.