DSC HKU – Full-Stack Community Platform

DSC HKU is the official website of the Developer Student Clubs community at Hasan Kalyoncu University.

I designed and developed the platform as a full-stack application serving two different user groups: public visitors exploring events, blog posts, sponsors, and community information, and internal administrators managing content without developer support.

The result is a decoupled platform with a React frontend, a Django REST Framework backend, a PostgreSQL database, and a custom content management experience.

The community needed more than a static promotional website.

Public visitors needed an accessible platform where they could discover events, read announcements, explore blog content, and learn about the organization.

At the same time, the internal team needed a secure way to publish and update content without editing code or depending on a developer for every change.

I developed a headless CMS-style full-stack platform that separates the public user interface from content management and backend services.

Public users can:

• Explore upcoming and past events • Read community announcements and blog posts • View sponsors and supporting organizations • Access frequently asked questions • Learn about the community and its activities

Authorized administrators can:

• Create and update events • Publish and edit blog posts • Manage sponsor information • Upload and replace images • Archive or remove outdated content • Format rich text without writing HTML

The frontend was built as a React single-page application and deployed on Netlify.

It communicates through Axios with a Django REST Framework API deployed on Render.

PostgreSQL is used as the relational database, while Cloudinary manages image upload, storage, and delivery.

The architecture separates presentation, business logic, data storage, and media management, making the application easier to maintain and extend.

The frontend was developed with React and React Router.

Reusable components were created for events, posts, sponsors, navigation, content detail pages, and administrative forms.

Axios manages communication with the backend API.

The interface was designed to work across desktop, tablet, and mobile screen sizes.

The backend was built with Django and Django REST Framework.

The API exposes separate public and administrative operations.

Public endpoints provide read-only access to content such as events, posts, sponsors, and frequently asked questions.

Protected admin endpoints allow authorized users to create, update, archive, and delete content.

PostgreSQL and the Django ORM manage structured relational data and database migrations.

I integrated Quill.js as a rich-text editor for event and blog content.

This allows administrators to create formatted content without writing HTML.

Quill content is processed and stored as sanitized HTML, then rendered safely on the public frontend.

Cloudinary handles image storage and transformation.

Uploaded files are processed through the backend and stored as hosted image URLs rather than local server files.

This keeps the Render backend stateless and makes media delivery more reliable across deployments.

Administrative endpoints are protected with token-based authentication.

Write operations require an authenticated authorization token.

CORS settings restrict production access to approved frontend origins.

Database credentials, Cloudinary configuration, application secrets, and deployment settings are stored as environment variables and are not committed to the codebase.

Rich-text content is sanitized before storage and again before frontend rendering to reduce cross-site scripting risks.

One technical challenge was integrating Quill.js as a controlled React editor.

Because Quill maintains its own internal state, it can become inconsistent with React’s render cycle. I created a controlled integration with synchronized state and debounced updates to keep the editor content reliable.

Another challenge was safely displaying rich-text content. I addressed this by sanitizing the HTML before storage and sanitizing it again before rendering on the frontend.

A further challenge was managing image uploads without relying on the backend filesystem. Cloudinary solved this by providing external media storage and optimized delivery.

I developed the platform independently and was responsible for:

• Product and system planning • Full-stack architecture • React frontend development • Responsive interface development • Django and Django REST Framework implementation • PostgreSQL database design • REST API development • Admin authentication • Rich-text editor integration • Cloudinary media management • HTML sanitization and security controls • Netlify and Render deployment • Testing and debugging

The result is a deployed full-stack community platform that allows visitors to explore dynamic content while enabling authorized administrators to manage the website independently.

This project demonstrates my ability to design, develop, secure, and deploy a complete web application across frontend, backend, database, media storage, and content management layers.