Onyx CC

Onyx Craftwork Collective

A Full Stack Talent Platform for the Creative Industry

Project Overview
Onyx Craftwork Collective is a fictional digital agency designed to bring together creative professionals and showcase their work. I developed this project during the fourth semester of my Bachelor’s program in Web Design & Development at the SAE Institute Hamburg. The idea was to simulate a real-world application where digital media talents could be discovered and hired through a curated platform.

Purpose and Concept
The platform was built with the goal of offering two key experiences:

• For general visitors, a clean and engaging interface to browse available talents and view their creative projects.
• For registered users, a content management interface allowing them to add, update, or remove entries — essentially acting as platform administrators.

Core Features

• Display of all talents and their associated projects in card-based layouts.
• Dynamic routing and detail pages for both talents and projects.
• Filtering functionality by category (e.g. design, audio, video).
• Authenticated users can create, edit, and delete entries directly from the interface.
• Admin logic protected behind login and role-based access.
• Fully responsive design tailored for different screen sizes.

Tech Stack & Architecture

• Laravel 11 served as the backend framework, providing robust routing, authentication, and API endpoints.
• React (with TypeScript) was used for the frontend, creating a fast and modular user interface.
• Tailwind CSS was the foundation for styling, allowing for rapid layout prototyping and consistent design.
• The entire application runs inside a Docker container using Laravel Sail, ensuring a reproducible and environment-agnostic setup.

Design Approach
I aimed for a minimalistic, modular layout that keeps the focus on the showcased talents and their work. Using Tailwind CSS gave me a lot of control over responsiveness and design consistency without bloating the codebase. The design inspiration came from modern SaaS and agency websites — clean, functional, and content-first.

Challenges and Learnings
One of the most valuable parts of this project was integrating a Laravel backend with a React frontend in a full stack environment. Managing authentication and authorization while keeping the UI responsive and intuitive pushed me to better understand API design, state management, and secure data handling.

Working with Docker also helped me improve my understanding of containerization and environment configuration — something that I hadn’t fully grasped before this project.

Reflection
This project was a major step forward in my development journey. It helped me connect many areas of knowledge — from frontend design and interactivity to backend logic and infrastructure setup. It also showed me how important it is to balance technical complexity with user experience.