Angular
To build this app, I had to decide on a framework of development. It was possible to build this from the ground up using HTML, CSS & plain JS, but then I would loose the creature comforts that a well-designed framework brings such as scalability to screen-size, well designed premade components and a wide community that creates a support system when the average person begins their development journey.
I vetted a few main frameworks and listed their Pros & Cons below:
| Framework name | Pros | Cons |
|---|---|---|
| Angular | - Full-featured framework with built-in routing, HTTP, and forms - Powerful CLI and tooling - TypeScript-first approach - Backed by Google |
- Steep learning curve - Verbose syntax and boilerplate - Larger bundle sizes |
| React | - Component-based and flexible - Large ecosystem and community - Rich set of third-party libraries - Backed by Meta |
- Just a UI library, requires external tools for full setup - Frequent updates and breaking changes - Boilerplate for state management |
| Next.js | - Built on top of React with full-stack features - Server-side rendering (SSR) and static site generation (SSG) - File-based routing - Optimized performance and SEO |
- Opinionated structure may not suit every project - Learning curve if new to React or SSR - Some features behind enterprise licenses |
| Svelte | - Truly reactive and minimal boilerplate - Compiles to vanilla JS (no virtual DOM) - Fast performance and small bundle size - Great developer experience |
- Smaller ecosystem and community - Less mature than React/Angular - Fewer integrations and tooling options |
Ultimately, I decided on going with angular. This is because of a few reasons:
- I had previous experience with the framework
- It was made by google, so I though integrating Gemini & other google frameworks/APIs would be easier
- Had a good community
- Was less module-dependent compared to Angular, allowing for smoother development with a smaller build package.