Full Stack Web Development (MERN)

I had personally seen a close friend struggle when applying for his master’s degree. The information he needed was scattered across different websites, with no clear guidance or structured approach. There was no single place that covered everything—from university applications to student life and even tax filing for international students. Seeing this gap, I thought, why not create a platform that consolidates all aspects of the master’s journey into one place? During my internship at AIrobotica, where I was immersed in the world of full-stack web development, I was given the opportunity to work on a project that would showcase the skills I had learned—both front-end and back-end. Instead of just building any complex website, I decided to work on an idea that had been on my mind for a while.

Skip to Design Details

Project Implementation Overview

Click the arrow mark to watch the video in full screen

As seen in the project video, the core idea behind Master Genie was to provide a structured blogging and community-based platform covering every key aspect of the master's experience. The platform featured dedicated sections for: University & Program Selection Admissions & Application Process Visa & Immigration Financial Aid & Scholarships Housing & Accommodation Student Life & Community Tax Filing Internships Each of these categories allowed users to browse, search, and navigate through a wealth of information tailored to their specific concerns.

Beyond just an information repository, I wanted to make Master Genie interactive and community-driven. Inspired by platforms like Reddit, I integrated a discussion forum where users could post questions, share experiences, and get insights from actual master’s students and alumni. This allowed: Students with unique challenges to connect with others who had faced similar issues. Real-time discussions about visa complications, university culture, housing struggles, and even small but critical topics like managing finances abroad. A support system for students who needed guidance beyond what blogs and official university websites could provide. This community-driven approach ensured that Master Genie was not just a static knowledge base but a dynamic and evolving resource.

To bring Master Genie to life, I utilized a robust full-stack architecture: Next.js for a fast, responsive front-end experience, ensuring smooth page transitions and optimized performance. Node.js & Express.js for handling backend logic, API requests, and authentication. MongoDB as the database, enabling efficient storage and retrieval of blogs, user discussions, and profile data. Heroku for deployment, ensuring the website was accessible and scalable. This combination allowed the platform to handle both structured content (blogs, guides) and unstructured discussions (community forums), all in one place. Master Genie wasn’t just another internship project for me—it was something deeply personal. I always wanted to create a platform like this, knowing how valuable it could be for aspiring master’s students. Although it started as a showcase of my technical skills, it evolved into a passion project—one that I hope to revive and scale further in the future when the right opportunity arises. Scroll down to explore more about the design details and the technical implementation of Master Genie.

User Research & Pain Points

Many students struggle with scattered and unreliable resources when planning their master's education in the U.S. Research showed that unclear application processes, visa complexities, and financial aid confusion were major challenges. Students often rely on outdated or unverified forums, leading to misinformation. Master Genie solves this by offering a structured, trustworthy, and user-driven platform to address these gaps.

UX Architecture & Information Flow

The platform follows a step-by-step content structure covering essential topics like admissions, funding, housing, and career opportunities. Users can navigate through categorized blogs, community discussions, and expert Q&A sessions. A streamlined search and filter system ensures quick access to relevant content. This approach makes it easier for students to find authentic, structured guidance at every stage.

High-Fidelity Wireframes & Visual Design

The design process started with wireframing key user flows to ensure a seamless experience. A clean and intuitive UI was developed with soft color palettes, clear typography, and easy navigation. Visual elements were optimized for readability and accessibility across devices. The final design focuses on clarity, usability, and engagement to enhance the overall user experience.

Prototyping & Testing

Multiple rounds of prototyping and user testing helped refine the platform’s usability. Feedback-driven iterations improved navigation, searchability, and interactive features. Testing revealed key insights that led to enhanced content categorization, intuitive layouts, and better community engagement. The final version ensures a smooth, efficient, and student-focused user journey.