John Uel Mangaba

When I first started learning web development, React was my entry point. I followed tutorials from JSM, The Net Ninja Pro, and Fireship on YouTube. Back then, I was piecing together a MERN setup, trying to combine MongoDB, Express, React, and Node.js to create a complete application. It felt like solving a puzzle one piece at a time.

Then I discovered Next.js (version 12 at the time), and everything clicked. Next.js felt like a full stack framework out of the box. It took away a lot of the glue code I was writing myself and handled routing, server-side rendering, and API routes with minimal configuration. From that moment on, I focused almost exclusively on Next.js alongside a handful of other tools that round out my daily workflow.

Front-End: Next.js and Tailwind CSS

Next.js (v12 and up)
Next.js is where I spend most of my time. It manages routing, code splitting, and server-side rendering. I love how easy it is to create API routes in the same project, which saves me from spinning up a separate backend just to handle AJAX calls.
Tailwind CSS
Whenever I need to style a page quickly, Tailwind CSS is my go-to. Its utility-first approach makes prototyping fast and keeps me from writing custom CSS for most layouts. Pairing Tailwind with Next.js feels seamless.
React Icons
Instead of hunting down SVG files or installing multiple icon libraries, React Icons lets me import exactly what I need (Font Awesome, Material Icons, and more) with one package. It saves bundle size and keeps things tidy.

Back-End and Database

MongoDB
I experimented with Firebase early on, but I found MongoDB to be more intuitive for CRUD operations. The document-based model matches the data structures I design in Next.js, and integrating with Mongoose (or using the native driver) is straightforward.
JWT (JSON Web Tokens)
When I need to add authentication, I generate a JWT upon user login. Storing it in an HttpOnly cookie or localStorage (depending on the project) helps protect routes on the server side. Next.js API routes make verifying tokens simple.
Web Sockets
For projects that need live updates, like chat applications or real-time dashboards—I use Web Sockets. I typically set up a separate Node.js server with Socket.IO or a WebSocket API route in Next.js. It keeps users in sync without constant polling.
Heroku (Live Hooks)
Before I moved everything to Vercel, I relied on Heroku for hosting back-end services or webhooks. Deploying an Express or Next.js server to Heroku is still a quick way to spin up a temporary endpoint or integrate with third-party services.

Deployment and Hosting

Vercel
Once I focused on Next.js, Vercel became my primary choice. Connecting a GitHub repository takes just a few clicks. Automatic deployments on every push make continuous integration effortless. Adding a custom domain is as simple as copying DNS records and pasting them into my DNS provider.
GitHub
I keep all my code in public or private GitHub repositories. Branching, pull requests, and GitHub Actions (for simple CI checks) help me stay organized and collaborate when necessary.

Tools and Utilities

Visual Studio Code
My daily editor. With extensions like ESLint, Prettier, Tailwind CSS IntelliSense, and GitLens, I have linting, formatting, and git insights all in one place.
Postman or Insomnia
Whenever I am testing API routes or checking webhooks, I rely on Postman or Insomnia to send requests, inspect responses, and debug headers.
Chrome Developer Tools
Inspecting elements, profiling performance, and debugging network requests—all in one powerful suite. I use it every day.

What’s Next? TypeScript

I still haven’t fully learned TypeScript, but I know it’s the next big step for me. Adding static types will reduce bugs and improve developer experience in larger projects. I plan to migrate my personal portfolio and a few sample apps to TypeScript in the coming weeks.