Every software application is a mix of different technologies working together to make something functional. The specific frameworks, languages, and tools depend on what the software is trying to accomplish. Foodable is a full-stack web app, and while it’s easy to split the tech stack into front-end and back-end, there’s a lot more going on under the hood. Instead of writing up another design doc, I’m breaking down some parts of Foodable’s tech stack and my experience working with these technologies.
My Favorite Technology: Next.js
Out of everything we’ve used in this project, Next.js is my favorite. It simplifies routing, enhances performance with server-side rendering (SSR) and static site generation (SSG), and allows for API routes within the same framework, reducing the need for a separate backend. The developer experience is also top-notch, with features like fast refresh and built-in TypeScript support. Plus, its tight integration with Vercel streamlines deployment and continuous integration.
How does it work?
Next.js enhances the standard React experience by allowing both static and dynamic rendering. It determines at build time or request time whether a page should be statically generated (SSG) or rendered on the server (SSR). This flexibility makes it perfect for Foodable, where some pages (like recipes) benefit from static generation for SEO, while user-specific pages (like saved recipes) need real-time data with SSR. With API routes, we can also handle backend logic without needing a separate Express server, keeping everything within the same framework.
Least Favorite Technology: None (But Some Were Annoying to Learn)
I wouldn’t say I have a least favorite technology, but some were definitely frustrating at first. Zustand and TanStack Query required a shift in mindset regarding state management, especially when handling both client-side and server-side state efficiently. However, once I got comfortable with them, they became essential.
Easiest Technology: Tailwind CSS
Tailwind CSS was by far the easiest to pick up and use effectively. It speeds up UI development with its utility-first approach, ensuring that styles remain consistent without writing tons of custom CSS. The ability to rapidly prototype and refine the UI made front-end development much more efficient.
What’s Missing From the Stack?
One thing I wish we had included from the start is WebSockets for real-time updates. While TanStack Query does a great job with caching and re-fetching, real-time features like collaborative shopping lists or live chat would be smoother with WebSockets or something like Pusher.
Overall
Building Foodable has been an insightful experience, and the technologies we chose have played a huge role in shaping how the app functions. While some tools had a steeper learning curve, they ultimately contributed to a more efficient and scalable application.