SyntaxBase

SyntaxBase is a full-stack web application designed to help users learn programming and build real-world applications from the ground up. Built with React, Spring Boot, and PostgreSQL, the platform provides a structured, self-paced learning experience across multiple domains of software development.

SyntaxBase offers a wide range of tutorials, exercises, and interactive content organized into five core sections:

• Web Development
• Game Development
• Database Management
• Problem Solving
• Instructions & Lectures

Each section is divided into three tiers—Beginner, Intermediate, and Advanced—allowing users to progress based on their skill level and experience.

Community

SyntaxBase includes an integrated community forum where users can:

• Share ideas and projects
  • threaded forum with sections
  • ability to modify own message
• Give and receive feedback
  • feedback from instructors or other developers
• Connect with other developers and tech enthusiasts

---

Table of Contents

• Features
• Tech Stack
• Architecture
• Getting Started
• Project Structure
• Demonstration

---

Features

Some core features in SyntaxBase include:

User

• User registration & authentication
• Exploring tutorials and courses
• Getting help & consultation via email
• Personal homepage with options to view courses/tutorials
• Rate course/tutorial
• Check progress per course/tutorial
• Authenticated users can enroll courses
• Courses provide more features than tutorials
  • more examples
  • more lessons
  • friendly feedback after every lesson
  • in-lesson code demonstration and ability to customize code in browser
  • final project after finishing lessons with step-by-step guide
  • quiz after project to confirm knowledge
• Authenticated users have access to community forum
• Authenticated users can post, reply and delete posts in forum
• Authenticated users are notified when somebody replies to their post
• Authenticated users can change personal information
• Authenticated users can apply for instructor role
• After their request is approved they will receive email with confirmation
• Ability to enroll course via shared link from instructor
• Authenticated users can mark notifications as read
• Authenticated users can report messages
• Users can receive email containing unread notifications
• Authenticated users can view earned certificates
• Authenticated users can view earned awards
• Authenticated users can chat with each other in real time via integrated chat

Admin

The admin dashboard provides full control over user lifecycle, course analytics, and forum moderation tools.

User Management

• Approve instructor role requests
• Activate / deactivate user accounts
• Delete user accounts
• View user details and status
• Remove user from enrolled courses
• Soft-delete and restore user messages

Course Management

• Monitor top-rated courses by average rating
• Track course completion rates

Forum Moderation

• Delete inappropriate or flagged messages
• Restrict users from participating in discussions

Instructor

Instructors are verified users granted elevated privileges to create and manage their own courses.

Course Managment

• Create and publish new courses
• Delete owned courses
• Edit and update existing courses
• Upgrade course tier from FREE to ULTIMATE

Engagement

• Share enrollment links via email
• Hold elevated Instructor role in forum discussions

Forum / Community Module

This module enables structured, role-based community interaction through a lightweight forum system.

Core Features

• Section-Based Posting
  Users can create posts in up to five predefined sections, promoting organized discussions and content categorization.

• Post Structure
  Each post includes:

  • Message body
  • User name and role
  • Timestamp of creation

• Author Permissions
  Post creators can edit or delete their own posts at any time.

• Replies & Moderation

  • All posts support threaded replies
  • Reply authors can modify, delete, or report replies
  • Reporting enables community-driven moderation workflows

• Sorting Options
  Posts can be sorted by:

  • Date – for chronological relevance
  • Thread/Section – to maintain contextual clarity

---

Tech stack

Frontend

• CSS
• HTML5
• React
• Typescript

Backend

• Java
• Spring
• Tomcat

Database

PostgreSQL

Tools

Visual Studio Code

Intelij

Git

---

Getting started

Prerequisites

Before you begin, ensure you have the following installed on your machine:

Frontend

• Node.js (v18+ recommended)
• npm or Yarn (npm comes with Node.js)
• A modern web browser (e.g., Chrome, Firefox)

Backend

• Java JDK 17+
• Maven (or Gradle, if your project uses it)
• Spring Boot (handled via Maven/Gradle)

Database

• PostgreSQL (v14+ recommended)
  • Ensure a local or remote instance is running
  • Create a database and user with the proper privileges

Optional (Recommended for Development)

• Docker (to run PostgreSQL easily)
• Postman for testing APIs
• pgAdmin or another PostgreSQL client for database management

Environment Setup

Since this is side project .env files must be manually configrued. Make sure to configure the following:

• .env file for frontend (e.g., API base URL)
• application.properties or application.yml for Spring Boot (DB URL, credentials, etc.)

Development environment

For development environment VSCode and/or IntelijIDEA is recommended.

• Clone or download project
• Open project inside desired development environment

---

Development Environment

The recommended integrated development environment (IDE) for this project is IntelliJ IDEA.

Project Setup

1. Clone or download the repository from your version control system.
2. Open IntelliJ IDEA and navigate to:
   File → New → Project from Version Control...
