We Keep Coding

How to create a template creator with moveable objects?

Good day,
I am currently working on an automatic system that generates invoices with data that it receives from an API. I am currently doing this with Django (Python) to create some variation. Well, I want to create a system with which you can easily create templates for these invoices. You have seen these kinds of systems before. You can move blocks with items such as a logo or text wherever you want. Well I know that these templates are further stored as HTML. Only nowhere I can find clear information about how I can easily assemble such a system or how such a system works. Below I show a GIF of the system what I want. If anyone has any information on this I will be very happy if you can share that with me :)

Only nowhere I can find clear information about how I can easily assemble such a system
Yes, because making such a system is not an easy feat. You shouldn't do it yourself unless you know what you're doing and you are ready to deal with a lot of edge cases.
That being said, there are libraries that enable you to create such interfaces. One being https://interactjs.io/ (not affiliated with them). Then you need a WYSIWYG/Markdown editor that can be enabled on click as a tooltip. For example, https://www.tiny.cloud/
Then you need to find a way to save and load everything. Depending on the library you use, you might be able to get away saving and loading the HTML. However, it's more likely you'll need to implement a proprietary way of saving data. For example, using JSON or XML.
Best of luck!

Create formattable text box on website using javascript/react

I'm trying to make a website where my friends and I can colaboratively write a story. My first problem is figuring out how to create a text box on the website where a user can just write, with with the ability to do some basic formatting, such as tabs and italics. I'm having trouble finding information on how best to create and save that kind of text. I'm using Javascript and React to create this website, and probably a NoSQL database to hold the various entries. Any pointers in the right direction would be appreciated.

I would suggest just using a pre-existing library for a simple WHYSIWYG editor such as Draft.js (has react support and maintained by facebook) . Note with any library you pick you will need be careful with how you are storing and rendering user input, don't want to open yourself up to any XSS attacks. If you want to roll your own for the fun of it then you will need to store state I'd look into the object draft.js stores to handle this
Another issue you are going to run into is the collaboration part. You will need some kind of procedure for handling this. Google docs uses this Operational Transformation. You'll also probably want to look into websockets for handling all this realtime.

Programmatically Create New HTML Page based on Template and User Input

I am working on a project/idea, my use case is for my significant other's blog/craft/recipe website. I want to create a personalized service that uses Firebase to host, and I want people (like my significant other) who have no coding/html/firebase experience to be able to upload new pages when they please (this will be done on the backend with firebase's hosting API, and on the front end with a customized UI and form).
I have most of this worked out, but I have a remaining question that I have been unable to find a direct answer on:
What is the best way to create a new html file, based on a template, just with new information gathered from the above mentioned form?
For instance: Given a recipe website, where each recipe has its own page and route. The form above would, theoretically gather all information needed to name this page, and gather all information needed to add to this page to make it complete.
I would imagine that I would need to have a template html page and copy then add information to it, upload and serve via Firebase API, etc.
Is there a specific templating engine that assists with this already? I am having a hard time trying to extend the existing templating engines that I know about into this use case.
TL;DR - I know this is a long-winded question, but in the end, I am looking for the best, most efficient way to programmatically create a new HTML file that will be based off of a given template, add custom information, and upload/serve via the firebase API - using Node/Google Cloud Functions, of course.
I do NOT need any code written for me, just looking to be pointed in the right direction, as I have been researching this for about a month prior to asking here, and this has been my last resort - I am just frustrated because I know there is a way to do this, but have been unable to find what I need.

How to create a Google Drive-like directory?

I am working on a project which requires form input and utilizes that input to add documents to a document directory. On the other hand, we want the input sent through the form to be sent through a server as an HTTP request to some back-end code such as python, Java, or C++. The application would execute and return outputs of the data associated with the input. Some sample images are provided below.
(The plus opens up a modal box with an associated input form.)
Additionally, we want to add functionality so that the right side-bar displays the statistics of the most recent clicked on the document (provided by the back-end code sent through the server). I think that I will have to use some sort of database such as mySQL, but how does that fit with the application-side programming (python/Java/C++)? Overall, we are having major issues implementing this. Any recommendations as to how to implement this as well as concepts relating to how Google Drive (a similar mechanism and framework) operates would be of help. If there any questions, I am happy to respond!

