Full Stack Development (MEAN/MERN) Outline

Course Contents / Lesson Plan

Course Title: Full Stack Development (MEAN/MERN)

Duration: 3 Months

Trainer Name
Author Name  
Course Title Full Stack Development ( MEAN/MERN )
Objectives and Expectations Employable skills and hands-on practice in Full Stack Development ( MEAN/MERN )

This is a special course designed to address unemployment in the youth. The course aims to achieve the above objective through hands on practical training delivery by a team of dedicated professionals having rich market/work experience. This course is therefore not just for developing a theoretical understanding/back ground of the trainees. Contrary to that, it is primarily aimed at equipping the trainees to perform commercially in a market space in independent capacity or as a member of a team.

The course therefore is designed to impart not only technical skills but also soft skills (i.e. interpersonal/communication skills; personal grooming of the trainees etc.) as well as entrepreneurial skills (i.e. marketing skills; free lancing etc.). The course also seeks to inculcate work ethics to foster better citizenship in general and improve the image of Pakistani work force in particular.

Main Expectations:

In short, the course under reference should be delivered by professional instructors in such a robust hands-on manner that the trainees are comfortably able to employ their skills for earning money (through wage/self-employment) at its conclusion.

This course thus clearly goes beyond the domain of the traditional training practices in vogue and underscores an expectation that a market-centric approach will be adopted as the main driving force while delivering it. The instructors should therefore be experienced enough to be able to identify the training needs for the possible market roles available out there. Moreover, they should also know the strengths and weaknesses of each trainee to prepare them for such market roles during/after the training.

 

 

MODULES

Schedu

led Weeks

 Module Title Days Hours Learning Units Home Assignment
Week 1 Create software development lifecycle, SRS and proposal documentation

. Identify and work with well- known CMS (Php+MySql Based – WordPress)

 Day 1 Hour 1 Create SDLC Document  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

·         Task 1

Details may be seen at Annexure-I
Hour 2 Create SRS Document
Hour 3

and 4

 Create Proposal document for the sample project, including scope, features, deliverable and financial requirements.
Day 2 Hour 1 Download and Install
localhost environment
using XAMPP/WAMP for
WordPress (CMS). Run
the basic services (
Apache, Php, Mysql )
Hour 2 Create MySQL database
and user through
XAMPP/WAMP
Phpmyadmin. Connect
user with database and
manage user rights.
Hour 3 Download WordPress
from Official website
(wordpress.org). Upload
WordPress suite on
localhost directory and
install using the wizard.
Hour 4 Install theme and plugins.
Day 3 Hour 1 Manage pages, posts,
widgets, header, footer
and menu.

 

Hour 2 Customize installed theme and plugins.
Hour 3 Optimize and Manage website performance using recommended plugins
Hour 4 Manage website security using recommended plugins
Day 4 Hour 1 Download and Install WooCommere for e commerce functionalities.
Hour 2 Demonstrate the general settings of WooCommerce
Hour 3 Configure payment and shipment modules of WooCommerce.
Hour 4 Configure Woocommerce customer registration, reviews and email settings.
Day 5 Hour 1 Manage product, categories and attributes.
Hour 2 Demonstrate the different types of products.
Hour 3 Demonstrate the Product features related to pricing, shipping and taxes.
Hour 4 Manage WooCommerce inventory

 

Week 2 Install and configure Visual Studio code. Create a basic project in

visual studio.

 Day 1 Hour 1 to 4 Overview of VS Code: Explanation of its features, user interface, and advantages.

Downloading and installing

  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

·         Task 2

Details may be seen at Annexure-I
VS Code on different
operating systems
(Windows, macOS, Linux).
Hour 3 & 4
Day 2 Hour 1 to 4 Walkthrough of the VS
Code interface: Editor
layout, sidebar navigation,
and basic settings.
Basic configurations: Setting up themes, extensions, and keyboard shortcuts for efficient usage.

 

Day 3 Hour 1 to 4  

Step-by-step guide to create a simple project in VS Code (e.g., a basic HTML/CSS webpage or a small JavaScript application).
Day 4 Hour 1 to 4 Explaining file structure, creating files/folders, and using the integrated terminal within VS Code.

 

Day 5 Hour 1 to 4 Live demonstrations on debugging a simple application in VS Code, identifying and fixing basic errors.

