Combined backend and frontend on Github

We have been taught about updating separated repository, for backend, and frontend, on Github, for various reasons such as better deployment, and better control broken codes.
In some instances where you have to update both you backend and frontend on the same repository, like me, some people which first time experience might caught off guard since Github will not show the file, you and other people can't review your code, something like this:

Github probably changed its designs hence the folder might just look grayed out, or lighter color, indicating that you cannot open it on github.

So, how do you fix this issue? You will probably need to use gitignore so that Github will not interpret your files as submodule. Let's say, for my project named transmission, I have a folder called transmission, with the two subfolder for frontend and backend. Called transmission-ruby (backend), and transmission-react (frontend). Organized like this:

---tranmission | |---tranmission-ruby | |---tranmission-react 

Here, both files have different languages, with node_module folders, so how does Github supposed to know which one to ignore without you telling it specifically?

The solution

On the root folder, transmission, add a .gitignore file.
And then for each gitignore lines that you do in a normal repo, add the names of your subfolder before it, like this, for my example:

 # dependencies transmission-react/node_modules transmission-react/.pnp transmission-react/.pnp.js # testing transmission-react/coverage # production transmission-react//build # misc transmission-react/.DS_Store transmission-react/.env.local transmission-react/.env.development.local transmission-react/.env.test.local transmission-react/.env.production.local transmission-react/npm-debug.log* transmission-react/yarn-debug.log* transmission-react/yarn-error.log* # Ignore bundler config. transmission-ruby/.bundle # Ignore all logfiles and tempfiles. transmission-ruby/log/* transmission-ruby/tmp/* transmission-ruby!/log/.keep transmission-ruby!/tmp/.keep # Ignore uploaded files in development. transmission-ruby/storage/* transmission-ruby!/storage/.keep transmission-ruby.byebug_history # Ignore master key for decrypting credentials and more. transmission-ruby/config/master.key 

Okay, now we got the gitignore file to warn github about what to not push (since we have files such as Node Module on both subfolders), the next step is to delete the .git folder inside both of your subfolders, leave the .git folder at the root alone.
The process will be a little odd, because when command

 you won't see .git folder, but they are there, not just one but maybe many. You can google how to delete a .git folder. Push on Github and now you will be able to open both folders.