Part 01 Frontend

When starting a new web project, there are several crucial decisions to make that will impact your development experience and project success. Let’s break down the key considerations, prioritizing free options wherever possible:

Choosing Your Tech Stack

Static vs. Interactive

• Static Sites: Perfect for blogs, documentation, and marketing sites

  • Best choices: Astro, Next.js (static export), Hugo
  • Benefits: Fast loading, great SEO, low maintenance

• Interactive Apps: For dashboards, social platforms, real-time features

  • Best choices: Vue.js, Next.js, Nuxt, SvelteKit
  • Benefits: Rich user interactions, real-time updates

Working with AI Tools

While tools like Cursor AI are incredibly helpful, they work best when you:

• Have strong fundamentals in your chosen stack
• Can spot and correct AI-generated mistakes
• Use AI as an assistant, not a replacement for understanding

Pro Tip

• Use familiar stacks for time-sensitive projects
• Experiment with new technologies on smaller, personal projects
• Remember: AI helps most when you understand the underlying technology

My Two Cents

For static websites, the most common choice is Wordpress; and when it comes to e-commerce, Shopify remains the number one go-to solution.

As a developer, I appreciate the control and flexibility that custom development offers. However, these ready-made solutions provide a comprehensive, all-in-one package that simplifies the process—though they do require an investment of time to understand their setup and configuration.

Weigh all your options, assess your strengths, leverage your development capacity but do not bindly depend on it. Make a decision, act on it, you may or may not regret it later but we can always do better next time.

So.. one thing out of the way. What’s next?

UI/UX Considerations

Built-in Components

TailwindUI, Shadcn, Material UI, DaisyUI, etc..

Design Systems

• Ant Design(A full-fledged enterprise UI design system)
• Material Design
• Carbon Design etc

My Two Cents

Every developer struggles with UI to some extent, when you don’t have a designer to take care of the aesthetic aspects of the website. For some, it’s an endless frustration—especially when the real challenge is not knowing what looks good and what doesn’t. After all, you can’t improve what you can’t measure.

For that, my suggestion is to use a UI library or framework built by professionals. Simply tweak the theme colors, adjust a few styles, then focus on what you do best—the coding.

Choose the framework that comes with respoonsive design that adopts:

• Mobile-first approach
• Breakpoint strategies

I particularly like a designer system creative-tim.com; They offer both free and paid UI frameworks/skeleton projects with beautifully crafted designs that seamlessly integrate with major front-end stacks like Angular, React, Vue.js, and even design systems like Ant Design, further enhanced with their elegant design tweaks.

Great work! Their designs are truly an inspiration to me. 🚀

Next article, Let’s cover the backend architecture. ⏭️