Phase 5: CampusNest

Introduction

For the Phase 5 project of my Flatiron Software Engineering Bootcamp, I developed CampusNest, a platform designed to centralize student sublets and nearby campus housing into an accessible database. Finding student housing can be a hassle—whether it’s subletting a dorm room or locating off-campus accommodations, students often struggle with scattered information and unreliable listings. CampusNest was my attempt to streamline this process, providing a seamless way for students to browse, list, and find housing.

The inspiration came from a friend’s thesis project at Yale, which focused on creating an open dormitory database. I wanted to take that concept further by enabling students to browse, list, and find housing seamlessly, all while implementing the technical requirements of my Phase 5 project.

Tech Stack

CampusNest was built using Flask and SQLAlchemy on the backend, with a React frontend powered by React Router. While Flask served its purpose, I personally prefer a React/Node stack due to its better documentation and smoother workflow—constantly switching between Python and JavaScript felt inefficient.

Backend:

• Flask & SQLAlchemy for data handling and ORM
• Google Places API for location search
• Haversine formula to calculate the closest properties
• RESTful API structure with full CRUD on the bookings and properties models, utilizing Marshmallow for serialization.

Validations & error handling to prevent data inconsistencies

Frontend:

• React Router for client-side navigation
• Lazy loading with Suspense to optimize performance
• useContext for state management
• Google Maps integration for enhanced search functionality

Implementing Key Features

1. React Router Setup

The application follows a structured routing system, allowing users to navigate between authentication pages, property listings, and profile dashboards. I utilized useRoutes for cleaner route management, implementing layouts like MainLayout, AuthLayout, and ProfileLayout.

Here’s a snippet of the routing setup:

export default function Router() {
    return useRoutes([
        {
            path: "/auth",
            element: <AuthLayout />,
            children: [
                { path: "login", element: <LoginPage /> },
                { path: "register", element: <SignupPage /> },
            ],
        },
        {
            path: "/",
            element: <MainLayout />,
            children: [
                { path: "", element: <HomePage /> },
                { path: "properties/:id", element: <PropertyPage /> }
            ],
        },
        {
            path: "/",
            element: <ProfileLayout />,
            children: [
                { path: "hosts/:id", element: <HostPage/>},
                { path: "profile", element: <ProfilePage /> },
                { path: "host-home", element: <HostHomePage /> },
                { path: "bookings/:id", element: <BookingPage />},
            ],
        },
    ]);
}

1. Search & Location-Based Filtering

One of the biggest challenges was implementing a search feature that finds properties closest to a given location. I solved this by integrating the Google Places API for search and using the Haversine formula to calculate distances between properties.

1. CRUD Operations & Many-to-Many Relationships

CampusNest includes at least four models with a many-to-many relationship. Users can list properties, book sublets, and manage their listings through full CRUD functionality, ensuring proper validation and error handling.

1. New Feature: Google Maps & Search Optimization

As required, I implemented something new beyond the curriculum. Instead of using the default SerializerMixin taught in class, I opted for Marshmallow for serialization, which provided far more powerful and flexible data handling. Additionally, I integrated the Google Maps API to allow users to visualize listings dynamically and optimized search queries for better performance.

Challenges & Lessons Learned

• Data Type Errors: I lost a few days debugging an issue where property ids were strings instead of integers. It reinforced the importance of data consistency.
• Search Optimization: Implementing geolocation-based filtering took time, but learning about the Haversine formula was valuable.
• Flask vs. Node: While Flask worked, I still believe React/Node is a more efficient pairing due to seamless full-stack JavaScript development.

Future Improvements

If I had more time, I’d add:

• Payments integration for direct transactions.
• School verification to ensure only students can list/book properties.
• Interactive maps & better filtering for an improved user experience.
• Scalability improvements to support more listings and high-traffic loads.

Final Thoughts

CampusNest was a challenging but rewarding project that combined backend logic with frontend usability. Despite my preference for React/Node, working with Flask/SQLAlchemy pushed me to improve my adaptability.

For anyone tackling Phase 5, my advice is:

• Plan your database schema early to avoid refactoring issues.
• Test API endpoints thoroughly before moving to frontend integration.
• Don’t underestimate debugging—small mistakes (like string vs. int IDs) can cost days.

Overall, CampusNest was a step toward simplifying student housing searches. With future improvements, it could become a fully functional marketplace for students looking to sublet or rent rooms near campus.