📋 Table of Contents
Platform Overview
What is Sunkar Sikho and how does it work
🎧 Audio Lessons
Chapter-wise audio lessons organized by class and category. Students can listen, pause, and replay. Content is managed by admin.
📚 Workbooks
Printable PDF workbooks for each class and subject. Students can view and download them from their dashboard.
🧠 Quizzes
Multiple-choice quizzes per chapter. Students take quizzes, get instant scores, and parents can track performance.
💳 Subscriptions
Parents choose a plan (free or paid), pay via Razorpay, and their child gets access. Admin can manage all subscriptions.
👨👩👦 Parent Dashboard
Parents log in to see their child's quiz attempts, scores, and overall progress across all subjects.
⚙️ Admin Panel
Full control over content, users, plans, subscriptions, notifications, invoices, and site settings.
System Architecture
Three separate projects working together
🖥️ UI (Student/Parent Frontend)
Angular app. Runs on port 4200 (dev). This is what students and parents see — home, login, audio lessons, quizzes, dashboard, pricing.
http://localhost:4200
🛠️ ADMIN (Admin Panel)
Separate Angular app. Runs on port 4201 (dev). Only for admins — manage all content, users, plans, subscriptions.
http://localhost:4201
⚡ API (Backend)
Node.js + Express + MySQL. Runs on port 5646. All data flows through this. Auto-creates and migrates database tables on startup.
http://localhost:5646/api
User Journey Flow
How a new student gets onboarded end-to-end
Pricing page
(Free or Paid)
3-step wizard
Payment (if paid)
as Student
Workbooks, Quizzes
Parent browses Pricing
Goes to /pricing — sees all available plans with features and prices. Clicks "Subscribe" on a plan.
Signup Wizard — Step 1: Student Info
Enters child's name, email, password, class, and age. This creates the student account.
Signup Wizard — Step 2: Parent Info
Enters parent's name, email, mobile, and password. Parent account is linked to the student.
Signup Wizard — Step 3: Review & Pay
For paid plans — Razorpay payment popup opens. For free plans — directly registers. On success, auto-login happens.
Student Dashboard
Student is logged in and can access all content based on their subscription plan.
Admin Login
Accessing the Admin Panel
Open Admin Panel
Go to http://localhost:4201 in your browser. You will see the Admin Login page.
Enter Credentials
Enter your admin email and password. These are the credentials stored in the users table in the database.
Access Dashboard
On successful login, you are redirected to the Admin Dashboard. A JWT token is stored in localStorage to keep you logged in.
Dashboard
Overview of platform stats at a glance
📦 Total Students
Count of all registered students on the platform.
👨👩👦 Total Parents
Count of all parent accounts linked to students.
🎧 Audio Lessons
Total number of audio lessons published.
📚 Workbooks
Total workbooks available for students.
🧠 Quizzes
Total quizzes created across all classes.
💳 Active Subscriptions
Number of currently active student subscriptions.
Students
Manage all student accounts and view their activity
View All Students
The Students page shows a table with all registered students — name, email, class, age, and active status.
Add a Student Manually
Click the "Add Student" button. Fill in name, email, password, class level, and age. Click Save.
Edit a Student
Click the Edit (pencil) icon on any student row. Update the details and save.
View Student Overview
Click the "Overview" blue button on any student row. This opens a detailed page showing: total quiz attempts, completed quizzes, average score, best score, total time spent, and full quiz history table.
Delete a Student
Click the Delete (trash) icon. Confirm the deletion. This permanently removes the student record.
Parents
Manage parent accounts linked to students
👁️ View Parents
See all parent accounts with their linked student name, email, and mobile number.
➕ Add Parent
Click "Add Parent". Select the linked student from the dropdown. Fill in name, email, mobile, and password.
✏️ Edit Parent
Update parent details. Note: password field is optional on edit — leave blank to keep existing password.
🗑️ Delete Parent
Removes the parent account. The linked student account is NOT deleted.
student_id field. If a parent is added via the signup flow, they are automatically linked.Classes
Define class levels used across the platform
Classes define the grade levels (e.g., Class 1, Class 2, Class 3, Class 4, Class 5). These are used when adding audio lessons, workbooks, and quizzes to organize content by grade. Add a class by clicking "Add Class", entering the class name, and saving. Audio lessons and workbooks are then filtered by these class values.
Audio Categories
Organize audio lessons into subject/topic groups
What are Audio Categories?
Categories group audio lessons by subject or topic — e.g., "Mathematics", "Hindi Stories", "Science". Each audio lesson belongs to one category.
Add a Category
Click "Add Category". Enter the category name and optionally an icon or description. Save.
Edit / Delete
Use the Edit or Delete buttons on each row. Deleting a category does NOT delete its audio lessons — they become uncategorized.
Audio Lessons
Upload and manage all audio content for students
Add an Audio Lesson
Click "Add Audio Lesson". Fill in: Title, Class Level, Category, Chapter, Description, and the Audio File URL. Save.
Required Fields
Title — name of the lesson. Class Level — which class it belongs to (e.g., Class 1). Category — subject group. Audio URL — direct link to the MP3/audio file.
How it appears on UI
Students see audio lessons on the /audio-lessons page. They are organized by Class tabs first, then Category tabs. Clicking a lesson opens the Audio Player page.
Edit / Delete
Use the Edit (pencil) or Delete (trash) buttons on each row in the audio lessons table.
Workbooks
Manage printable PDF workbooks for students
Add a Workbook
Click "Add Workbook". Fill in: Title, Class Level, Subject, Chapter, Description, Thumbnail Image URL, and PDF File URL.
How it appears on UI
Students see workbooks on the /workbooks page. Clicking a workbook opens the PDF viewer at /workbook-details/:id.
Edit / Delete
Use the Edit or Delete buttons on each row. Deleting a workbook removes it from the student view immediately.
Quizzes
Create quizzes with multiple-choice questions
Create a Quiz
Click "Add Quiz". Enter: Title, Class Level, Subject, Chapter, Time Limit (minutes), and Description. Save the quiz first.
Add Questions
After creating the quiz, click "Manage Questions" on the quiz row. Click "Add Question". Enter the question text, 4 options (A, B, C, D), and select the correct answer. Save.
How it appears on UI
Students see quizzes on the /quiz-center page. Clicking a quiz opens /quiz-details/:id with quiz info. Clicking "Start Quiz" opens the interactive quiz at /take-quiz.
Quiz Results
After completing a quiz, students see their score, percentage, and correct/wrong answers on the /quiz-results page. Results are saved and visible in the Student Overview in Admin.
Plans
Define subscription plans available to students
Add a Plan
Click "Add Plan". Fill in: Name, Code (short identifier), Price, Duration (days), Max Kids, Description, and whether it's a Free plan.
Free Plan
Toggle "Is Free" to ON for a free plan. Free plans skip the Razorpay payment step during signup — students are registered directly.
How Plans appear on UI
Plans are shown on the /pricing page. Students/parents select a plan and proceed to signup. The selected plan is carried through the entire onboarding flow.
| Field | Description | Example |
|---|---|---|
| Name | Display name of the plan | Basic Plan |
| Code | Short identifier | BASIC |
| Price | Amount in INR | 999 |
| Is Free | Toggle for free plans | Yes / No |
| Duration Days | How many days access lasts | 365 |
| Max Kids | Max students per subscription | 1 |
| Type | Plan category | standard / premium |
| Features | List of features (JSON) | ["Audio Lessons", "Workbooks"] |
Subscription Plans
Detailed plans with duration tiers and pricing (shown on Pricing page)
📦 Plan Types
Three types: combo (Audio + Workbooks), audio-only, workbook-only. Each type has its own pricing page on the UI.
⏱️ Duration Tiers
Each plan can have multiple durations — e.g., 6 months, 12 months, 24 months — each with its own price and discount percentage.
🆓 Free Plans
Toggle "Is Free" to create a free plan. Free plans show a "Get Started Free" button instead of a price on the pricing page.
✨ Features List
Add bullet-point features that appear on the pricing card — e.g., "1000+ Audio Lessons", "Offline Download", "Parent Dashboard".
Add a Subscription Plan
Click "Add Plan". Select type (combo/audio-only/workbook-only). Fill in name, title, subtitle, base price, and features. Add duration tiers with prices.
Edit Duration Pricing
In the edit modal, scroll to the Durations section. Add/remove duration rows. Each row has: months, price, and discount %.
Subscriptions
View and manage all student subscriptions
| Column | Meaning |
|---|---|
| Student Name | Which student this subscription belongs to |
| Plan Name | Which plan they subscribed to |
| Start Date | When the subscription started |
| End Date | When the subscription expires |
| Status | active / expired / cancelled |
| Payment ID | Razorpay payment ID (for paid plans) |
| Is Active | Whether the subscription is currently active |
Notifications
Send announcements and alerts to students/parents
Create notifications with a title, message, and target audience. These appear as alerts or banners on the student/parent UI. Use this for announcements like new content, maintenance windows, or special offers.
Invoices
Track payment invoices for subscriptions
Invoices are auto-generated when a student subscribes to a paid plan. Each invoice shows the student name, plan, amount, payment ID, and date. You can view, filter, and export invoice records from this section.
Reports
Analytics and performance reports
The Reports section provides an overview of platform activity — new registrations over time, quiz completion rates, subscription revenue, and content engagement. Use this to understand how students are using the platform.
Payment Settings
Configure Razorpay keys for online payments
Enter Razorpay Keys
Go to Payment Settings. Enter your Razorpay Key ID and Key Secret. These are available from your Razorpay Dashboard under Settings → API Keys.
Test vs Live Mode
Use test keys (starting with rzp_test_) during development. Switch to live keys (starting with rzp_live_) when going live.
How it works
When a student subscribes to a paid plan, the UI fetches the Razorpay Key ID from the API and opens the Razorpay payment popup. Payment is processed entirely on the frontend — no server-side webhook needed.
.env file.Site Configuration
Control all website-wide settings from one place
| Setting | What it controls |
|---|---|
| Site Name | Platform name shown in header and browser tab |
| Logo URL | Logo image shown in the header |
| Mobile / WhatsApp | Phone number for the WhatsApp sticky button on the UI |
| Contact email shown in footer | |
| Address | Physical address shown in footer |
| Facebook URL | Facebook page link in header/footer social icons |
| Instagram URL | Instagram profile link |
| YouTube URL | YouTube channel link |
| Twitter URL | Twitter/X profile link |
| About Text | Short description shown on About page and footer |
| Hero Title | Main heading on the Home page hero section |
| Hero Subtitle | Subheading on the Home page hero section |
Admin Users
Manage who has access to the Admin Panel
➕ Add Admin User
Click "Add User". Enter name, email, and password. The new user can log into the Admin Panel with these credentials.
✏️ Edit User
Update name, email, or password. Leave password blank to keep the existing one.
🔴 Deactivate User
Toggle the "Active" status to deactivate a user without deleting them. Deactivated users cannot log in.
🗑️ Delete User
Permanently removes the admin user. Be careful — you cannot delete your own account while logged in.
Home Page (UI)
What students and parents see when they visit the website
🦸 Hero Section
Big banner with title, subtitle, and CTA buttons. Text is pulled from Site Configuration (Hero Title, Hero Subtitle).
🎧 Audio Lessons Preview
Shows a sample of available audio lessons. Clicking takes the user to the full Audio Lessons page.
📚 Workbooks Preview
Shows featured workbooks. Clicking takes the user to the Workbooks page.
💳 Plans Section
Shows available subscription plans with pricing. "Subscribe" button takes users to the Pricing page.
💬 WhatsApp Button
Sticky green WhatsApp button at bottom-right. Phone number is set in Site Configuration → Mobile field.
🔗 Header Navigation
4 nav items: Home, Learn (Audio/Workbooks/Quizzes), Plans, More (About/Contact/FAQ). Social icons from Site Config.
Login Page (UI)
How students and parents log in
Select Account Type
The login page has a Student / Parent toggle at the top. Select the correct type before entering credentials.
Enter Email & Password
Enter the email and password used during signup. Use the eye icon to show/hide the password.
After Login
Students are redirected to the Student Dashboard. Parents are redirected to the Parent Dashboard. A JWT token is stored in localStorage.
Signup / Onboarding (UI)
3-step wizard for new student registration
Student Info
Parent Info
Review & Pay
Success 🎉
Step 1 — Student Information
Child's full name, email address, password, class level (1–5), and age. All fields required.
Step 2 — Parent Information
Parent's full name, email address, mobile number, and password. All fields required.
Step 3 — Review & Pay
Shows a summary of the selected plan and entered details. For paid plans: Razorpay payment popup opens. For free plans: directly registers without payment.
Step 4 — Success
Registration complete. Student is auto-logged in. A "Go to Dashboard" button appears. The student can now access all content.
Pricing Page (UI)
Where users choose their subscription plan
📦 Plan Cards
Each plan is shown as a card with name, price, features list, and a Subscribe button. Plans are fetched live from the API.
🆓 Free Plans
Free plans show "Get Started Free" instead of a price. Clicking goes directly to signup without payment.
💳 Paid Plans
Clicking "Subscribe" on a paid plan saves the plan to localStorage and redirects to /signup. Payment happens at Step 3 of signup.
🔄 Duration Toggle
If a plan has multiple durations (6/12/24 months), users can toggle between them to see different prices.
Audio Lessons Page (UI)
How students browse and listen to audio content
Class Tabs
At the top, colorful pill tabs show each class (Class 1, Class 2, etc.). Clicking a class filters lessons for that grade.
Category Tabs
Below the class tabs, category pills appear (e.g., Mathematics, Hindi, Science). Clicking filters by subject.
Lesson Cards
Each lesson shows title, chapter, and duration. Clicking a card opens the Audio Player page.
Audio Player
Full-screen player with play/pause, seek bar, volume control, speed control, and previous/next lesson navigation. Shows lesson title and category.
Workbooks Page (UI)
Browse and view printable PDF workbooks
Students browse workbooks organized by class and subject. Clicking a workbook card opens the PDF Viewer at /workbook-details/:id. Students can view the PDF inline or download it. This page requires login.
Quiz Center (UI)
Browse and take quizzes
Browse Quizzes
The Quiz Center (/quiz-center) shows all available quizzes with class, subject, chapter, and question count.
Quiz Details
Clicking a quiz opens /quiz-details/:id — shows quiz info, time limit, and a "Start Quiz" button.
Take Quiz
The quiz interface (/take-quiz) shows one question at a time with 4 options. A timer counts down. Students can navigate between questions.
Quiz Results
After submitting, /quiz-results shows: score, percentage, time taken, and a breakdown of correct/wrong answers. Results are saved to the database.
Student Dashboard (UI)
Personal dashboard for logged-in students
👋 Welcome Card
Shows the student's name, class level, and subscription status.
📊 Stats Overview
Total quizzes attempted, average score, best score, and total time spent on quizzes.
📚 Recent Workbooks
Quick access to recently viewed workbooks.
🧠 Recent Quiz Attempts
List of recent quiz attempts with scores and dates. Clicking shows full results.
🎧 Continue Listening
Quick links to recently played audio lessons.
⚠️ Subscription Banner
If subscription is expired or missing, a banner prompts the student to subscribe.
Parent Dashboard (UI)
Monitor your child's learning progress
👦 Child Profile
Shows the linked student's name, class, and age.
📊 Quiz Stats
Total attempts, completed quizzes, average score, and best score for the child.
📋 Quiz History
Full table of all quiz attempts — quiz name, score, percentage, date, and time taken.
💳 Subscription Info
Current plan name, start date, end date, and status.
API Reference
Key endpoints used by the platform
| Method | Endpoint | Description | Auth |
|---|---|---|---|
| GET | /siteconfig/getSiteconfig | Get site configuration (logo, social links, contact) | No |
| GET | /audio | Get all audio lessons | No |
| GET | /audio/:id | Get single audio lesson | No |
| GET | /workbooks | Get all workbooks | No |
| GET | /quizzes | Get all quizzes | No |
| GET | /subscriptions/plans/public | Get all active subscription plans (pricing page) | No |
| POST | /students/register | Register new student + parent + subscription | No |
| POST | /auth/student-login | Student login — returns JWT token | No |
| POST | /auth/parent-login | Parent login — returns JWT token | No |
| GET | /students/:id | Get student by ID | Yes |
| GET | /parents/:id | Get parent by ID | Yes |
| GET | /quiz-attempts/student/:id | Get all quiz attempts for a student | Yes |
| POST | /quiz-attempts/start | Start a new quiz attempt | Yes |
| POST | /quiz-attempts/:id/submit | Submit quiz answers and get score | Yes |
| GET | /subscriptions/student/:id | Get active subscription for a student | Yes |
| POST | /subscriptions | Create a new subscription | Admin |
| GET | /dashboard | Admin dashboard stats | Admin |
Authorization header. The token is obtained from login and stored in localStorage as token.Troubleshooting
Common issues and how to fix them
| Problem | Cause | Fix |
|---|---|---|
| API not starting | Database not running or wrong credentials in .env | Start MySQL service. Check API/.env for correct DB_HOST, DB_USER, DB_PASS, DB_NAME. |
| "Unknown column" error | Database table missing a column | Restart the API — it auto-runs migrations on startup and adds missing columns. |
| Login fails with 401 | Wrong credentials or expired token | Check email/password. Make sure the correct toggle (Student/Parent) is selected. Log out and log back in. |
| Razorpay popup not opening | Razorpay Key ID not configured | Go to Admin → Payment Settings. Enter a valid Razorpay Key ID. |
| Audio not playing | Invalid audio URL or CORS issue | Check the audio URL in Admin → Audio Lessons. Make sure it's a direct link to an MP3 file (not a webpage). |
| WhatsApp button not showing | Mobile number not set in Site Config | Go to Admin → Site Configuration. Enter the WhatsApp number in the Mobile field. |
| Social icons not linking | Social URLs not set in Site Config | Go to Admin → Site Configuration. Fill in Facebook, Instagram, YouTube, Twitter URLs. |
| Student can't access content | No active subscription | Go to Admin → Subscriptions. Add a subscription for the student manually, or ask them to subscribe via the Pricing page. |
| Parent dashboard shows no data | Parent not linked to a student | Go to Admin → Parents. Edit the parent and select the correct student from the dropdown. |
| Quiz results not saving | Student not logged in during quiz | Make sure the student is logged in before starting a quiz. The quiz requires authentication. |
init() function, it will be added to the live database the next time the API restarts — without losing any existing data.For technical support, contact your development team.