Tech stack TLDR
- Frontend: svelte / react / *nothing* (aka html + javascript)
- Backend: Nextjs (javascript) / express (javascript) / flask (python) / Laravel (php)
- CSS: Tailwindcss
- Runtime:
- Javascript (express / nextjs): Deno or Bun - https://docs.deno.com/examples/next_tutorial/
- Good comparaison here: https://betterstack.com/community/guides/scaling-nodejs/nodejs-vs-deno-vs-bun/#security
- PHP (laravel): Nginx for easy mode, but recommend FrankenPHP or swoole for speed
- https://laravel.com/docs/11.x/deployment#server-configuration
- https://dev.to/dimdev/performance-benchmark-of-php-runtimes-2lmc
- Python (flask): WSGI server like Gunicorn (might be worth using supervisor too)
- https://shivamrana.me/2020/05/flask-prod/
- Databases:
- sqlite (for prototyping or small ass website)
- postgresql
- [optional] supabase
- Other:
- Queue system (and caching): Redis
- Secrets manager: Hashicorp Vault
- Reverse proxy: (anton Putra on youtube has great comparaisons)
- HAProxy for speed and when using TLS
- caddy for ease of use and when using TLS
- nginx for speed and stability
- traefik for ease of use with orchestrators like docker
- sending emails:
- resend.com
CSS frameworks
Utility-based:
Classless (good for prototyping):
Branding
Colors
Choosing colors:
Color wheels and color theory:
- https://www.figma.com/color-wheel/
- https://www.canva.com/colors/color-wheel/
- https://www.flux-academy.com/blog/ultimate-guide-to-choosing-colors-for-web-design
Fonts
Icons
Generic:
Brand Icons:
Design and image editing
Free Stock Photos / placeholder content
Favorites:
Others:
- https://www.pexels.com/
- https://pixabay.com/
- https://coverr.co/
- https://unsplash.com/
- https://pikwizard.com/
- https://www.videezy.com/
- https://mixkit.co/
- https://www.canva.com/
- https://mixkit.co/free-stock-video/
- gfycat.com - free videos that do need citation
- https://avopix.com/premium-videos
Ref:
SEO
Blogging
- For non-tech-savvy: https://ghost.org/
- For tech-savvy (static site generator): https://gohugo.io/