BackEnd developer (C#,VB,Node) Upskill Frontend
(React/Angular),Winforms
Week Topic Resources Link
Modern JavaScript (ES6+): https://javascript.info/
let/const, arrow functions, https://www.freecodecamp.org/l
promises, async/await earn/responsive-web-design/
https://roadmap.sh/frontend
HTML5 & CSS3 essentials
refresher
Frontend
Basics Introduction to frontend
Refresher & frameworks: React and
JavaScript Angular overview
1 Essentials
Mini Project:
Task 1:
Build a static multi-page website with HTML/CSS and vanilla JS (e.g., portfolio or
product landing page)
Task 2:
2 React: Components, JSX, https://reactjs.org/tutorial/tutori
props, state, lifecycle al.html
https://angular.io/tutorial
Angular: Components, https://www.youtube.com/watch
modules, templates, data ?v=w7ejDZ8SWv8
React binding (alternative track) https://www.youtube.com/watch
Fundamentals ?v=2OHbjep_WjQ
(or Angular
Basics -
choose one)
Mini Project:
Task 1
Build a simple To-Do app with React or Angular
Task 2:
React: Hooks, Context API, https://reactjs.org/docs/hooks-
Router intro.html
https://redux.js.org/tutorials/ess
Angular: Services, entials/part-1-overview-
3 Advanced Dependency Injection, Routing concepts
Frontend https://ngrx.io/docs
Concepts & State management
State introduction (Redux for React,
Management NgRx for Angular)
Mini Project:
Task 1:
Extend To-Do app with routing and global state management
Task 2:
REST API consumption using https://developer.mozilla.org/en-
fetch/axios US/docs/Web/API/Fetch_API/Usi
ng_Fetch
Handling async data, error
handling, loading states https://github.com/axios/axios
Connecting CORS basics and https://www.freecodecamp.org/
Frontend with troubleshooting news/react-fetch-data/
4 Backend APIs
Mini Project:
Task 1:
Connect frontend To-Do app to a simple backend API (can use public API or mock
backend)
WinForms basics: Project https://www.youtube.com/watch
setup, controls, event handling ?v=5Dm8kXii7zU
https://learn.microsoft.com/en-
Introduction to Designing simple desktop UI us/visualstudio/ide/create-
WinForms with Visual Studio. csharp-winform-visual-
5 Development studio?view=vs-2022
Handling user inputs and data https://www.guru99.com/c-
binding basics sharp-windows-forms-
application.html
Mini Project:
Build a simple contact manager desktop app with CRUD operations in WinForms
WinForms advanced controls https://www.youtube.com/playli
and UI st?list=PL6n9fhu94yhUbctIoxoVT
Advanced enhancementsConnecting rklN3LMwTCmd
WinForms & WinForms app to backend https://www.c-
6 Backend APIs (C# Web API or Node.js) sharpcorner.com/article/how-to-
Integration Error handling and call-rest-api-in-c-sharp/
asynchronous calls in
WinForms
7 Fullstack Integrating frontend, backend, https://learn.microsoft.com/en-
Integration & and WinForms desktop app us/azure/app-service/quickstart-
Deployment Introduction to deployment dotnetcore
Basics options (Azure App Service, https://docs.docker.com/get-
Docker basics) started/
Version control with https://lab.github.com/
Git/GitHub
Mini Project: Deploy backend API and
frontend app to free cloud
service (Azure free tier or
Netlify for frontend)
Connect deployed apps with
WinForms client
8 Final Project Real-Time Fullstack Application
rontend: React or Angular app
Backend: C# (.NET Core) or Node.js API
Desktop client: WinForms app
Features: User authentication (optional), CRUD operations, API
integration, responsive UI
Deliverables:
Source code with documentation
Deployed frontend and backend apps (links)
Demo presentation with walkthrough
