Foundation first
Interns first understand how websites work, how code becomes live, and how the basic web stack fits together.
Full Syllabus • 8 Modules • Project-Driven Learning
Complete Internship Modules at Dominal Tech
Explore our comprehensive 8-module curriculum, detailing the 10 key technical concepts covered in each phase. Please note that the detailed execution, practical integration, and step-by-step application of these points will be taught directly during the internship sessions and guided by the custom Learning Software developed by Dominal Tech.
Module 1
Web Basics, GitHub, Vercel, Domains
Module 2
Supabase, Login, Live Data
Module 3
Professional Website UI Patterns
Module 4
AI API Integration & Chatbots
Module 5
PWA Basics
Module 6
PWA Notifications
Module 7
Electron Desktop Conversion
Module 8
RAG Basics & Custom Data
internship.dominal.in
Learn how websites go live, how data gets connected, how web apps become installable and
desktop-ready, and how AI products move from basic chatbots to RAG.
Begin with shipping
HTML, CSS, JS basics → GitHub → Vercel → domains → DNS.
Then backend and auth
Supabase, URL + anon key, login, sessions, realtime updates.
Then product polish
Professional page patterns, SVGs, navigation, sliders, layout discipline.
Then app-level thinking
AI, PWA, notifications, Electron packaging, and RAG basics.
Curriculum structure
The module order is designed to move from fundamentals and deployment toward backend integration, polished interface building, AI workflows, app conversion, and custom-data AI systems.
Backend next
Once hosting is clear, they learn how Supabase connects the frontend to a real backend with login and live data.
Modern product layer
They then build stronger interfaces, use AI APIs, and make the web app feel more app-like with installability and notifications.
Advanced expansion
The final modules show how web apps become desktop apps and how AI can answer from private or custom data using RAG basics.
Jump to any module
Each module below includes 10 essential teaching points with concise explanations and practical framing for internship delivery.
Module 1Web basics, GitHub, Vercel,
domain flow
Module 2Supabase, auth, URL + anon
key, live data
Module 3Professional website UI
patterns
Module 4AI API integration and basic
chatbot
Module 5PWA basics
Module 6PWA notifications
Module 7Electron desktop
conversion
Module 8RAG basics with custom
data
1
What a website is made of
HTML gives the structure, CSS gives the design, and JavaScript adds interaction. Before React or bigger frameworks, these three are the core building blocks of the web.
2
How web pages connect together
Pages connect using links, buttons, navigation bars, and file paths. This helps interns understand how multi-page websites are organized.
3
How the browser reads a website
The browser loads HTML first, then CSS styles it, and JavaScript adds behavior. This gives students a simple mental model of page rendering.
4
What GitHub is used for
GitHub stores code online, keeps version history, helps collaboration, and acts as a source of truth for projects that will later be deployed.
5
What a repository is
A repository is a project space containing files, commits, branches, and updates. Interns should understand that every project usually lives inside a repo.
6
How Vercel hosting works
Vercel connects to a GitHub repository and turns the project into a live website. Updates pushed to the repo can automatically redeploy the site.
7
What deployment means
Deployment is the process of making local code available online so anyone can open it with a public URL in a browser.
8
How domains work
A domain is the human-friendly website name, like `example.com`, that people type instead of using a long technical hosting address.
9
How DNS and nameservers work
DNS tells the internet where the domain should point. Nameservers and DNS records connect the purchased domain to the correct hosting provider.
10
How domain-to-hosting connection happens
After buying a domain, you either change nameservers or add records like A or CNAME so the domain points to Vercel or another host correctly.
1
What Supabase is
Supabase is a backend platform that gives database, authentication, APIs, storage, and realtime features from one project.
2
How a Supabase project is created
You create a project in the dashboard, choose region and credentials, and let Supabase provision the backend environment.
3
What the Project URL is
The Project URL is the unique address of the Supabase project. Your frontend uses it to know which backend instance it should talk to.
4
What the anon key is
The anon key is the public frontend key used to initialize the client safely for allowed operations. It identifies the app, not the individual user.
5
Why the service role key must stay private
The service role key has high privileges and should never be exposed in browser code. It belongs only in trusted server-side environments.
6
How the website connects to Supabase
The frontend initializes a Supabase client using the project URL and anon key, usually through environment variables or configuration values.
7
How data tables work in Supabase
Your app stores and reads data from tables such as users, tasks, internships, products, or project updates.
8
How login and authentication work
Supabase Auth manages signup, login, sessions, and identity so different users can securely access the app.
9
How live data works
Supabase can notify the frontend about inserts, updates, or deletes so UI data can update in near realtime without full page refreshes.
10
How frontend access stays safe
Security does not come from hiding the anon key. It comes from authentication, database permissions, and proper access control policies.
1
Use SVGs instead of emojis
Icons and visuals should feel professional and branded. SVGs scale better, look cleaner, and match a proper product website more than emojis.
2
Keep white background, black text, and one accent color
A clean white background with black text and a limited dark-blue accent makes the website feel serious, modern, and premium instead of noisy.
3
Implement an image slider properly
Use sliders for portfolio previews, products, screenshots, or testimonials. The slider should feel useful and controlled, not distracting.
4
Add a bottom screen taskbar for mobile
When the site or web app has a few main actions, a bottom taskbar makes them easier to reach on phones and creates a more app-like experience.
5
Use a top-right three-line menu
The hamburger menu is useful for extra pages or secondary navigation so the main screen stays clean and uncluttered.
6
Create a proper hero section
A strong hero usually needs a clear heading, short description, one main CTA, and one visual or screenshot that communicates value fast.
7
Use proper section flow
Pages should feel complete and intentional with a structure such as hero, features, showcase, proof, FAQ, and footer rather than random blocks.
8
Keep buttons, cards, and spacing consistent
Consistency helps the entire page feel like one system. Random spacing or mismatched buttons can make a site look less professional.
9
Use proper SVG animations
Motion should feel subtle and professional. Clean line animations, shape transitions, or layered SVG movement can make the page more impressive.
10
Design mobile-first with readable content
Text, sections, navigation, and touch targets should work properly on smaller screens first so the site feels complete across devices.
1
What an AI API is
An AI API lets your app send text to a model and receive a generated response back. This is the base of chatbot integration.
2
How a basic chatbot works
The user sends a message, the app sends it to the model, and the model returns a reply that is displayed in the chat UI.
3
What an API key is
An API key is a private credential that allows your backend or app logic to access the AI provider securely.
4
Frontend and backend roles
The frontend shows the interface, while the backend usually handles the secure API request so secrets are not exposed publicly.
5
What a model is
A model is the AI engine you choose based on speed, capability, and cost depending on the product feature you are building.
6
What prompts and message roles are
Instructions such as system guidance and user messages shape how the AI responds and what behavior it follows.
7
What temperature and max tokens mean
Temperature affects how creative or stable the answer feels, while max tokens helps limit length and usage.
8
How conversation history works
Past messages can be sent with the current one so the chatbot remembers the flow of the conversation inside a session.
9
How to handle loading and errors
A chatbot should show waiting states, error messages, and safe handling for failed requests or usage limits.
10
What this module does not include yet
This is direct AI API integration only. It does not yet use PDFs, company documents, databases, or custom data at answer time.
1
What a PWA is
A Progressive Web App is a website that behaves more like an app through installability, offline support, and a smoother experience on devices.
2
Why PWAs matter
They let users access a website in the browser but also install it like an app without building a full native application first.
3
What makes a site a PWA
A typical PWA needs a valid web app plus a manifest file, service worker, proper icons, and secure delivery over HTTPS.
4
What the manifest file does
The manifest tells the browser the app name, icons, theme, start URL, and how the app should appear when launched.
5
What a service worker does
A service worker helps control caching, offline loading, and some background-style behavior for the app.
6
How installability works
When the right signals are present, the browser can show an install prompt or allow the site to be added to the home screen or desktop.
7
App-like behavior
PWAs can open in standalone mode and reduce visible browser chrome so the interface feels more like a dedicated application.
8
Offline basics
Depending on caching strategy, some pages or assets can still load even when the network is weak or unavailable.
9
PWA icons and branding
Good icons in multiple sizes make the app look polished and trustworthy when installed on a phone or desktop.
10
Limits of PWAs
PWAs are powerful but still differ from fully native apps in some deeper device access and platform-specific behavior.
1
What PWA notifications are
They are alerts sent by a web app that appear like app notifications on a phone or desktop device.
2
Why notifications matter
Notifications help bring users back for updates, reminders, tasks, approvals, messages, or important product events.
3
Difference between web notifications and push notifications
Some notifications happen while the app is active, while push flows can notify users even when the app is not open in the foreground.
4
Notification permission
The browser must ask the user for permission before showing notifications, so notification access is never automatic.
5
The role of the service worker
Service workers are often used to support notification behavior and background logic for installed web apps.
6
When to ask for permission
Permission should be requested after the user sees value, not immediately on page load with no context.
7
Notification content
Good notifications use clear titles, useful messages, icons, and actions so the user knows why the alert matters.
8
Notification timing
Alerts should be timely, relevant, and controlled. Too many irrelevant notifications reduce trust and engagement.
9
User control
Users should be able to manage preferences or disable notifications so the experience respects their choice.
10
Limitations and support
Notification behavior varies by browser and device, so cross-device testing is an important part of implementation.
1
What Electron is
Electron is a framework for building desktop apps using HTML, CSS, and JavaScript and running them as Windows, macOS, or Linux applications.
2
Why convert a website to desktop
It lets you reuse web skills and often reuse existing UI code while packaging the product as a standalone desktop app.
3
What files are usually needed
A basic Electron setup usually includes `package.json`, `main.js`, your web files like `index.html`, and optionally `preload.js` and assets.
4
What package.json does
`package.json` stores project metadata, the app entry, and scripts such as `start`, which tells npm how to launch Electron.
5
What main.js does
`main.js` creates the Electron window and tells it what to load — either a local HTML file or a hosted URL.
6
Local app vs hosted app
Electron can load website files bundled inside the app or wrap a live deployed website inside a desktop shell.
7
Basic setup commands
Common starter commands are `npm init -y`, `npm install electron --save-dev`, then adding a start script and running `npm start`.
8
Useful optional files
`preload.js` can expose safe functionality between Electron and the web app, and app icons improve branding and polish.
9
How packaging works
After local testing, tools like Electron Forge or Electron Builder can package the project into installable desktop builds.
10
When Electron is the right choice
Electron is useful when you want desktop distribution, installer support, local integration, and a stronger app-like delivery model without rewriting everything natively.
1
What RAG means
RAG stands for Retrieval-Augmented Generation, where the AI first retrieves useful information and then generates an answer using it.
2
Why RAG is needed
Normal AI chatbots may not know private or company-specific information, so RAG helps them answer from your own data.
3
What custom data means
Custom data can include PDFs, text files, FAQs, website content, notes, internal documents, or database records.
4
How RAG works in simple form
The user asks a question, the system finds relevant content, and then passes that selected content to the AI along with the question.
5
What retrieval means
Retrieval is the step where the app searches for the most relevant stored information before the model answers.
6
What chunks are
Long documents are split into smaller pieces called chunks so the system can search and match them more accurately.
7
Why embeddings matter
Embeddings help the system understand meaning and similarity so it can find related content even when wording differs.
8
What the AI actually sees
The model usually sees only the retrieved relevant pieces, not the entire database or all documents every time.
9
Why RAG is better than a plain chatbot
It can answer more accurately and specifically because the response is grounded in the company’s own information.
10
Where RAG is useful
RAG is useful for company assistants, internal help systems, SOP support, documentation bots, search tools, and business knowledge interfaces.
What interns will leave with
By the end of the internship, interns should understand how to create websites, deploy them, connect real backend data, design more professional interfaces, add AI features, make web apps installable, wrap them as desktop apps, and understand the basics of AI systems powered by custom data.
Live deployment mindset
GitHub, Vercel, domains, and how software becomes publicly accessible.
Real app logic
Auth, live data, structured interfaces, and product-level UI patterns.
Modern AI features
Basic chatbots first, then a clear understanding of RAG with custom data.
Platform expansion
PWA thinking, notification flow, and Electron-based desktop packaging.