Scribd
Upload
8 views3 pages

Backend - Frontend

The document outlines a comprehensive training program for backend developers to upskill in frontend technologies, specifically React or Angular, and WinForms development. It includes a week-by-week breakdown of topics, resources, and mini projects to build practical skills, culminating in a final project that integrates all learned concepts. Key areas of focus include modern JavaScript, state management, REST API consumption, and deployment options.

Uploaded by

nanthini priya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views3 pages

Backend - Frontend

The document outlines a comprehensive training program for backend developers to upskill in frontend technologies, specifically React or Angular, and WinForms development. It includes a week-by-week breakdown of topics, resources, and mini projects to build practical skills, culminating in a final project that integrates all learned concepts. Key areas of focus include modern JavaScript, state management, REST API consumption, and deployment options.

Uploaded by

nanthini priya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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

You might also like