Forem: Awowole Hammad Olamilekan

New Year New You Google Challenge

Awowole Hammad Olamilekan — Tue, 03 Feb 2026 05:52:37 +0000

My AI Portfolio is LIVE on Vercel… because Google Cloud Run defeated me (this time).

I spent the whole of last week pushing my limits while participating in the Google AI “New Year, New You” Portfolio Challenge. My goal was to transform a simple, static React portfolio into a full-stack application with a smart AI Terminal Assistant.

I wanted to build something that could track real-time location, solve complex math problems using LaTeX, and even change the website’s theme on command.

The challenge required deploying the project to Google Cloud Run.

Here’s the reality, the app was built, the code worked, and the AI was responsive, but I missed the submission deadline.

So what happened?

It wasn’t a coding issue. It was a deployment bottleneck.
My portfolio combines a React frontend with a custom Node.js backend. While this worked seamlessly on localhost, deploying this hybrid architecture to Google Cloud Run was a completely different challenge.

Unlike Vercel, which auto-detects the build process, Cloud Run requires a carefully configured containerized environment. I spent the final 48 hours wrestling with Docker builds, port mappings, and infrastructure issues instead of polishing the product. I simply ran out of runway.
Instead of letting the project die in a folder, I made a decision: get it live, no matter what.

I pivoted to Vercel, and within minutes the project was online and fully functional. It didn’t meet the hackathon’s hosting requirements, but it worked for users, and that mattered more to me.

I may have missed the challenge, but I walked away with a fully functional, live AI portfolio and some hard-earned DevOps lessons.

Link to GitHub Repo: https://github.com/lexycon002/web_portfolio/tree/main

Demo: https://hammad-mu.vercel.app/

WebDevelopment #ReactJS #NextJS #GoogleCloud #DevOps #BuildInPublic #SoftwareEngineering #Portfolio #DevCommunity #FullStackDeveloper

Next.js; A Game Changer

Awowole Hammad Olamilekan — Fri, 24 Oct 2025 09:46:47 +0000

🚀 “I finally understand why developers call Next.js a game changer.”

I’ve been diving deep into Next.js, and it’s been an incredible experience exploring how this React framework blends frontend and backend logic seamlessly.
One thing that really stood out to me is Next.js’s two-component architecture :

Server Components and Client Components.

💡 Server Components

By default, every component in Next.js runs on the server. They can handle backend operations like reading files, fetching data directly from a database, or pre-rendering content. However, they can’t use React hooks or handle user interactions.

⚡ Client Components

When you add "use client" at the top of a file, that component runs in the browser. It can use React hooks, manage state, and respond to user interactions like clicks, inputs, and form submissions.
I’m currently building an electronic store project with Next.js, experimenting with Teemu, Scapple, and Apify to generate and connect APIs that map product data to JSON files.

I’m still working on user authentication, add-to-cart, and remove-from-cart features but seeing the app evolve with each new feature has been incredibly fascinating.

Next.js truly feels like the future of modern web development, fast, scalable, and developer-friendly.

Nextjs #React #WebDevelopment #Frontend #LearningInPublic #CodingJourney

React Mail Authentication

Awowole Hammad Olamilekan — Fri, 18 Aug 2023 08:51:05 +0000

React stands out as an elegant JavaScript library, boasting an extensive collection of modules and packages that enhance its capabilities. In the specific scenario portrayed by this image, React is leveraged to implement a functional email service authentication, wherein Firebase serves as the robust backend support.

Within this implementation, the strategic use of the 'useState' hook shines through. This hook facilitates the dynamic management of email statuses, allowing for seamless updates and interaction with the evolving state of the application. By employing 'useState', a dynamic value is ingeniously assigned to the email, augmenting the user experience.

A pivotal aspect of this authentication process lies in the depiction of login outcomes. Here, the astute utilization of 'react-toastify' emerges. This efficient tool elegantly communicates the success or failure of login attempts, creating a user-friendly environment through its intuitive and unobtrusive notifications.

In summary, React's finesse as a JavaScript library is exemplified by its diverse assortment of modules and packages. The image underscores its prowess by showcasing a functional email service authentication intricately linked with Firebase. The judicious application of the 'useState' hook and the artful integration of 'react-toastify' collectively produce a seamless, responsive, and informative authentication experience.

Some widely use React modules

Awowole Hammad Olamilekan — Sun, 30 Jul 2023 07:35:47 +0000

Here are list of 20 widely used and popular React modules along with instructions on how to install each of them using npm:

React: The core library for building React applications.
Installation: npm install react
react-dom: Provides methods for working with the DOM in React applications.
Installation: npm install react-dom
react-router-dom: A library for handling routing in React applications.
Installation: npm install react-router-dom
axios: A popular HTTP client for making API requests in React.
Installation: npm install axios
redux: A state management library for React applications.
Installation: npm install redux
react-redux: Official bindings for using Redux with React.
Installation: npm install react-redux
redux-thunk: A middleware for handling asynchronous actions in Redux.
Installation: npm install redux-thunk
prop-types: A library for defining and validating prop types in React components.
Installation: npm install prop-types
moment: A library for working with dates and times in React applications.
Installation: npm install moment
react-icons: Provides a collection of popular icons as React components.
Installation: npm install react-icons
react-modal: A flexible and accessible modal dialog component for React.
Installation: npm install react-modal
react-toastify: A library for displaying toast notifications in React applications.
Installation: npm install react-toastify
react-datepicker: A date picker component for React applications.
Installation: npm install react-datepicker
react-slick: A carousel/slider component for React.
Installation: npm install react-slick
react-dnd: A library for implementing drag and drop functionality in React.
Installation: npm install react-dnd
styled-components: A popular library for styling React components using tagged template literals.
Installation: npm install styled-components
formik: A library for building forms in React with easy form validation.
Installation: npm install formik
yup: A validation library used in conjunction with Formik for form validation.
Installation: npm install yup
react-helmet: A library for managing the document head in React applications.
Installation: npm install react-helmet
react-testing-library: A utility library for testing React components in a user-centric way.
Installation: npm install react-testing-library