DEV Community: Faareh Ahemed

Why Your Portfolio is a "Living Artifact"

Faareh Ahemed — Tue, 06 Jan 2026 17:56:44 +0000

Let’s be honest:
Most developer portfolios are digital graveyards. We build them in a weekend, push them to Vercel, and then let them gather virtual dust until the next job hunt. It recently hit a point where my old site felt like it belonged to a different version of me.
As a student at NUST SEECS balancing deep 5G research with full-stack engineering, I realized I didn't just need a list of links, I needed a living artifact that showed how I think, not just what I've coded.
Here is the journey of rebuilding my Portfolio and why I shifted my focus from "look at me" to "let’s build together."

The Death of the Project List:

The biggest mistake I made in previous iterations was treating my portfolio like a laundry list. Modern engineering is about impact-driven storytelling. When I built CreatiFlow, an AI-powered image SaaS, the goal wasn't just to use a cool API. I wanted to see if I could handle the "boring" but essential parts: credit-based systems, secure image ingestion pipelines, and persistent state management

In the 2026, recruiters are looking for this "Production Engineering" mindset—moving beyond _vibe coding*_* and into building maintainable systems.

Bridging the Gap:

The Researcher-Engineer, One of the hardest things to communicate in a portfolio is the intersection of different worlds. My days are spent between Web Engineering: Building real-time apps, AI Research: Optimizing algorithms for vehicular network communication. For a long time, I kept these separate. My new portfolio treats research not as a credential, but as evidence of high-level algorithmic thinking that I bring to every line of JavaScript.

I'm curious to hear from this community: What is the one tiny detail in your portfolio that you’re most proud of (a specific micro-interaction, a clean API route, or an academic achievement)? How are you balancing vibe coding with production-grade engineering? Do you think the rise of AI agents is changing what a senior portfolio looks like? For those in both research and dev: How do you showcase your papers without making your site look like a 1990s university directory? I’d love for you to check out the new site and tear it apart (constructively!). Let's connect:

I’m always looking to collaborate on Web/AI projects.
Happy coding!

CreatiFlow: My Journey Building an AI-Powered Image Editing SaaS with Next.js 14, Cloudinary, and Stripe

Faareh Ahemed — Thu, 19 Jun 2025 20:44:41 +0000

Hey Dev Community!

In the last few years, the world of software has been rocked by two massive trends: the unstoppable rise of AI and the dominance of the SaaS (Software-as-a-Service) model. AI is no longer a futuristic concept; it's a practical tool that's democratizing complex skills. At the same time, SaaS has changed how we access software, making powerful applications available to anyone with a browser.

As a developer, I've been fascinated by the intersection of these two worlds. I wanted to build something that wasn't just a cool tech demo but a genuinely useful product that leverages AI to solve a real-world problem. That's why I'm thrilled to introduce my latest project: CreatiFlow.

What is CreatiFlow?

CreatiFlow is a fully-featured, AI-powered image editing application built as a SaaS platform. Think of it as a magic wand for your photos. It takes complex editing tasks that would typically require expensive software and years of experience like removing objects, filling in missing parts of an image, or enhancing old photos and makes them accessible with a single click.

The goal was to create an intuitive, powerful, and seamless experience for everyone, from content creators to developers who just need a quick edit for their project.

Key Features

CreatiFlow offers several AI-powered image transformation capabilities:

Generative Fill: Add, remove, or expand content seamlessly
Object Removal: Clean up photos by removing unwanted objects
Image Restoration: Repair and enhance old or damaged photos
Background Removal: Extract subjects from their backgrounds
Recoloring: Change colors in images while maintaining realism

Each transformation feature uses credits, which users can purchase through the application's payment system.

Technology Stack:

System Architecture:

CreatiFlow follows a modern Next.js-based architecture with server-side rendering and server actions for data manipulation. The system integrates several external services and maintains a clear separation of concerns across its components.

Key System Components

CreatiFlow consists of the following major system components that work together to provide the application's functionality

Front End Structure:

CreatiFlow's frontend is built using Next.js with its App Router architecture. The application follows a component-based approach with hierarchical routing and layout systems. The codebase uses modern React practices including client and server components, route groups, and layout composition.

Routing Organization:

Database Structure:

CreatiFlow uses MongoDB as its database with Mongoose ODM for object modeling. The application has three primary data models that form the backbone of its data layer.

Image Transformation Workflow:

The transformation workflow represents the core functionality of CreatiFlow, allowing users to apply various AI-powered transformations to their images. The workflow encompasses several key steps:

Image upload
Transformation configuration
Transformation preview
Saving transformed images
Viewing transformation details

Conclusion:

