Edavro — Project Documentation

This documentation is based on the current code in this repository (G:/EdaVro) and updated for accuracy.

1) What this project actually is

• Mobile-first, multi-page learning app UI template.
• PWA-enabled via manifest.json and service-worker.js.
• No frontend framework (Vanilla JS + HTML + CSS).
• Build output generated into dist/.

2) Tech stack (from codebase)

Area	Implementation
Frontend	HTML pages + Vanilla JavaScript
CSS	tailwindcss@^3.4.19 + src/css/custom-styles.css
Build tools	cross-env, cpx, html-minifier-terser
PWA	Web App Manifest + Service Worker cache + offline fallback page
Data persistence	Uses browser localStorage for payment flow state

3) Project structure

Path	Purpose
app.html	Main app launcher splash + service worker registration + install UI + redirect to src/pages/splash-screen.html
index.html	Landing/preview page with iframe and docs link
documentation.html	This documentation file
manifest.json	PWA metadata (name, icons, colors, scope, display)
service-worker.js	Precache + runtime cache + offline navigation fallback
src/pages/	All app screens (43 HTML pages)
src/js/	Page-level behavior modules (36 files)
src/css/	Tailwind input/output, fonts.css (Roboto), and custom component styles
scripts/build-root-files.js	Post-processing and root-file build copy logic
dist/	Production-ready build output

4) Build & run

NPM Script	What it does
npm run dev	Starts Tailwind watch build (src/css/tailwind.css → src/css/output.css)
npm run build:css:prod	Compiles minified CSS into dist/css/output.css
npm run copy:assets	Copies src/assets and src/js into dist
npm run copy:root	Builds/copies root files (index.html, app.html, documentation.html, manifest adjustments)
npm run minify:html	Minifies HTML pages from src/pages into dist/pages
npm run build	Runs full production pipeline

5) Runtime flow

• index.html is marketing/preview page.
• app.html registers SW and redirects after splash animation to src/pages/splash-screen.html.
• src/js/splashScreen.js routes splash page to onboarding.html.
• src/js/onbording.js controls onboarding slides and routes to sign-in.html.

6) JavaScript module map (actual files)

All files in src/js/ (36)

• addNewCard.js
• all-instructors.js
• cartification.js
• coming-soon-toast.js
• compleated-course.js
• courseDetails.js
• exprenceLevel.js
• faq.js
• forgatPass.js
• free-course.js
• global-validation.js
• helpCenter.js
• inputOtp.js
• instructor-profile.js
• loginPopup.js
• message.js
• milstons.js
• myCourser.js
• navbar.js
• onbording.js
• passcode.js
• payment-validation.js
• personalInfo.js
• profile.js
• profilePopup.js
• purposeForUsingThis.js
• recommended.js
• reminder.js
• resetPassPopup.js
• save.js
• searchBar.js
• securePayment.js
• signup.js
• splashScreen.js
• support.js
• upcomingSession.js
• validateFrom.js
• watchYouWentToLearn.js
• welcomeCaorajol.js

7) HTML page inventory (actual files)

All files in src/pages/ (43)

• add-new-card.html
• card.html
• certification.html
• complete-your-profile.html
• course-details.html
• create-new-password.html
• current-exprence-level.html
• downloaded-courses.html
• fequently-asked-questions.html
• free-course.html
• help-center.html
• home-page.html
• interests.html
• language.html
• learning-progress.html
• message.html
• my-courses.html
• not-yet.html
• notification.html
• notifications.html
• offline.html
• onboarding.html
• otp-code-varify.html
• passcode.html
• payment-account.html
• personal-info.html
• privacy-policy.html
• profile.html
• purpose.html
• recommended-for-you.html
• reminder.html
• reset-password.html
• reviews.html
• search-bar.html
• secure-payment.html
• security.html
• sign-in.html
• sign-up.html
• splash-screen.html
• subscription.html
• support.html
• upcoming-session.html
• wishlist.html

8) PWA behavior

• Install prompt UI exists in both index.html and app.html.
• Service worker does pre-cache + runtime cache update.
• Navigation requests fall back to pages/offline.html when offline.
• Manifest includes multiple icon sizes and standalone display.

9) Real storage keys used

Key	Used in	Meaning
paymentStatus	payment-validation.js, securePayment.js	Tracks payment flow status
selectedCardName	securePayment.js	Chosen card name
selectedCardIcon	securePayment.js	Chosen card icon path

10) Quality notes (to improve project further)

• service-worker.js references files that do not exist by exact name (e.g. global-validations.js, validateForm.js, cartification.html), but actual files are global-validation.js, validateFrom.js, certification.html etc.
• Mixed naming styles and typos in filenames (forgatPass, exprence, validateFrom, compleated-course, myCourser), which makes maintenance harder.
• Tailwind config font is Roboto (see fonts.css), but some pages/components may still use Poppins/AnekBangla inline — consider one system-wide decision.
• New modules/pages added: all-instructors.js, recommended.js, coming-soon-toast.js, instructor-profile.js, personalInfo.js, etc. (see src/js/ and src/pages/).

11) Last updated

Updated from repository state on 2026-04-27.