Introduction to debugging: Configuring launch configurations, breakpoints, and watching variables.
Week 3 Apply Basic Java Script Methods, conditions, loops and functions in Java Script Day 1 Hour 1 & 2 Overview of JavaScript: Explanation of its role in web development and basic syntax.

Introduction to JavaScript Basics with Setting up VS Code for JavaScript development: Installing necessary extensions and configuring settings

  

 

 

 

 

 

 

 

 

·         Task 3

Details may be seen at Annexure-I
Hour 3 & 4 Setting up VS Code for JavaScript development: Installing necessary extensions and configuring settings.

 

Day 2 Hour 1 & 2 Understanding JavaScript Methods. Explaining basic JavaScript methods (e.g., string, array methods).
Hour 3 & 4 Hands-on practice using methods like .concat(),

.toUpperCase(), .push(), etc., with sample data.
Day 3 Hour 1 & 2 Working with Conditions and Loops. Introduction to JavaScript conditional statements (if, else if, else) and loops (for, while).
Hour 3 & 4 Practical coding exercises applying conditions and loops to solve basic problems.
Day 4 Hour 1 & 2 Functions in JavaScript. Understanding JavaScript functions: Declaration, parameters, return values, and scope.
Hour 3 & 4 Writing functions for different purposes and using them within simple scripts.
Day 5 Hour 1 & 2 Applying JavaScript Concepts in Projects. Integrating learned concepts into small projects or scripts: Combining methods, conditions, loops, and functions.

 

Hour 3 & 4 Practical exercises involving problem-solving and applying JavaScript in real-world scenarios.
Week 4 Setup React JS environment, work with JSX and Apply React JS Components Day 1 Hour 1 & 2 Introduction to React JS. Overview of React JS: Explanation of its role in building user interfaces and its advantages.  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

·         Task 4

Details may be seen at Annexure-I
Hour 3 & 4 Setting up the React environment: Installing Node.js, creating a React project using Create React App, and setting up VS Code for React development.
Day 2 Hour 1 & 2 Understanding JSX in React. Introduction to JSX (JavaScript XML): Understanding JSX syntax and its relation to JavaScript.
Hour 3 & 4 Hands-on practice with JSX elements, attributes, and expressions within React components.
Day 3 Hour 1 & 2 Working with React Components. Explanation of React components: Functional vs. class components, props, and state.
Hour 3 & 4 Practical coding exercises to create and use React components, passing props, and managing state.

 

Day 4 Hour 1 & 2 Advanced React Components and Props. Advanced React component concepts: Lifecycle methods, event handling, and conditional rendering.
Hour 3 & 4 Writing and utilizing advanced components, managing state updates, and passing props dynamically.
Day 5 Hour 1 & 2 Applying React Components in Projects. Integrating learned concepts into small React projects or applications.
Hour 3 & 4 Practical exercises involving the creation of multiple components, managing state, and rendering dynamic content.
Week 5 Identify and apply styling components, and advanced components in React JS Day 1 Hour 1 & 2 Introduction to Styling in React. Overview of styling approaches in React: Inline styles, CSS modules, and CSS-in-JS libraries like styled-components.  

 

 

 

 

 

 

 

·         Task 5

Details may be seen at Annexure-I
Hour 3 & 4 Setting up styling methods in React: Configuring CSS modules or styled- components in a React project within VS Code.
Day 2 Hour 1 & 2 Working with CSS Modules. Understanding CSS Modules: Scoping styles to components, importing and applying

 

CSS classes in React.
Hour 3 & 4 Hands-on practice creating and applying CSS Modules to React components, organizing styles effectively.
Day 3 Hour 1 & 2 Exploring Styled Components. Introduction to styled-components: Syntax, benefits, and usage within React applications.
Hour 3 & 4 Practical coding exercises using styled-components to style React components dynamically.
Day 4 Hour 1 & 2 Implementing Advanced Components with Styling. Advanced React component styling: Exploring conditional styling, dynamic styles, and responsive design techniques.
Hour 3 & 4 Writing advanced components with styled- components or advanced styling approaches, incorporating CSS animations or transitions.
Day 5 Hour 1 & 2 Applying Styling and Advanced Components in Projects. Integrating styling components and advanced component techniques into

