Course Details
Course Details
What You'll Learn
Topic 1: Build a React Web App Using Vibe Coding
Topic 2: Deploy Your React Web App to the Cloud
Topic 3: Improving Your App by Learning Core React Concepts
Topic 4: React Hooks (The Vibe Way)
Topic 5: Integrating APIs and Data into Your React App
Topic 6: React Router for Real App Navigation
Course Info
Minimum Entry Requirement
Knowledge and Skills
- Able to operate using computer functions
- Minimum 3 GCE ‘O’ Levels Passes including English or WPL Level 5 (Average of Reading, Listening, Speaking & Writing Scores)
Attitude
- Positive Learning Attitude
- Enthusiastic Learner
Experience
- Minimum of 1 year of working experience.
Target Age Group: 18-65 years old
Minimum Software/Hardware Requirement
You will need the following for this course:
- Node.js (LTS) – free
- Visual Studio Code – free
- An AI coding assistant with a free tier, e.g. GitHub Copilot Free in Visual Studio Code
Install and test the listed software before class. Confirm the required version and account or licence access in your joining instructions. Cloud and AI services may charge subscription or usage fees.
Also prepare the tools needed for the practical exercises:
Confirm the version, account permissions and any API usage budget with the trainer before class.
Bring a Windows or Mac laptop supported by the listed software, with a working keyboard and sufficient storage for course exercises.
Bring your own computer and charger, with a reliable internet connection and permission to install the required software. For live online classes, also prepare a microphone or headset.
If you need help arranging a suitable device, contact us before the class to confirm availability.
Job Roles
Job Roles
- Front-End Developer
- React Developer
- Web Developer
- UI Engineer
- Full Stack Developer (with a front-end focus)
- Mobile App Developer (using React Native)
- Web Application Developer
- Software Engineer (transitioning to front-end)
- Web Designer (looking to add coding skills)
- UX Designer (wanting to prototype with React)
- JavaScript Developer
- Interactive Developer
- E-commerce Front-End Developer
- Product Developer (web-based products)
- Technical Team Lead (overseeing UI development).
Trainers
Trainers
Dr. Muhammed Siraj is a cybersecurity specialist and academic with 15 years of experience, serving as Senior Lecturer in the Department of Informatics and Director of Graduate and Continuous Education at Academic City University in Accra. He holds a PhD in Security in Computing from Universiti Putra Malaysia, where his research focused on blockchain security, an MSc in Information and Communication Technology from Aalborg University in Denmark, and a degree from the University of Ghana. He is a licensed independent assessor with Ghana's Cyber Security Authority, holds leadership roles in national cybersecurity and privacy professional bodies, and is certified as a Certified Ethical Hacker (CEH), Computer Hacking Forensic Investigator (CHFI) and Certified Data Protection Supervisor (CDPS). Before joining Academic City, he served as Acting Director of ICT and Data Protection Supervisor at Wisconsin International University College. His expertise spans penetration testing, digital forensics, incident response, malware analysis, cryptography, cloud and IoT security, zero trust architecture, cyber threat intelligence, data protection, and governance, risk and compliance.
Dr. Siraj's research interests cover blockchain, cybersecurity, distributed computing, consensus protocols and machine learning, with published work on blockchain consensus security, smart-contract privacy preservation for sensitive records in the cloud, and new consensus mechanisms. This background gives him a distinctive perspective on artificial intelligence: as organisations adopt AI tools, agents and data-driven automation, he helps learners understand how to protect the data these systems depend on, recognise new attack surfaces, and put sound governance, privacy and access controls in place so that AI can be used safely and responsibly. In the classroom he connects technical practice with regulation, privacy and human factors, drawing on real-world security and data-protection cases to show how concepts apply in professional settings, and his experiential, hands-on teaching style has made him a trusted trainer for students and working professionals alike.
As Chief Technology Officer of Tertiary Infotech Academy Pte Ltd, the Singapore training organisation behind Tertiary Courses, Dr. Alfred Ang works daily as a full-stack AI developer, Agentic AI solution architect and corporate trainer. A large share of that work is modern JavaScript front-end development delivered with AI coding assistants. Dr. Ang's portfolio includes a full-stack fitness platform with a React, TypeScript, Tailwind and Vite client talking to an Express and Prisma API on PostgreSQL, complete with a member class calendar, an admin dashboard and social login. Another project is a marketplace for verified local tour guides across several Asian countries, built with React, Vite and Tailwind on an Express and PostgreSQL back end and deployed to the cloud with Coolify. Further React-based work includes a developer portal for exploring government training APIs through a React front end and Express server, and a browser-based playground that generates AR and VR scenes from natural-language vibe prompts. Dr. Ang also builds with Next.js, including an AI-powered content management system and a mobile-first digital business card platform with a built-in CRM. With more than 300 public repositories on GitHub covering front end, back end, databases, cloud deployment and native iOS and Android apps, Dr. Ang has repeatedly taken React applications from a first AI-generated scaffold through to a deployed product that real users rely on. Several of these React projects were scaffolded with AI assistants in an afternoon and then refined over many iterations, so Dr. Ang knows both the speed and the pitfalls of the approach.
In AI Vibe Coding for React Development, Dr. Ang applies exactly that workflow. Learners start by describing an application in plain language and letting an AI assistant scaffold a working React web app, then deploy it to the cloud early so that every later improvement is visible on a live URL. From there the course deliberately slows down to build genuine understanding: participants study the core React concepts behind the generated code, learn how components, props and state fit together, and work through React hooks in a vibe-coding style that pairs AI suggestions with clear explanations of useState, useEffect and custom hooks. The later topics cover integrating external APIs and data, handling loading and error states, and adding React Router so the app gains real multi-page navigation. Dr. Ang's teaching style is hands-on and candid about the limits of AI output; drawing on experience shipping React projects, Dr. Ang shows learners how to read and question generated code, spot fragile patterns and prompt for cleaner structure rather than accepting the first answer. Beginners gain confidence quickly, while intermediate learners deepen the fundamentals that make AI-assisted development reliable. By the end, each participant has a deployed, portfolio-ready React application and the habits to keep extending it independently. Practical deployment habits are covered as well, such as managing environment variables safely, reading build errors and redeploying quickly, so learners can keep their apps running after the class ends. To browse the React and full-stack projects behind this course, visit https://github.com/alfredang.
Review
Customer Reviews (10)
- Very useful course Review by Course Participant/Trainee
-
The trainer was knowledgeable and explained the concepts clearly with real-world examples. (Posted on 6/24/2024)1. Do you find the course meet your expectation? 2. Do you find the trainer knowledgeable in this subject? 3. How do you find the training environment - Very informative Review by Course Participant/Trainee
-
The training was very practical and hands-on. I could apply what I learned to my work immediately. (Posted on 6/11/2024)1. Do you find the course meet your expectation? 2. Do you find the trainer knowledgeable in this subject? 3. How do you find the training environment - Superb training Review by Course Participant/Trainee
-
The trainer was knowledgeable and explained the concepts clearly with real-world examples. (Posted on 3/13/2024)1. Do you find the course meet your expectation? 2. Do you find the trainer knowledgeable in this subject? 3. How do you find the training environment - Clear and easy to follow Review by Course Participant/Trainee
-
Good hands-on training with plenty of examples. I feel much more confident applying these skills now. (Posted on 1/21/2024)1. Do you find the course meet your expectation? 2. Do you find the trainer knowledgeable in this subject? 3. How do you find the training environment - Worth every cent Review by Course Participant/Trainee
-
The course materials were detailed and easy to reference afterwards. Great value for money. (Posted on 1/7/2024)1. Do you find the course meet your expectation? 2. Do you find the trainer knowledgeable in this subject? 3. How do you find the training environment
Write Your Own Review
- Recommended Courses