Building CreatiFlow has been an incredible learning experience. It was a deep dive into building a full-stack, production-ready SaaS application that integrates multiple third-party services to deliver a cohesive and powerful user experience. It reinforced the power of modern web development frameworks like Next.js and the incredible potential of AI APIs like Cloudinary.

I'm incredibly proud of how it turned out and excited for its potential.
I’d love for you to give it a try and let me know what you think! All feedback is welcome.

Let's Connect:

Try CreatiFlow: https://creatiflow.vercel.app/
GitHub: https://github.com/Faareh-Ahmed/CreatiFlow
LinkedIn: https://www.linkedin.com/in/faareh-ahmed

Thanks for reading! Happy coding! ✨

Zoom-Clone using NextJS-14, Clerk, TailwindCSS, StreamSDK

Faareh Ahemed — Wed, 01 May 2024 16:55:39 +0000

Importance of Video Conferencing Applications:

In an era marked by remote work and virtual communication, the significance of video conferencing applications cannot be overstated. Especially in the wake of the global pandemic, these platforms have become essential tools for businesses, educational institutions, and individuals alike. Facilitating real-time communication, collaboration, and connection across distances, they bridge the gap between physical and digital interactions.

Development Tools:

For the development of my Zoom clone application, I leveraged a stack comprising Next.js, a popular React framework, provided a solid foundation for building a dynamic and responsive user interface. Clerk, with its authentication and user management features, ensured secure access to our application. TailwindCSS, streamlined the styling process with its utility-first approach, Shadcn for utilizing built-in components, while StreamSDK empowered us to integrate video streaming capabilities seamlessly.

NextJS Project Structure:

This is the basic Folder Structure of our Application utilizing the NextJS App Router.

.env.local includes the Environment variables.
components folder contains the UI reusable components and also contains the components from Shadcn.
actions folder that ensures secure communication between my application and the Stream service. For Example: generating authentication tokens for interacting with the Stream service.
constants folder to store the constants used throughout the application, centralizing configuration values and avoiding hard-coded literals.
hooks folder to store the custom React Hooks.
public folder that contains the images and icons used in my application.

Project Functionalities:

Creating a New Meeting

Users can Start a New meeting by simply clicking on the Start Meeting button. I have used the shadcn dialog component.
Here is a Summary of this feature:

Generate Call ID:
It generates a random (id) to serve as the unique identifier for the call.
Create Call Object:
Using the Stream client, it creates a new call object with the generated ID.
Handle Call Creation:
If the call object is successfully created, the function proceeds to set the starting time of the meeting.
Update Call Details and Redirect:
Upon successful creation of the call, the function updates the state with the newly created call object. It redirects the user to the meeting page using Next.js router.
Display Feedback:
Finally, the function displays a toast notification, indicating that the meeting has been successfully created.

Scheduling a Meeting

The application allows users to schedule future meetings by adding the description of the Meeting and the Scheduled Time.
Here is a Summary of this feature:

Preparation
Check if a user is logged in and if the Stream client is available
then generate a random id to serve as the unique identifier for the call.
Call Creation
Utilizes the Stream client to create a new call object with the generated ID.
Handling Call Creation
If the call object is successfully created, it proceeds to set the starting time of the meeting and sets the meeting description based on user input.
Display Feedback
If the meeting is successfully scheduled, it displays a toast notification indicating that the meeting has been created.

Joining Meeting

The user is asked to enter the Meeting Link they want to join, and upon entering the meeting link they are directed to the meeting Room through NextJS router.

View Recordings

Users can keep track of their Recorded Meetings and view the recorded Meeting anytime.
Here is a Summary of this feature:

Data Retrieval
The application utilizes the custom hook to fetch call data and filter call recordings to extract relevant information for display.
User Interface
Renders meeting cards for each recorded meeting, providing details such as meeting ID, start date/time, and options to play or start the meeting.

Conclusion:

Developing a Zoom clone using Next.js, Clerk, TailwindCSS, and StreamSDK has been an enriching experience. Through this project, I've delved into the realm of video conferencing applications, understanding their importance in today's digitally connected world. From scheduling meetings to joining them seamlessly, every functionality has been meticulously crafted to ensure a smooth user experience.

With the powerful combination of Next.js for robust frontend development, Clerk for secure authentication, TailwindCSS for efficient styling, and StreamSDK for seamless video streaming, this application stands as a testament to the capabilities of modern web development tools and frameworks.

GitHub repository: github.com/Faareh-Ahmed/Zoom-Clone

Connect with Me:

If you found this project insightful or have any questions, feel free to connect with me on social media:

LinkedIn: linkedin.com/in/faareh-ahmed
GitHub: github.com/Faareh-Ahmed

I'm always open to feedback and collaboration. Let's connect and continue the conversation!