larger React projects or

 

applications.
Hour 3 & 4 Practical exercises involving the implementation of complex UIs, responsive design elements, and dynamic styling effects.
Week 6 Apply exceptions and error handling. Apply routers and component life cycle in React.JS Day 1 Hour 1 & 2 Understanding Exceptions and Error Handling in JavaScript. Explanation of exceptions and error handling in JavaScript: Try- catch blocks, throw statements, and handling errors gracefully.  

 

 

 

 

 

 

 

 

 

 

 

 

·         Task 6

Details may be seen at Annexure-I
Hour 3 & 4 Exploring common JavaScript errors and best practices for error handling.
Day 2 Hour 1 & 2 Implementing Error Boundaries in React. Introduction to error boundaries in React: Identifying error boundaries, componentDidCatch method, and error handling strategies.
Hour 3 & 4 Hands-on practice creating and implementing error boundaries in React components.

 

Day 3 Hour 1 & 2 Introduction to React Router. Overview of React Router: Explanation of routing in React, BrowserRouter, Route, Link components, and navigation concepts.
Hour 3 & 4 Practical coding exercises using React Router for basic routing and navigation in a React application.
Day 4 Hour 1 & 2 Advanced Routing Techniques with React Router. Advanced React Router features: Nested routes, route parameters, programmatic navigation, and route guards.
Hour 3 & 4 Writing and implementing advanced routing scenarios using React Router.
Day 5 Hour 1 & 2 Exploring Component Lifecycle in React.

Understanding React component lifecycle methods: Mounting, updating, and unmounting phases.
Hour 3 & 4 Practical exercises demonstrating the use of lifecycle methods for managing state, side effects, and optimizing performance.

 

Week 7 Setup node JS environment and apply basic Node.js components and modules. Work with node Package Manager (NPM) Day 1 Hour 1 & 2 Introduction to Node.js and Environment Setup.

Overview of Node.js: Explanation of its features, server-side capabilities, and use cases.

  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

·         Task 7

Details may be seen at Annexure-I
Hour 3 & 4 Installing Node.js and setting up the development environment in Visual Studio Code (VS Code).
Day 2 Hour 1 & 2 Understanding Basic Node.js Components. Introduction to Node.js modules: Creating, exporting, and importing modules in Node.js.
Hour 3 & 4 Hands-on practice creating simple modules, importing them into other files, and utilizing their functionalities.
Day 3 Hour 1 & 2 Exploring Node.js Core Modules. Overview of Node.js core modules: fs (file system), http, path, etc.
Hour 3 & 4 Practical coding exercises using Node.js core modules for file operations, HTTP server creation, and path manipulation.
Day 4 Hour 1 & 2 Working with Node Package Manager (NPM). Introduction to NPM: Installing packages, managing dependencies, and using NPM scripts.

 

Hour 3 & 4 Hands-on practice installing packages, creating a package.json file, and utilizing NPM commands for package management.
Day 5 Hour 1 & 2 Advanced NPM Features and Publishing Packages. Exploring advanced NPM features: Semantic versioning, package publishing, and updating packages.
Hour 3 & 4 Practical exercises involving publishing a basic package to the NPM registry and managing versions.
Week 8 Create web server using node.js. Work with file server. Debug Node.JS application and work with events in node.js Day 1 Hour 1 & 2 Creating a Basic Web Server with Node.js. Introduction to creating web servers in Node.js: Overview of HTTP module and server creation.  

 

 

 

 

 

 

·         Task 8

Details may be seen at Annexure-I
Hour 3 & 4 Writing a simple Node.js script to create a basic web server, handling requests, and sending responses.
Day 2 Hour 1 & 2 Implementing a File Server in Node.js. Understanding file system operations in Node.js: Reading, writing, and serving files.

 

Hour 3 & 4 Creating a file server using Node.js to handle file requests, read files, and serve them over HTTP.
Day 3 Hour 1 & 2 Debugging Node.js Applications. Introduction to debugging in Node.js: Using console.log, debugging with VS Code, and utilizing the Node.js debugger.
Hour 3 & 4 Practical debugging exercises to troubleshoot and fix basic issues in Node.js applications.
Day 4 Hour 1 & 2 Working with Events in Node.js. Understanding the EventEmitter class and event handling in Node.js.
Hour 3 & 4 Writing code examples involving EventEmitter to emit and listen to events within Node.js applications.
Day 5 Hour 1 & 2 Advanced Event Handling in Node.js. Exploring more complex event-driven patterns and scenarios in Node.js applications.
Hour 3 & 4 Practical exercises