3. Paste the repository URL and select
   "Load Maven build script" to import the project properly.

Screenshots

Cloning the repository

Importing the project using Maven

---

Frontend setup

To launch the frontend application, follow these steps:

1. Open a terminal window inside IntelliJ IDEA/VSCode (or use your system terminal).
2. Navigate to the frontend directory:
   /SyntaxBase/frontend/src
3. Install the dependencies:

   npm install

---

4. Start frontend

   npm start

---

Screenshots

Installing dependencies

Starting frontend

---

Backend setup

To start the backend application, follow these steps:

1. Ensure that Java 17 (or higher) is installed.
2. In IntelliJ, navigate to:
   SyntaxBase/backend/src/main/java/opp
3. Locate the BackendApplication.java class.
4. Right-click the file and select Run to start the Spring Boot server.

Screenshot

Running the Spring Boot application

---

Project structure

Project Structure (High Level) - v2.2.0

SyntaxBase/
├── .github/
├── backend/
├── database/
├── docs/
├── frontend/
├── microservice-chat/
├── microservice-moderation/
├── microservice-notifications/
├── microservice-shared/
├── monitoring/
├── tests/
├── CHANGELOG.MD
├── LICENSE
├── README.MD

Frontend

src/
├── components/
├── functions/
├── hooks/
├── images/
├── models/
├── pages/
│   ├── databaseCourses/     
│   ├── gameCourses/         
│   ├── problemSolvingCourses/
│   └── webCourses/       
├── services/   
└── styles/
└── utils/

Backend

com/programming.tutorial/
├── config/
├── controller/
├── dao/
├── domain/
├── dto/
├── services/
└── BackendApplication.java

Microservice-chat

microservice_chat/
├── config/
├── controller/
├── dao/
├── domain/
├── dto/
├── services/
└── MicroserviceChatApplication.java

---

Microservice-moderation

SyntaxBase-moderation-microservice/
│
├── data/
│ └── processed/
│ ├── raw/
│ └── test/
│ └── utils/
|
├── docker/
│ └── api/
    └── Dockerfile
│ ├── bert/
    └── Dockerfile
│ └── classical/
    └── Dockerfile
│ └── llm/
    └── Dockerfile
│ └── toxic_bert/
    └── Dockerfile
|
├── docs/
│ └── architecture.md
│ └── docs.md
│ └── index.md
│ └── research_paper.md
│ └── training_logs.md
│
├── models/
│ └── saved/
│   └── bert/
|   └── classical/
|   └── toxic_bert/
│
├── notebooks/
│ └── 01_baseline_experiments.ipynb
│ └── 02_distilbert_experiments.ipynb
│ └── 03_toxicbert_experiments.ipynb
│ └── 04_model_comparison.ipynb
│ └── 05_error_analysis.ipynb
│ └── 06_metrics_analysis.ipynb
|
├── results/
│ └── comparisons/
|   └── bert/
|   └── llm/
│ └── model_comparison_summary.csv
│ └── runtime_memory_tradeoff.csv
|
│ └── logs/
|   └── classical/
|   └── llm/
|       └── meta-llama-3.1-8b-instruct/
|       └── phi-4-reasoning-plus/
|       └── qwen3-4b-thinking-2507/
|   └── transformer/
|       └── distil_bert/
|       └── toxic_bert/
│ └── metrics/
│ └── visuals/
│
├── src/
│ ├── classical/
│ ├── llm/
│   ├── prompts/
│   ├── evaluator.py/
│   ├── llm_moderation_client.py/
│   ├── llm_service.py/
│ ├── transformer/
│ ├── utils/
│ │ └── generate_comments/
│ │     └── all_round_comments.py # general comments from various sources
│ │     └── forum_based_comments.py # comments that will likely be in forum
│ │ └── aggregateLlmResults.py
│ │ └── compare_all_llms.py
│ │ └── evaluate_both_models.py
│ │ └── evaluate_checkpoints.py
│ │ └── model_comparison_summary.py
│ │ └── predict_comments_bert.py
│ │ └── predict_comments_toxicbert.py
│ │ └── predict_comments.py
│ │ ├── preprocessing.py
│ │ ├── runtime_memory_tradeoff_comparison.py
| │api_service.py   
| |config.py
| |inference.py   
| |model_loader.py   
| |utils.py   
|
├── .gitattributes
├── .gitignore
├── docker-compose.yml
├── LICENSE
├── README.md
└── requirements.txt

---

Microservice-notifications

com/SyntaxBase/
├── config/
├── controller/
├── dao/
├── domain/
├── dto/
├── listener/
├── services/
├── utils/
└── MicroserviceNotificationsApplication.java

---

Microservice-shared

shared/
├── dto/

---

Demonstration

Here are some example screenshots from the app.
For a full visual walkthrough, visit Full UI Showcase.

Homepage

Tutorial example (initial lesson)

User homepage

Forum

Apply to course example

---