Italo da Silva

Skill-Swap: Admin Panel

Software Design & Architecture • 2025

Profile Picture

This project is a web platform that allow users to exchange skills with each other, making expertise accessible without financial transactions. For instance, a guitar player could trade lessons with a computer science teacher.

My Role: In this project I was responsible for developing the Admin Panel of the application for the admins, using a Layered N-Tier Architecture. I built functionalities to manage user roles and statuses, and enabling edits or removals. I developed the front-end and a simple back-end for these features.

TechStack & Tools
  • React + Typescript + Vite framework
  • MUI materials for the components
  • Redux for state management and routing logic
  • SonarQube pipeline for code quality and security checks
  • Firestore database for storing data

Method

  1. 1Requirements
  2. 2Design
  3. 3Prototype
  4. 4Evaluation
  5. 5Documentation

Requirements

The requirements phase was where we captured the functional and non-functional needs from the stakeholders of the application, which those include regular users and administrators.

These requirements emphasized modularity, real-time updates, and secure access control for administrators.

The key features/functionalities include:
  • View list of all users
  • Edit user profiles
  • Ban or delete users
  • Access user information and filter by status or role

Design

In my module of the application, the admin panel, I chose the Layered N-Tier Architecture to design a three-layer architecture containing the following tools:

The diagram below shows how React components, state management (Redux), and Firestore are layered, ensuring a clean separation of concerns and scalability.

Profile Picture

Prototype

The front-end prototype is fully functional, hosted on GitHub Pages, and it showcases the following:

Technologies like Material UI and Redux were used for the state management and UI consistency. The backend prototype includes a simple implementation to Firestore database that is hooked to the redux.

Evaluation

Assessed using the Architecture Tradeoff Analysis Method (ATAM) focusing on the following attributes:

Tools used: PageSpeed Insights and SonarQube.

Report

Skill-Swap is a collaborative effort that explores multiple architectural styles across different modules. My Admin Panel uses a Layered N-Tier approach for better maintainability and secure real-time updates. The project demonstrates effective architectural planning to build a scalable and modular application ready for deployment in real-world scenarios.

Let's Connect

I'd love to hear from you.