💡 Inspiration
We realized that for many students, the digital tech space is lonely and intimidating. 📱 We passively scroll through polished LinkedIn success stories or "perfect" GitHub commits, which fuels imposter syndrome.
Even when we try to participate in hackathons to connect, the digital collaboration is stressful—links get lost in Discord, tasks are chaotic, and beginners are too afraid to share their messy progress. We wanted to answer the Connect Online challenge by replacing passive, anxiety-inducing scrolling with an active, playful, and pressure-free community. We built HackPort to bring the joy and genuine human connection back to building online.
🚀 What it does
HackPort is a centralized hub that turns the chaotic hackathon experience into a joyful, collaborative, and pressure-free environment. It bridges the gap between discovering events, finding a team, and actually building the project.
| Feature 🛠️ | How it Replaces "Mindless Scrolling" with Connection 🤝 |
|---|---|
| 🕵️ Anonymous "Small Wins" Feed | A social feed where you post messy code, bugs, or UI ideas anonymously. Removes the fear of judgment and encourages genuine interaction. |
| 🧊 Ice-Breaker Teaming | See an anonymous post you like? Hit "Connect" to reveal identities mutually and form a team. It makes networking feel like a game, not a chore. |
| 🎯 The Discovery Hub | Aggregates hackathons from Devpost, Devfolio, etc., into one beautiful dashboard so you spend less time searching and more time building. |
| 🧘♀️ The Zen Workspace | A Discord-style chat combined with a "Smart Sidebar." All your Canva decks, Google Docs, and Kanban tasks stay pinned to the side of the chat. No more lost links! |
⚙️ How we built it
We started completely from scratch this weekend, focusing on a clean, responsive UI that feels like a mix between Discord and Instagram.
| Technology 🧰 | What we used it for 🎯 |
|---|---|
| ⚛️ Next.js (React) | Core frontend framework and component routing. |
| 🎨 Tailwind CSS | Rapid UI styling, creating our "Hacker Dark Mode" aesthetic with neon accents. |
| ✨ Framer Motion | Adding smooth micro-interactions (like button scales and feed scrolling) to make the app feel alive and joyful. |
| 🟢 Supabase / Firebase | Used to handle real-time chat state and mock data for our anonymous feed. |
| 🖼️ Lucide Icons | Clean, modern iconography for our Smart Sidebar and navigation. |
🧗♂️ Challenges we ran into
- UI Clutter vs. Zen Design: Combining a chat room, a file repository, external links, and a task tracker on a single screen easily becomes overwhelming. It took multiple iterations to design the "Smart Sidebar" that toggles cleanly without overwhelming the user.
- The "Connection" Pivot: Initially, we focused too much on the productivity aspect (Kanban boards and files). During our Saturday Mentor Check-in, our mentor pointed out we were losing the "Connect Online" theme. We had to quickly pivot our architecture to bring the Anonymous Community Feed to the forefront, which was a tough but necessary UI overhaul!
- State Management in Chat: Keeping the chat synchronized while users interact with the task tracker on the side required careful React state management.
🏆 Accomplishments that we're proud of
| What we achieved 🎉 | Why it matters 💡 |
|---|---|
| The "Smart Sidebar" | We successfully merged the casual feel of a Discord chat with the organization of MS Teams. |
| Overcoming Imposter Syndrome (Digitally) | We designed a social feed where people actually want to post their failures and learnings, completely shifting the toxic social media paradigm. |
| Weekend Execution | Taking an idea from zero to a working, beautiful interactive prototype in under 54 hours. |
🧠 What we learned
- Design is Communication: We learned how powerful CSS and layout are. By making the Anonymous Feed look like a mobile app (centered, max-width), it immediately signaled to the user: "This is a social space, not a work space."
- Rapid Prototyping: We leveled up our ability to quickly componentize React elements so we could reuse them across the Dashboard and Workspace.
🔮 What's next for HackPort
We believe HackPort can be the default operating system for student developers! Here is our roadmap:
- 🔌 Live API Integrations: Scraping real-time data from Devpost, Devfolio, and Unstop to populate the Discovery Hub automatically.
- 🤖 AI Team Matchmaker: An AI agent that analyzes your anonymous posts and suggests compatible teammates based on complimentary skill sets (e.g., matching a backend dev who posted a cool API with a frontend dev who posted a Figma mockup).
- 📱 Mobile App: Bringing the Anonymous "Small Wins" feed to iOS and Android so students can connect on the go.
Log in or sign up for Devpost to join the conversation.