Admin Panel User Guide

A complete, screenshot-by-screenshot walkthrough of every section in the Coduo admin panel.

Welcome to the Coduo Admin Panel

The Coduo Admin Panel is a web-based control centre that gives you full control over every aspect of your platform — from managing learners and content to processing payments and configuring gamification. This guide walks through every section with screenshots so you know exactly what each screen does.

How to Access the Admin Panel

Open your admin panel URL in any browser. The default URL after deployment is:

https://YOUR_APP_NAME-admin.web.app

Admin Panel Sidebar Navigation

The left sidebar contains all main sections. Click any section header to expand or collapse its sub-items. The panel is fully responsive — on smaller screens the sidebar collapses into a hamburger menu at the top.

1.1 — Platform Overview Dashboard

Navigation: Sidebar → OVERVIEW → Platform Overview

The Platform Overview is the first screen you see after logging in. It gives you a real-time snapshot of your platform's health and activity.

Top Stats Row

Charts Section

• League Distribution — donut chart showing how learners are spread across Bronze, Silver, Gold, and Diamond leagues
• Challenge Types — breakdown of challenge formats used on the platform (Free Form, Fix the Bug, Fill Blank)
• Weekly Activity — bar chart showing daily lesson completions and challenge attempts over the past 7 days

Engagement & Gamification Stats (below fold)

• Active Streaks — number of learners currently maintaining a daily streak
• Achievements Unlocked — total badges earned by all learners
• Gems in Circulation — total gem balance held by all users

1.2 — Audit Logs

Navigation: Sidebar → OVERVIEW → Audit Logs

Audit Logs record every significant action taken on the platform — logins, payments, content changes, and user modifications. Use this to investigate issues, track admin activity, and maintain accountability.

Filtering Audit Logs

Reading an Audit Log Entry

• Timestamp — when the action occurred (UTC time)
• Action Type — category of action (shown as a badge)
• ID — the user or resource ID associated with the action
• Payment Method / Amount / Transaction ID / Status — populated for payment-related events
• Actions — click the eye icon to view the full detail of that log entry

2.1 — Users

Navigation: Sidebar → USERS & COMMUNITY → Users

The Users screen is your central directory of every person registered on your platform. You can search, sort, view detailed profiles, and manage roles from here.

Users Table Columns

Creating a New User

1. Click “Create User”

   The navy “+ Create User” button is at the top right of the Users screen.

2. Fill in the form

   Enter name, email, and password. Select the role: student, editor, or admin.

3. Save

   The user is created in Firebase Auth and added to Firestore simultaneously.

Searching & Sorting

• Use the “Search by email” field at the top to find a specific user instantly
• Use the “Sort By” dropdown to order by join date, XP, subscription status, and more

User Actions (Context Menu)

• View Profile — opens the full User Profile modal with charts
• Edit User — modify name, email, or role
• Assign As Editor — promotes a student to Editor role (limited admin access)
• Disable / Enable — suspend or restore user access without deleting their data

2.2 — User Profile

Navigation: Users list → click any user row → User Profile modal

Clicking a user opens the User Profile modal. This gives you a complete picture of that learner's progress, activity, and job readiness.

Profile Charts Explained

2.3 — Public Profiles

Navigation: Sidebar → USERS & COMMUNITY → Public Profiles

Public Profiles shows the leaderboard-style list of all users who have enabled public visibility. You can search by username and toggle any user's visibility from here.

Managing Public Profiles

• Each row shows username, XP total, current streak, tracks completed, and badges earned
• The toggle on the right controls whether that user's profile is publicly visible
• Users can also toggle their own visibility from within the mobile app
• Turning a profile Private hides it from the in-app leaderboard and public profile search

2.4 — Clubs Manager

Navigation: Sidebar → USERS & COMMUNITY → Clubs Manager

Coding Clubs are user-created groups where learners can team up, share challenges, and learn together. The Clubs Manager lets you view, moderate, and remove clubs.

Club Entry Fields

• Club name and avatar icon
• Member count — total users in the club
• Visibility — Public (anyone can join) or Private (invite only)
• Creation date

Available Actions

