Rising mental health awareness in Indonesia that accelerated by the COVID-19 pandemic revealed a gap, most existing news portals were either toxic, sensationalist, or not focused on mental health at all. The challenge was building a dedicated, safe news portal targeted at students aged 17–25 that presented mental health content in a balanced, non-triggering, and comfortable way.
From a technical standpoint, the team had to design and build a full-stack web application complete with authentication, article management, saved bookmarks, comment sections, and category filtering within a tight bootcamp timeline, collaborating across UI/UX, frontend, and backend roles.
As a Full-Stack Developer but Frontend-heavy, I bridged the gap between the Express.js server logic and the interactive, styled UI responsible for both client-side experience and authentication flow.
Backend & Server-Side Templating
- Built routing and dynamic page rendering using Node.js/Express and EJS templating
- Structured views with modular partials (head.ejs, header.ejs, footer.ejs) to keep the codebase DRY across Home, Details, Search, and Category pages
Frontend Development & Styling
- Built responsive layouts using Bootstrap 5.1 and FontAwesome icons
- Wrote custom CSS including gradients, form inputs, box-shadows, and background layouts for login and registration flows
- Updating logos, page titles, and meta tags across all partials
Authentication & Client-Side Logic
- Wrote client-side authentication scripts (user.login.js, user.register.js, user.logout.js) using jQuery AJAX
- Integrated with backend /login and /register endpoints via POST requests
- Implemented token-based session management — storing the auth token in localStorage on login and clearing it on logout
Interactive & Multimedia Features
- Implemented hidden looping <audio> tags on category pages (Mental Issues, Gaya Hidup, Kasus) linked to Google Drive audio files
- Built custom mute/unmute toggle buttons for background music across these pages
Tech Stack: Node.js, Express.js, EJS, PostgreSQL, Sequelize, JavaScript, jQuery, Bootstrap 5.1, CSS, HTML, Heroku
Successfully delivered the mental health news portal as a cross-functional bootcamp team project. The app supported user registration, login with token-based session management, categorized article browsing, article saving (bookmarks), and a comment section. Usability testing with 11 users yielded a SUS score of 74.31, rated "Good" validating that the design was intuitive and accessible for the target demographic. The project concluded with a redesign phase incorporating direct user feedback, resulting in improved UI clarity and a more polished final product.