DevSphere - Personal Portfolio

A living portfolio that evolves with every project - where creativity meets clean code

Comment

Inspiration

We built DevSphere to create a single, polished hub for experiments and finished projects. The idea came from participating in hackathons and wanting a central place to link live demos, source code, and concise write-ups. We also wanted a space to learn integrations between modern stacks (Next.js, Streamlit, AI APIs) and to showcase small, focused demos alongside a professional portfolio.

What it does

  • Presents featured projects with one-line summaries, repo links, and live demo URLs.
  • Hosts an AI-powered chat endpoint (/api/chat) that summarizes projects and responds to visitor queries using OpenAI models via the ai package.
  • Links to small demo apps (Streamlit) such as StegoScan (steganography detection) and an ipynb-to-pdf converter.
  • Provides a responsive, animated UI built with Next.js + TypeScript + Tailwind and Framer Motion.

How we built it

  • Frontend: Next.js 13 (App Router) + TypeScript, Tailwind CSS, and Framer Motion for animations. Components are under components/ and pages under app/.
  • API: A server-side route app/api/chat/route.ts wraps the ai package and forwards chat messages to OpenAI. Environment variables are used for API keys.
  • Demos: Streamlit apps are small, independent services linked from the portfolio cards and hosted separately to keep the main site lightweight.
    • Demos: Streamlit apps are small, independent services deployed separately (for example, on Streamlit Cloud). The portfolio links point to those external live deployments — we do not host these demo apps inside the Next.js site itself.
    • Deployment: We recommend deploying the frontend to Vercel and Streamlit demos to Streamlit Cloud or another simple host.

High-level data flow:

  1. Browser requests Next.js pages (SSR/SSG) and receives rendered content.
  2. Visitor message -> frontend posts to /api/chat.
  3. API calls OpenAI (via ai), receives response, and returns it to the frontend.

Challenges we ran into

  • API contract differences: The ai package expects maxOutputTokens (not maxTokens) which caused TypeScript errors until corrected.
  • Hosting decisions: Managing multiple small Streamlit deployments while keeping the main site performant required separate hosting and stable links.
  • Content scoping: Distilling projects into concise, consistent one-line descriptions took several iterations to make them scannable for judges.

Accomplishments that we're proud of

  • A coherent portfolio that doubles as a developer playground and demo hub.
  • Integration of a server-side AI chat endpoint that safely forwards messages to OpenAI and returns responses to users.
  • Several small live demos (StegoScan, ipynb-to-pdf) linked directly from the site for rapid evaluation.

What we learned

  • Practical, end-to-end integration: connecting a modern React frontend to small Python microservices and third-party AI APIs is straightforward but requires careful interface design.
  • Type safety is invaluable: TypeScript and type definitions for third-party packages quickly revealed incorrect option names and prevented runtime surprises.
  • UX for demos: short summaries and direct live links help reviewers evaluate projects faster during hackathons.

What's next for DevSphere - Personal Portfolio

  • Add automated tests for the /api/chat endpoint and a simple end-to-end test.
  • Add screenshot thumbnails and short GIFs for each featured project to improve the submission package.
  • Expand StackQuest gamification with a richer XP and achievement model and surface analytics on the project page.
  • Optionally generate a one-page PDF submission brief from this document for hackathon submission.

Built With

Share this project:

Updates