• Info icon — view club details, member list, and recent activity
• Delete icon — permanently remove a club and notify members; use for clubs that violate community guidelines

3.1 — Payment Settings

Navigation: Sidebar → PAYMENTS & REVENUE → Payment Settings

Payment Settings is where you configure your payment gateways. The screen is organised into five tabs: Stripe, Paystack, Bank Transfer, Currency, and Author Payouts.

Cloud Functions URL — Required First Step

Before enabling any payment method, you must set the Cloud Functions base URL. This is required for payment processing webhooks.

1. Find your Cloud Functions URL

   Firebase Console → Functions → copy the base URL (format: https://REGION-PROJECTID.cloudfunctions.net)

2. Paste it in the field

   Enter the URL in the “Cloud Functions URL” field at the top of the Payment Settings screen.

3. Click Save URL

   The URL is saved to Firestore and immediately available to the payment functions.

Stripe Tab Settings

Paystack Tab Settings

• Enable Paystack toggle — activates Paystack for African market card payments
• Test Mode toggle — switch between test and live environments
• Public Key — enter your Paystack public key (pk_live_... or pk_test_...)
• Secret Key — set via Firebase CLI: firebase functions:secrets:set PAYSTACK_SECRET_KEY

Bank Transfer Tab

• Enable Bank Transfer toggle
• Bank Name, Account Number, Account Name — your receiving bank details
• Transfer Instructions — custom message shown to users before they transfer
• Expiry Hours — how many hours a pending bank transfer stays valid before auto-expiring (default: 48)

3.2 — Transactions

Navigation: Sidebar → PAYMENTS & REVENUE → Transactions

The Transaction Dashboard shows every payment attempt on your platform — successful, failed, pending, expired, and refunded. You can filter, search, and export the full history.

Summary Stats (Top Row)

• Total Revenue — sum of all completed transactions (shown as “mixed” when multiple currencies are in use)
• Transaction Count — total number of transactions matching current filters
• Average Value — average transaction value across the filtered set

Filtering Transactions

Transaction Detail

Click the eye icon on any row to open the Transaction Details modal:

• Transaction Information — ID, status, created at, completed at
• User Information — name, email, User ID
• Course Information — course name, course ID
• Payment Information — amount, currency, payment method, gateway reference

3.3 — Revenue Analytics

Navigation: Sidebar → PAYMENTS & REVENUE → Revenue Analytics

The Revenue Analytics Dashboard gives you a visual breakdown of earnings. Use it to understand which payment methods are most popular and which courses are generating the most revenue.

Available Charts

• Revenue by Payment Method — donut chart showing percentage and amount per gateway
• Top Selling Courses — bar chart ranking courses by total revenue generated

Filters

• Select Date Range — filter analytics by a custom date period
• Currency — view in a specific currency or All Currencies combined
• Download icon — export the analytics report as CSV
• PDF icon — generate a PDF revenue report

3.4 — Currency Management

Navigation: Sidebar → PAYMENTS & REVENUE → Currency Management

Currency Management lets you add, activate, and manage the exchange rates for all currencies your platform accepts. This controls what currency options users see at checkout.

Understanding BASE and DEFAULT Currency

Adding a Currency

1. Click “+ Add Currency”

   Top right of the Currency Management screen.

2. Enter currency details

   Currency code (e.g. NGN), name (Nigerian Naira), symbol, and exchange rate relative to your base currency.

3. Set status

   Toggle Active to make it immediately available.

4. Save

   The currency appears in the list and becomes available at checkout.

3.5 — Subscription Plans

Navigation: Sidebar → PAYMENTS & REVENUE → Subscription Plans

Subscription Plans defines the tiers available to users — Free, Pro, and Premium. These tiers gate access to AI features, lesson limits, challenge attempts, and other premium content.

Plan Actions

• Edit — modify plan name, price, currency, features list, and tier identifier
• Delete — remove a plan (only if no active subscribers are on it)
• Reorder — drag to change the display order on the mobile app paywall screen
• + Add Plan — create a new subscription tier

Plan Fields (When Editing)

4.1 — Track Manager

Navigation: Sidebar → CODING PLATFORM → Track Manager

The Track Manager is where you create and organise your entire learning curriculum. A Track is a complete coding course — it contains Modules, and each Module contains Lessons.

Track List Fields

Creating a New Track

1. Click “+ Add New Track”

   Top right button on the Track Manager screen.

2. Fill in the Edit Track form

   See the form fields described below.

3. Add Modules

   Scroll down in the form to the Module Order section. Click “+ Add Module” to create modules within this track.

4. Save

   Click Save. The track appears in the list as a Draft. Toggle Published when ready to go live.

Edit Track Form Fields

4.2 — Lessons

Navigation: Sidebar → CODING PLATFORM → Lessons (or Track Manager → module → lessons)

The Lesson Editor gives you two ways to work: the global Lessons view lists every lesson across all tracks, while the Track Manager drill-down shows lessons within a specific module. Use the global view to search and edit; use the Track Manager path to create new lessons in context.

Lesson Actions

• Eye icon — preview the lesson as learners see it
• Edit icon — open the full Lesson Builder to edit content, exercises, and settings
• Delete icon — permanently remove the lesson (admin only — editors cannot delete)

Adding a New Lesson

1. Navigate via Track Manager

   Track Manager → click a track → click a module → click “+ Add Lesson”

2. Fill in lesson details

   Title, estimated time, XP reward, and published status

3. Add lesson items

   Each lesson contains items: concept cards (explanatory text), coding exercises, fill-in-the-blank, or multiple choice

4. Add test cases

   For coding exercises, add test cases with expected inputs and outputs

5. Save and publish

   Toggle Published when the lesson is ready for learners

4.3 — Challenge Editor

Navigation: Sidebar → CODING PLATFORM → Challenges

Standalone coding challenges are separate from tracks. They appear in the Challenges section of the mobile app and can be used for daily challenges. Each challenge has a difficulty, XP reward, and can be set to any subscription tier.

Creating a New Challenge

1. Click “+ New Challenge”

   Top right button on the Challenge Editor screen.

2. Fill in the New Challenge form

   See form fields below.

3. Write Problem Statement

   Use Markdown to describe the problem. A live Preview pane shows how it renders.

4. Add Test Cases

   Scroll down to add input/output test cases. These are run against the learner's code.

5. Save

   Click Save. Toggle Published when ready.

New Challenge Form Fields

4.4 — Playground Config

Navigation: Sidebar → CODING PLATFORM → Playground Config

The Code Playground is a free-form code editor available to learners for experimenting outside of lessons. Here you control whether it's enabled and how many executions each user gets per day.

4.5 — Project Editor

Navigation: Sidebar → CODING PLATFORM → Project Editor

Projects are capstone assignments that appear at the end of a learning track. They give learners a practical goal to apply everything they've learned. Each track can have one capstone project.

4.6 — Interview Sets Editor

Navigation: Sidebar → CODING PLATFORM → Interview Sets

Interview Sets are curated question banks for the Interview Prep feature in the mobile app. Learners take timed practice sessions from these sets to build interview confidence and track their readiness score.

Creating a New Interview Set

1. Click “+ New Set”

   Bottom right of the Interview Sets Editor screen.

2. Enter set details

   Set name, topic (e.g. Algorithms), difficulty (easy/medium/hard), and time estimate.

3. Add questions

   Click the “view questions” icon on any set to open its question bank and add individual questions.

4. Set question format

   Each question has: prompt text, expected answer type, hints, and time allocation.

Pre-Loaded Interview Set Topics

• Algorithms & Problem Solving — 7 questions, hard
• Behavioral Interview Questions — 5 questions, easy
• Data Structures Fundamentals — 9 questions, medium
• Database & SQL — 6 questions, medium
• JavaScript Interview Questions — 7 questions, medium
• Python Fundamentals — 6 questions, easy
• System Design Basics — 6 questions, hard

4.7 — Onboarding Configuration

Navigation: Sidebar → CODING PLATFORM → Onboarding Config

The Onboarding Configuration controls the first-run experience for new users. When a new learner installs the app, they are asked about their goals, experience level, and daily time commitment. This screen lets you customise those options.

5.1 — Streak Freeze Config

Navigation: Sidebar → ENGAGEMENT & REWARDS → Streak Freeze Config

Streak Freezes let learners protect their daily streak on days they cannot study. This screen controls how expensive streak repairs are, how long the repair window lasts, and how many freezes a user can hold at once.

5.2 — Gem Shop Config

Navigation: Sidebar → ENGAGEMENT & REWARDS → Gem Shop Config

Gems are the virtual currency in Coduo. Learners earn gems by completing lessons and challenges. They can spend gems in the Gem Shop on streak freezes, hint reveals, and cosmetic items. This screen sets the gem cost for each item.

Below the configuration form, the screen shows the User Balances (Top 20) — a live leaderboard of the 20 users with the highest gem balances. This is useful for monitoring gem economy health and identifying power users.

5.3 — Daily Challenge Manager

Navigation: Sidebar → ENGAGEMENT & REWARDS → Daily Challenge Manager

The Daily Challenge Manager schedules one coding challenge per day. Learners see a countdown timer to the next challenge and can track their 7-day completion history. You can schedule challenges weeks or months in advance using the calendar view.

Calendar View

• Use the left/right arrows to navigate between months
• Click any date cell to assign a challenge to that day
• Dates with challenges assigned show a calendar icon in the top-right corner of the cell
• The list below the calendar shows all scheduled challenges in chronological order

Creating a New Daily Challenge

1. Click “+ New Challenge”

   Bottom right button on the Daily Challenge Manager screen.

2. Fill in the Edit Challenge form

   Title, Description, Problem Statement (markdown), Starter Code (optional), and select the challenge date.

3. Save

   The challenge is scheduled and will automatically become available to learners on the assigned date.

5.4 — Certificates Manager

Navigation: Sidebar → ENGAGEMENT & REWARDS → Certificates Manager

Certificates are issued automatically when a learner completes an entire learning track. The Certificates Manager has three tabs: All Certificates (view all issued certs), Configuration (set your branding), and Verify Certificate (authenticate any cert by ID).

Certificate Status

Certificate Template Configuration

Verifying a Certificate

Use the Verify Certificate tab to confirm whether a credential ID is authentic. Employers, institutions, or the admin can enter a credential ID and get an immediate Valid/Invalid response.

6.1 — App Settings

Navigation: Sidebar → SETTINGS → App Settings

App Settings is where you control the global branding and configuration of your platform — the name, logos, social links, legal URLs, and store links that appear throughout the mobile app and admin panel.

Branding Section

How to Update Logos via App Settings

1. Upload logo to Firebase Storage

   Firebase Console → Storage → Upload your PNG logo file. Right-click → Get Download URL.

2. Paste URL in App Settings

   Paste the Firebase Storage download URL into the Light Logo URL or Dark Logo URL field.

3. Click Upload (or Save Changes)

   The URL is saved to Firestore. The app reads it dynamically — no rebuild required.

Other App Settings Sections

• Social Links — Facebook, Twitter/X, Instagram, YouTube URLs for your community pages
• Legal — Privacy Policy URL, Terms of Service URL (required for App Store compliance)
• Store Links — Google Play Store URL and Apple App Store URL (used for share and rating prompts)
• Support — Support email address shown in the app's help section

6.2 — AdMob Settings

Navigation: Sidebar → SETTINGS → AdMob Settings

AdMob Settings controls all advertising for your mobile app. You can enable/disable ads globally, and configure the App ID and ad unit IDs for each ad format. Premium users automatically see no ads regardless of this setting.

Ad Status

AdMob Configuration Fields

7.1 — The Editor Role Explained

The Editor role is designed for content creators — writers, instructors, or subject matter experts who need to add and update learning content without having access to financial data, user management, or platform settings.

How to Assign the Editor Role

1. Go to Users

   Sidebar → USERS & COMMUNITY → Users

2. Find the user

   Search by email or scroll to find the user you want to promote

3. Open their action menu

   Click the three-dot menu on the right of their row

4. Select “Assign As Editor”

   The user's role badge immediately changes from student to editor

5. Inform the user

   They now see a different version of the admin panel when they log in — with content tools only

Editor Access Summary

Common Admin Tasks

A quick-reference table for the most frequent actions you'll perform in the admin panel.