Final Project [Nodes & 3D], What should i use?

I'm a Computer Science students who needs to complete his final project and i'm kinda overwhelmed about the amount of options available in Web Development (Which is something good but also gets you lost).

My final projects has to be a complete application so i need to develop both the backend and the frontend.

General Functionality

Cloud (FTP), everything is stored in a private FTP when the user logs into the app all of his projects are there and he can open them.
Security measures, tokens, check that the user exist in the database and has a proper license to use it.
Sessions, if you reload it should return to where you left it (Persistence).
Multiple clients at the same time.
Mongo DB
Async / sync
Maybe payments

I've been a C# developer for about 3 years now and i never really learned JS (a took a few courses at college), however I'm experienced in CSS & HTML as i love to design UIs.

Briefly, my project is a port of other project written in C# and WPF, consinst in an app that has 3-4 screens (steps):

Screen 1 (Node Editor)

A diagram/visio like application but far more simpler, i have 6 types of nodes, every node has a different representation in the program and different properties (these are not properties of the visual node but the object they represent).

As you can see in this image:

http://ift.tt/2qnNXTA

The basic functionality should be :

Zoom & Pan
Copy & Paste
Undo & Redo
Custom Nodes UI
A properties panel where you can edit them once a node is selected (or button is clicked) http://ift.tt/2m2BrnZ
Auto saving / Save to JSON
Connection compatibility (For example, Type A cannot connect to Type D)
Bezier lines for the connections

It should be able to detect a complete path that exist when A-B-C-D-E-F-G are connected, if there are multiple Type A nodes, it should detect as many complete paths as type A nodes exist.

http://ift.tt/2qryUrY

Screen 2 (Layout Editor)

Simple drawing tool that has a pallet in the center and you add products (for example boxes) in 2D or if possible in 3D.

http://ift.tt/2m0nXZS

Tha basic functionality should be :

Add boxes with the height and width that you selected in the first step.
Collision detection when a box is moved inside the bounds of another.
Multiple layers with different layouts
Zoom & Pan
Copy & Paste
Undo & Redo
Rotation
Save (Everything, Layers, Boxes, Positions...)

Boxes grouping and change of color

Possibility of limiting the drag area and only allow boxes inside the bounds of the pallet.

Send all the information in JSON format to the API and recieve the best layout for the pallet (You send the kind of box you are using and you recieve how many boxes fit in the pallet, their position and rotation, API written as a C# Web Service but would like to port it to the backend, maybe ¿GraphQL?).

Screen 3 (Code Editor)

Once you complete the first 2 steps you will send all the information from the Node Editor and the Layout Editor to the API where the core will return the right code for your configuration.

I think this is somehow the simplest screen because i will use Monaco Editor by Microsoft and load the data recieved in JSON format (However i need to implement syntax recognition etc...).

Screen 4 (Download)

Download the code generated by Code Editor in textfile format.

I've been searching for information for the last month and im incredibly overwhelmed about the amount of frameworks, languages, technologies and libraries.

So far i found :

Diagram/Flowcharts/Nodes Libraries

Raphael JS
Joint JS
Draw2d
FabricJS
JSPlumb
MXGraph
D3 Nodes
P5 JS
GraphicsJS

3D Library

ThreeJS

Code Editor

Monaco

My main concern is really about how to use libraries in a real project or which one is the best, for example after learning about stacks, i think that i need :

Backend

Express
Node
Mongo DB

Should i use anything else?

Frontend

Since i'm experienced in C# people have told to develop the app in Typescript however i dont really know how to interact with it and libraries and how to put everything together.

should i use a frontend framework like Vue (since its learning curve is lower that Angular or React for what ive read)
should i stick to vanilla javascript?
if i choose vue, how is it works with typescript and other libraries?
How do you implement a model (Type A node has this 5 properties, Type B has this 4 properties, compatibilities etc)
Do i need to use webpack?
How do you structure a WebApp? In C# you have models, views, utilities...

As you can see im really lost but ive been searching and reading a lot, i just need somebody who can point me a few tips or help me understand things.

Thank you so much and i hope you can help me.