Full-stack JavaScript intern · July–September 2022
StudentBank
From student needs to product diagrams, React interfaces and a Node.js/MongoDB backend.
- My role
- Full-stack JavaScript intern
- Period
- July–September 2022
- Frontend
- React · Chakra UI · Figma
- Backend
- Node.js · MongoDB
A product built around student life
StudentBank was a student-focused product bringing together financial services, housing and international mobility. During my full-stack JavaScript internship, I worked across user interviews, interface design and development, including the API and authentication.
The interesting part for me was following the same need through different layers: what a student wants to do, what the interface should show, and what the system needs to handle behind it.
Start with the people using it
I conducted user interviews and translated requirements into UML diagrams. For housing, the journeys involved more than browsing listings: students needed to apply, share documents and follow their requests, while landlords and administrators needed their own actions and responsibilities.
The surviving use-case diagrams make that separation visible. They describe the intended product behaviour and helped make the scope concrete before implementation.
From user needs to product behaviour
- Listen — Collect needs through user interviews.
- Map — Identify actors, actions and the interactions between them.
- Specify — Use diagrams to make feature behaviour explicit.
Give the product a data model
The same work extended to international mobility: choosing a country, exploring schools and courses, submitting an application and tracking the response. I used modeling to connect these journeys to the information the application would need.
The class diagram brings users, files, institutions, housing, leases and applications into one view. This was the bridge between a set of screens and a product with related records, different actors and actions to support.
Build interfaces from the prototypes
I worked on Figma prototypes and developed React interfaces with Chakra UI. The archived website separates shared navigation and the footer from page content, with routes for the homepage, application, mission, team and contact pages.
The light and dark designs also carried through into the code: Chakra’s colour-mode hooks switch colours, backgrounds and some image assets. The exports below show the design direction; the surviving MobileTest branch captures only part of its implementation.
Adapt the experience to a phone
The mobile design reworks the sequence into a narrow page: compact navigation, a clear introduction, then the individual services. In the source, the navigation has separate desktop and mobile layouts, including a full-screen mobile drawer.
I also worked on separate desktop and mobile layouts for the banking section. The archive preserves that adaptation work in progress rather than a finished record of every screen at every device size.
Connect the interface to the backend
My full-stack work included designing and implementing a REST API in Node.js with MongoDB. I worked on modular code, request and response handling, errors and authentication, so the product work extended beyond what appeared on screen.
Authentication work involved JSON Web Tokens, bcrypt, crypto-js and OAuth 2.0 login integrations. That backend scope comes from my internship account and CV; the public website repository contains the frontend portion of the archive.
The layers of my full-stack work
- Interface — React components and user-facing interactions.
- API — Node.js routes, requests, responses and error handling.
- Data & identity — MongoDB records and authentication flows.
What this experience gave me
This was an early chance to work across the whole path from a conversation about a need to a modeled feature, an interface and its backend. It helped me understand why those parts have to be developed together.
The remaining materials show the breadth of that work: product diagrams, desktop and mobile designs, and React source code. They are the most useful record I have of this three-month internship.
