abyiber.com
Back to Work

Brandeis Startup Hub

Go to RepoDemo

TL;DR:   I designed and developed a scalable digital platform that allows students to showcase past projects, submit new work to competitions, and helps event organizers manage entries and winners. Built with Next.js, React, and TypeScript, the platform integrates with Airtable, Contentful, MongoDB, and Amazon S3 to store and serve project data. It features Google authentication for secure login and a Google Calendar component for event tracking. The CMS includes 19 custom-built branded components, enabling diverse page layouts while maintaining consistency. This headless architecture ensures flexibility, seamless data sync, and integration with tools students and organizers already use.

Brandeis Startup Hub thumbnail image

Problem

My client wanted a database of past student projects and a web presence to showcase these projects while also providing a platform for students to submit their work to different events and competitions. The system needed to support multiple event types, allow students to register and submit projects, and facilitate event organizers in managing project entries, showcasing winners, and integrating with tools they already use.

The key challenges included:

  • Data aggregation: Combining data from various sources such as past projects, new submissions, and external content from multiple services.

  • Flexible front-end: The system needed to display diverse types of content while maintaining branding consistency.

  • Seamless authentication: Users should be able to log in securely using existing accounts.

  • Scalability: The platform should handle a growing number of students, projects, and events.

  • Integration with existing tools: Teams already used tools like Google Calendar for event planning and cloud storage for project assets.

Solution

The solution is a headless CMS built with Next.js and a custom API that integrates with multiple data sources:

  • Airtable: For structured data storage, tracking submissions, and managing events.

  • Contentful: For managing project descriptions, media, and other dynamic content.

  • MongoDB: For storing user data, project data, authentication records, and additional metadata.

  • Amazon S3: For handling and serving uploaded files, such as images, videos, and project documents.

  • Google Calendar: Integrated to allow event organizers to sync deadlines and event schedules instantly.

  • Google GCP Authentication: Provides secure, single sign-on (SSO) for students and administrators using their existing Google accounts.

The platform is built with React and TypeScript, ensuring maintainability, scalability, and type safety.

Research and Development

The system is designed to both consume and create data across multiple platforms, enabling a two-way sync where:

Next.js Fetches Data from External Sources

  • Uses server-side rendering (SSR) and incremental static regeneration (ISR) to fetch and cache data efficiently.

  • API requests pull event details, project information, and submission statuses from Airtable and Contentful.

  • MongoDB is used for project metadata, authentication and user records, ensuring secure storage of user-generated content.

  • S3 stores and serves images/videos dynamically based on project entries.

Users Submit Data through the CMS

  • Students upload their project files, descriptions, and event applications.

  • A backend service processes submissions and pushes data to the correct sources (e.g., project metadata to Mongo db, media files to S3).

  • Admins can manage events, update project details, and configure rules for event participation in Contentful.

Authentication and User Management

  • Google GCP authentication enables quick access, ensuring security while allowing students to log in without separate credentials.

  • User profiles and submissions are stored in MongoDB, linking students to their projects.

Dynamic Frontend with Custom Components

  • The platform features 19 custom-branded components, allowing huge variation in page design while keeping branding consistent.

  • Each component serves a different purpose: showcasing student projects, displaying event details, embedding Google Calendar events, etc.

  • These components fetch and display data dynamically, ensuring that the CMS remains flexible and can be adapted for different use cases.

Google Calendar Integration

  • A dedicated calendar component pulls event dates from Google Calendar, allowing students to track submission deadlines, event schedules, and prize announcements.

  • Organizers can update event details in Google Calendar, which is reflected on the CMS dynamically.

Conclusion

This system provides a seamless way for students to submit and showcase projects while ensuring event organizers have the tools to manage submissions and integrate with existing workflows. The headless CMS architecture, combined with Next.js, React, and TypeScript, allows for a highly scalable, customizable, and future-proof solution. By integrating with Google authentication, Airtable, Contentful, MongoDB, Amazon S3, and Google Calendar, the system effectively bridges multiple platforms into a single cohesive experience.

Final Product

Home Page

Student Project Page

Projects Admin UI

Grant Page for Student Submissions

Google Analytics User Data

Google Analytics User Data