involving the use of events for asynchronous communication and handling multiple events.

 

Week 9 Work with express.JS and with MongoDB Day 1 Hour 1 & 2 Creating a Basic Web Server with Node.js. Introduction to creating web servers in Node.js: Overview of HTTP module and server creation.  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

·         Task 9

Details may be seen at Annexure-I
Hour 3 & 4 Writing a simple Node.js script to create a basic web server, handling requests, and sending responses.
Day 2 Hour 1 & 2 Implementing a File Server in Node.js. Understanding file system operations in Node.js: Reading, writing, and serving files.
Hour 3 & 4 Creating a file server using Node.js to handle file requests, read files, and serve them over HTTP.
Day 3 Hour 1 & 2 Debugging Node.js Applications. Introduction to debugging in Node.js: Using console.log, debugging with VS Code, and utilizing the Node.js debugger.
Hour 3 & 4 Practical debugging exercises to troubleshoot and fix basic issues in Node.js applications.
Day 4 Hour 1 & 2 Working with Events in Node.js. Understanding the EventEmitter class and event handling in Node.js.

 

Hour 3 & 4 Writing code examples involving EventEmitter to emit and listen to events within Node.js applications.
Day 5 Hour 1 & 2 Advanced Event Handling in Node.js. Exploring more complex event-driven patterns and scenarios in Node.js applications.
Hour 3 & 4 Practical exercises involving the use of events for asynchronous communication and handling multiple events.
Week 10 Perform QA and Application Deployment Day 1 Hour 1 & 2 Introduction to Quality Assurance (QA). Overview of QA: Understanding the importance of QA in software development. ·         Task 10

Details may be seen at Annexure-I
Hour 3 & 4 Explaining different types of testing: Unit testing, integration testing, system testing, etc.
Day 2 Hour 1 & 2 Implementing Testing Strategies. Introduction to testing frameworks/tools: Jest, Mocha, Selenium, etc.
Hour 3 & 4 Hands-on practice writing and executing basic test cases for applications using selected testing frameworks.

 

Day 3 Hour 1 & 2 Understanding Continuous Integration/Continuous Deployment (CI/CD).

Overview of CI/CD pipelines: Understanding automated testing, building, and deployment processes.
Hour 3 & 4 Setting up a basic CI/CD pipeline using tools like Jenkins, GitLab CI/CD, or GitHub Actions.
Day 4 Hour 1 & 2 Performing End-to-End Testing. Exploring end-to- end testing: Writing automated tests for complete application flows.
Hour 3 & 4 Practical exercises performing end-to-end testing for an application, covering user scenarios and functionalities.
Day 5 Hour 1 & 2 Application Deployment Strategies. Introduction to deployment strategies: Blue-green deployment, canary deployment, rolling updates, etc.
Hour 3 & 4 Deploying an application to a cloud platform (e.g., AWS, Heroku) using selected deployment strategies.

 

Week 11 Capstone Project Day 1 Hour 1 to 4 Project Planning and Ideation

Overview of Capstone Project: Explanation of expectations, scope, and deliverables.

Discussing project ideas, brainstorming, and selecting a suitable project topic.

 ·         Task 11

 

Details may be seen at Annexure-I
Day 2 Hour 1 to 4 Project Design and Documentation

Creating project design documents: Project scope, requirements, wireframes, and mockups.

Drafting a detailed project plan, including timelines, milestones, and task allocation.
Day 3 Hour 1 to 4 Development Phase – Part 1

Commencement of project development: Setting up the project environment, initializing the codebase, and working on essential functionalities.

 

Day 4 Hour 1 to 4 Development Phase – Part 2

Continuing with the project development: Implementing core features, functionalities, and integrating necessary APIs or services.
Day 5 Hour 1 to 4 Finalizing and Presentation Preparation

Finalizing the Capstone Project: Conducting testing, debugging, and refining the project.

Preparing the project presentation: Compiling project documentation, creating slides, and rehearsing the presentation.

 

