How would I go into setting up a firebase project safely? - reactjs

I have an app idea which I want to create a working product of. I do have a working demo with React Native and I'm using Firebase for storing documents and images. Creating documents and uploading images to Firebase Storage is all done in the app, but this is just for demo purposes. In reality you would of course want to use an API for storing all that data. At least, I thought so. All I see on the internet is people using Firebase directly in their app. Is this the correct way of doing it? I always learned you should use a backend, for example a REST API for safely handling data.
Is it safe and secure to 'just' use React Native? I want to handle payments in my app, so I really want it to be done securely.
So what's an example of a stack I could use?
Currently using React Native and Firebase. But for safety I'd imagine something like
React Native - frontend
Node Express Server - backend
Firebase - database
I hope someone can give me a little push in the right direction.

Related

Do I need Inertia to use Laravel + React

I want to move app and I am looking to new technologies. I have no experience with Laravel, but I wonder if I want to create a Laravel + React web app do I also need to look at Inertia, or I can do Laravel + React without Inertia?
NO. You can build an app with Laravel and React as your front-end without Inertia.
HOWEVER, if you're looking into building an SPA, I'd recommend looking into Inertia, since it makes the process of integrating the back-end and front-end a lot easier and you won't need to write an API to get them talking to each other.
Backing up a bit #Matheus 's answer.
The purpose of Inertia is to be able to create an SPA application using the laravel routing system.
You can create your routes in your web.php, that would point to a Controller's function and that function would return a React component with your data as props.
This takes away a lot of work on both sides. Without inertia you would need a frontend application made in this case with React, then useEffect would be responsible for calling an api in your laravel application to then retrieve just the data so you can use it on your frontend application.
Either way is possible, although if you are a fullstack taking care of both, the frontend and backend I recommend Inertia to save yourself some time and CSRF token pain :)

from django to django rest framework : e-commerce with react

i have completed an e-commerce project with pure django and want to transform it to Django Rest Framework with React,
i just want to know if the use of Sessions to create a cart would still be the same or is there something else or a different aproach to keep cart functionality,
i have been looking at some github projects to see how it can be done ,and just got me confused, if someone can clear that out for me, much much apreciated,
thank you,
I understood that it is possible to set cookies or a local storage with react and receive the info directly to the Django backend from there, so there is no need using sessions (it still totally possible but apparently not preferred)

Saving state in a react-native

I´m building a react native app for my own use(for android), and I don´t get how to save the state of my app, since the idea is to save some text data in the phone.
I want to save some orders, which are going to be around 400-700 a year(i´m quite sure this wont increase), so I don´t think I really need like a server with a database.
I saw AsyncStorage but it looks like it´s intended for something else, like login tokens and stuff.
Would a text file(csv for example) do the job? Or how would you do it? Thanks
RxDB - A realtime Database for JavaScript Applications.
WatermelonDB - 🍉 Next-gen database for powerful React and React Native apps that scales to 10,000s of records and remains fast.
realm - An alternative mobile database to SQLite & key-value stores.
react-native-storage - This is a local storage wrapper for both react-native(AsyncStorage) and browser(localStorage). ES6/babel is needed.
react-native-sqlite-storage - SQLite3 bindings for React Native (Android & iOS)
react-native-simple-store - A minimalistic wrapper around React Native's AsyncStorage.
react-native-store - A simple database base on react-native AsyncStorage.
react-native-easy-app - This is a local storage wrapper for both react-native(AsyncStorage).
Check awesome-react-native. This is list of libraries that can help solve much of your problems
If you don't want to use a server ,You can use firebase realtime database or firebase firestore.
you can use redux-persist if using redux doesn't matter for you!

modernizing old app handlebars app with react

I've got an old app I wrote in Node, Mongo, Express and Handlebars. It seems to be a bit outdated in the sense that it was more static and all data was called locally off the same domain and rendered with Handlebars on the server side, which I thought was always necessary for SEO and it wasn't built with the idea of later building and connecting the data to a mobile version.
I've been using React a lot lately as well as looking into building mobile apps and with the tutorials out there, it seems like most apps these days are designed in a way that the backend is mostly a remote api with cross site origin requests enabled and a frontend that just gets the data from it and parses it on the frontend whether it's a desktop client or a mobile client.
What would be the best way to modernize my old app that'd keep it rendering on the server side using react instead of handlebars for SEO, while also having an api service for if I were to develop a mobile version that could get and parse the data?
There's a lot of server side rending react tutorials out there, but I'm not sure what the best approach is.
To turn your current app into a SSR (server side rendered) react application would be a big ask.
You would have more luck ripping out the html / handle bars response and just returning JSON instead, effectively turning it into an API.
In terms of adding a SSR react layer, the easiest option would be to use something like Next.JS. This does the heavy lifting for you to create server side rendering. There are plenty of other options out there but Next is one of the best and probably the easiest to get going with.
You would then make API calls from your SSR Next / React app to the Node API.
You can reuse the same API for a mobile application if you chose to go down that path at a later stage.
You would then make API calls from your SSR Next / React app to the Node API.
You can reuse the same API for a mobile application if you chose to go down that path at a later stage.

Creating a webpage with a unique URL using react/firebase?

I'm pretty new to react and building out a little prototype using Firebase as a backend. One of the primary functionalities involves a user writing a post in an editor, which is saved to firebase. On submit in the editor, I am trying to create a new standalone page for the post with the firebase uid as the ending part of the new unique URL.
The problem I'm having is figuring out a way to create the new page on submit. I haven't been able to find any documentation for a similar problem like this specific to react or firebase, and was just wondering on a high-level what a good approach to executing this might be? Thanks
The newly launched Firebase Hosting + Cloud Functions integration can help here. The first bullet point in the documentation looks like it describes your use case exactly.
You also mentioned React. There is a handy sample project showing how to implement an isomorphic React app with Firebase.

Resources