Create a plugin to add my website functionalities on another website

I have a website A with a database and a search engine of some object, user can create account on my website then add comment for these objects.
I need to create an api with something like a plugin, it will result on having the seach engine on another website B.
I have planned to do like fb or twitter plugins : the dev who want to use my api will just need to add a line of js, and a line of html on website B, then it will load the plugin. But I'm wondering how to organize it.
Here it what I've guessed : I create a page on my website A, put the search engin on it. I create a js that will load this page whithin an iframe, on the dev's page (website B), under the div he added to have my plugin. Then I implement OAuth 2 (with a provider and so, so people can do post requests to alter my db), and people who is one the website B will have the ability to post comment on the objects of the search engine on website B.
Actually it seems to be the same as fb comment plugin process, but it seem too complicated to do all that stuff. Is it the right way? Can anyone detail the problems that I should face during implementation?

You need to develop a decent API which can return search result in JSON (and XML if you want to please everyone). That already would offer other developer the ability to use your site functionalities, that's mostly back end work tho. So they can develop their own widget.
To develop your own widget as a search widget you don't need that much, you just need either a set target (maybe a required element) or/and an initialization method (more flexibility for the dev) to which you pass a target.
Bind the search button, grab terms search, call your API and when you get your result display them or/and execute a custom callback pass the result as an argument, flexibility)
If you do your javascript well you can create a little API there too which facilitate the usage of your API via javascript. And then even easily port it to a jQuery plugin or something similar.
When serving JSON always remember to set your headers for your API to allow for crossdomain or go for jsonp instead.

Your question implies an architectural direction, but the requirements are too broad for such a choice. I would narrow down your requirements first. OAuth 2.0 could potentially help satisfy your needs, but ask yourself at least the following:
What user data needs to be protected?
What 3rd-party data access is needed? What functionality?
If you go with OAuth 2.0, are you prepared to follow a spec which is still changing? Are you willing to be the authentication provider?
What server-side languages/platforms are acceptable?
What other security considerations are important to you? (Such as social sharing, level of 3rd-party app trust...)
How much are you willing to rely on 3rd-party tools? Or write your own?
I agree that modeling your design off FB or Twitter or Google is not a bad idea, as they have done this sort of thing.
You might have a look at the new book Getting Started with OAuth 2.0.

Here are two simple ways of making custom search available to users.
The simplest option is to do what Google does - the search on your site would follow a simple, well defined API - so that
www.mysite.com/search?q=keyword1+keyword2
returns a list of results in HTML.
Then you'd tell your users to include a snippet of HTML:
<form action="http://www.mysite.com/search" method="get">
<input name="q" type="text" value="Search">
</form>
That would do, though at this juncture you may want to improve things with better search options, a javascript wrapper for the search form, a JSON or XML format for the data returned, security, a better worked out API that takes all these into account.
Another way is to use javascript and provide the data with a callback facility, so the URL:
www.mysite.com/js-search?q=keyword1+keyword2&callback=someHandle
will return a javascript file containing JSON data and a call to "someHandle" when it is loaded. The developer using your API have to write their own way of making the request and the handler. Bear in mind that because of XSS, the queries would probably come from your partners' servers. The simplest is probably to make your own search offer simple and well-documented so others can exploit it.

OAuth 2 could be helpful just if you would allow the website B to make POST request to the website A in background.
Instead if you want allow the users that visit the website B to post a comment then the iframe with a form that point to the website A is enough.

The easier bet, yet not necessarily the wisest, is to create some JS which calls on your website using JSONP.
iFrames are not W3C standard, try avoiding them if possible. Code a Javascript with some events that will do some JSONP calls into your own server and return the results in Javascript accordingly, so it would be able to interact with the page.