Week 12 Create Freelancing Proficiency on Digital Platforms Day 1 Hour 1 to 4 Introduction to Freelancing on Digital Platforms

Overview of digital freelancing: Explanation of various platforms (Upwork, Fiverr, Freelancer, etc.), types of projects available, and skill requirements.

Understanding the benefits, challenges, and strategies for success in the digital freelancing landscape.

 ·         Task 12

 

Details may be seen at Annexure-I
Day 2 Hour 1 to 4 Profile Creation and Optimization

Guide on setting up an effective freelancer profile: Creating a compelling bio, selecting skills, showcasing portfolios, and highlighting expertise.

Optimizing profiles on popular freelancing platforms with relevant keywords and best practices.
Day 3 Hour 1 to 4 Understanding Client Communication and Proposals

Exploring effective client communication: Strategies for professional interaction, understanding client needs, and crafting compelling proposals.

Conducting role plays or mock scenarios to practice effective communication and proposal writing.

 

Day 4 Hour 1 to 4 Project Management and Time Tracking Tools

Introduction to project management tools (Trello, Asana) and time tracking software (Toggl, Harvest).

Practical exercises on managing freelance projects, organizing tasks, and tracking time spent on different projects.
Day 5 Hour 1 to 4 Finances, Contracts, and Building Reputation

Understanding financial aspects: Setting rates, creating contracts, invoicing, and managing payments as a freelancer.

Strategies for building a positive reputation, securing reviews, and handling feedback on digital freelancing platforms.

 

Tasks for Certificate in Full Stack Developer ( MEAN/MERN )

 

Task No. Task Description Week
 

 

1.

 Create software development lifecycle documentation.

Identify and work with well-known CMS (Php+MySql Based –

WordPress)

  

Develop documentation outlining software development lifecycle phases and explore prominent PHP+MySQL-based CMS, such as WordPress, for practical application.

  

 

Week 1
 

2.

 Install and configure Visual Studio code. Create a basic project in visual studio. Set up Visual Studio Code environment, then initiate a fundamental project within the platform for practical learning purposes.  

Week 2
 

3.

 Apply Basic Java Script Methods, conditions, loops and functions in Java Script. Utilize essential JavaScript functionalities encompassing methods, conditions, loops, and functions for practical application and understanding.  

Week 3
 

4.

 Setup React JS environment, work with JSX and Apply React JS

Components

 Establish React JS environment, employ JSX syntax, and implement React components for practical learning and application purposes.  

Week 4
 

5.

 Identify and apply styling components, and advanced components in React JS Recognize and implement styling components alongside advanced components within React JS for practical implementation and advanced understanding.  

Week 5
 

6.

 Apply exceptions and error handling. Apply routers and component life cycle

in React.JS

 Implement error handling, incorporate routers, and manage component lifecycle in React.js to ensure robustness and efficient functionality of applications.  

Week 6
 

 

7.

 Setup node JS environment and apply basic Node.js components and modules. Work with node Package Manager (NPM) Establish Node.js environment, utilize fundamental Node.js components/modules, and operate with Node Package Manager (NPM) for practical application and understanding in development.  

 

Week 7

 

 

 

8.

 Create web server using node.js Work with file server. Debug Node.JS application and work with events

in node.js

 Develop a web server in Node.js, manage a file server, debug Node.js applications, and handle events within Node.js for enhanced application functionality and error resolution.  

 

Week 8
 

 

9.

 Work with express.JS and with MongoDB Utilize Express.js framework in conjunction with MongoDB database for building robust and efficient applications, leveraging Express.js for server-side functionalities and MongoDB for data storage and retrieval.  

 

Week 9
 

10.

 Perform QA and Application Deployment Execute Quality Assurance (QA) procedures and implement Application Deployment methodologies for ensuring software reliability and successful

deployment in production environments.

  

Week 10
 

11.

 Capstone Project Undertake and finalize a comprehensive Capstone Project, applying acquired skills and knowledge to create a significant, culminating piece of work in the learning journey.  

Week 11
 

12.

 Create Freelancing Proficiency on Digital Platforms Develop proficiency in digital freelancing by covering profile optimization, client communication, project management tools, financial aspects, and reputation building on popular platforms in a week-long course.  

Week 12

 

Quick Inquiry