Changes in real time with react, express, node mongodb/postgress - reactjs

in the last few months i've done some MERN projects, and i found something that really bothered me, not because i didn't know what was that thing, but because it's something i've never heard about.
What i'm trying to say, is that, every project i did, i can not see the changes in real time, for example, i did a facebook clone, where you register and post stuff, and you can see how things change in your pc, changes in real tme in your pc, but, if i try to see those changes from another pc, i can't i have to update the page with f5 to see those results
what do i have to learn to make my big apps, like the facebook clone, to make everything in real time, like facebook, whatsapp, instagram, twitter do ?

I am not sure what Facebook, Whatsapp, Instagram, etc. use but as far as real time updates is concerned, you need to learn Websockets or Socket.io. You can also opt for services like Firebase that offer services that provide real time updates. Twilio is also another one that offers such services. But if you want to build it on your own, then you need Websockets.
I am not sure about Facebook but Whatsapp and any other messenger or chat services probably use sockets under the hood.
Look at this list of open source clones and some of the projects use the MERN stack along with socket.io just in case it helps: https://gourav.io/clone-wars . I looked through that list and found this one that may be helpful: https://github.com/Sandermoen/instaclone
I am personally taking a course on Udemy by Robert Bunch that is completely on socket.io.

Related

How to give support of switch to old website from updated one?

I am little bit in confusion about this mechanism. Not sure this is the right way or platform to ask this, but might be I can get some idea at least.
I am working on a web app which has been already live for a long time. I have redesigned whole app with frontend technology of ReactJS and backed in spring boot. As the existing old web app (live web-app) is written in Spring MVC with bootstrap support and which is outdated. Now, we are done with the updated app code, and we are ready to make it live.
Is there any way to give user flexibility to use both web app at same time? Like existing web app which they are using and there will be one button or option from where they can able to get updated UI/UX. And the same thing If they are not feeling well with the new UI/UX they can switch back to old/existing web app.
It is little bit similar like Facebook did a time ago where they give option to "Switch back to classic".
For now, I have one idea in mind to give this support based on subdomain, but not sure is that a good way or technical feasible or not.

Handling a lot of screens in react native

I'm building a online learning platform with react native, and i have a problem.
The learning platform i am going to build has over 200 video's, how am i going to manage that? do i need to make 200 screens and navigate to them or are there reusable screens were i can send props to?
There is also a user authentication in the app with different levels of permission, some lessons are locked for some users and some are free to watch.
i already tried to make a few screens but i think there is a better way.
Of course there is a better way. You can make a screen that is free to use without authentication and another one that requires authentication to be used.
After that you can send the array of videos with different id in them, by using the id's in the url.
Being a beginner may be it's becoming difficult for you to understand, so I will recommend you to watch some online tutorial from YouTube where the instructor is sending products to different screens of an e-commerce store.
You will definitely get the idea on how to implement your system from there.

React Native Music Database MP3

Hi everyone I'm in need of some help here with React Native &/or Expo.
The brief version: I built the UI for a streaming app idea of mine. My problem now is finding a way to add content on it!
How can I add music files or MP3 & Videos on React Native (preferably Expo)?
Is there such free database out there or would I have to build something to pass the data to the app itself?
The long version: I had an idea to build a Hybrid Streaming App including music, videos and live events. Now this is my first time building an app ever. I managed to get the UI done in 4 months.
Again I've never done this before so don't crucify me. I managed to use flatlist to create categories which represent: music, videos, podcast, and live events. In those flatlist I passed data which are the artist, image, album & more. I even was able to create a player screen and actually play some random audio file using "Expo-av" using a link. Right now, I'm stuck and still trying to find a way to get an actual library on the app while also figuring out how to pass data from one thing to the next. PLEASE HELP
I'm not sure if there's a good white-label service that would provide metadata and streaming audio/video. Something like MusicBrainz offers an API for metadata, but I don't think they provide audio. There may be companies out there that offer what you're looking for, as I understand it, but licensing for major label music is notoriously thorny, so there may not be a ton of companies that give you drop-in access to something like Spotify's library. If you want people to upload media, you can use something like AWS Amplify to integrate a backend without having to do a lot of devops work.

Can I connect a gatsby website with a salesforce product order system?

I have a client who needs a website for their restaurant done and I started work on it with Gatsby. I was however later informed that the client has a salsforce backend through which they offer functionality in which users can make an order online.
Now my questions is, is Gatsby still a good framework to work with? Will I run into any issues integrating salesforce into the website? Im a little worried as I know gatsby is famous for being a great static site generator and I could not find any evidence of anyone who has connected a salesforce backend to gatsbty
Your input is most valuable!
Should be totally fine! Gatsby is great for anything that is updated infrequently or only has a small amount of it that is updated. I think Gatsby is an awesome choice for making the restaurant a site especially since things like Salesforce or 3rd parties may even offer a widget/iframe for directly interfacing with their ordering system.
TLDR: If most of your assets are static, Gatsby is a great choice especially for freelance web devs/small businesses like stores/restaurants as it just only gives you the JavaScript you need to stay active (event listeners, etc) and compiles everything else into fast HTML5.

How to run a SPA with javascript disabled - server side rendering?

We have a website that's running AngularJS 1.*
but one of our main clients are military personnel and they frequently attempt to use the site via Department of Defense computers. These, of course, have javascript disabled.
I've heard of doing server side rendering, but the majority of the examples and research just mention using it for the initial load. We would need the entire site to run off that principle. Essentially acting like an old MVC site. Is this even possible? And I don't mean with just angularJS. Angular 2(5, whatever version we're on now), or react. I just really don't want to back track to .net MVC
Edit: I realize this is, for all intents, a silly question. I was just hoping there was some awesome new tech that had solved the issues that would be present in even attempting this (as stated below, data-binding. I realize this concept completely defeats the purpose of SPAs)
Thanks anyways. I may just delete this question. Didn't have too many expectations to begin with.
This is very possible! Don't let the rest of the people here fool you.
We have a few websites that work just fine with or without JavaScript enabled. My company website https://bitgenics.io is a React app. If you disable your JavaScript the only thing that won't work is the client-side video player.
Now I have no experience with Angular 1 (and I have heard SSR is hard there), but support should be better in the later versions of it.
Getting the GETs to work is the first challenge. But the next one is that you have to have a fallback for your HTTP POSTs. SPAs often use straight REST calls to do any state changes, but you can't do that because it requires JS on the client.
So your forms have to a fallback of a regular FORM post. So you might need some server-side logic to receive these POSTs and respond with a Server-Side Rendered page again.

Resources