Advice on setting up a marketplace app in React Native - reactjs

I want to create a marketplace app which displays a different user flow (UI UX) when a customer or seller logs in. How can i achieve this with React Native?
Is this classed as a multi tenant app?
As an absolute beginner, i would appreciate some advice and possibly links to documentation on how to set up the structure using Visual Studio Code. Thanks.

Create a different set of routes for both seller and customer via route authorization.

You can use state management such as mobx or redux,set seller or customer on launch,so every screen or component can request at any time if wether a seller or customer then render the right things

As someone mentioned, redux or different routes after authorization might be what you want. But it sounds like you may have bigger picture issues/questions. The front end could certainly be written in react native, but you need a back-end where the data will live and users will be authorized. If you don't want to write that yourself, you might consider Firebase, as its easy to use and free up to a certain usage level.
Firebase handles authorization easily; then when people are creating accounts, have them specify if they're sellers, etc, and save that to user profiles. When they log in, use the data in their user profile to direct them to different react navigation stacks or just different themes or whatever your needs are.

Related

How does it work when there are multiple users accessing a React web app?

I am learning React.js and new to web programming. All along when doing my own projects it's only for my own use, and hosted on localhost:3000. (i.e. one user).
I have a question about multiple users which I don't know if it's specific to React or just general web programming, but I can't seem to find it online, as perhaps it's too basic? And sorry if it's a very basic question. I will have to make an app for internal use for a team of less than 10 people soon, and it will be hosted on a local server accessible by this team.
Would the code be any different in terms of how I write this app? (say, it's just a todo list where users are able to add and remove items)
Specifically, how do states work when there are more than one user? Are they stored on the user's local device?
If one user clicks a button and sets some state from true to false for example, does it re-render for the other users too? Or do all users get their own instance of the app?
I would also appreciate it if you would know what kind of resources I should look at for this question, as I would like to read more in-depth about it.
well, all the apps run on each user own machine independently. State, actions and all other(whole app) are happening only one user own machine. So there is no interaction if I may say so out of the box between different machines(users). You may achieve that with help of some sockets connections( for example instant chat)

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.

Can we use Gatsby js to build a simple social networking website

I need to develop a simple social networking website which will just act as a platform for different businesses to discover each other. Each Business man/Service provider will have his own profile that he can manage and these profiles will be characterised and sorted according to their types. Basically I would need a Home Page, Profile page for each profile, Search page along with registration and login. I don't need to make any messaging module.
So for this purpose I wanted to know if using Gatsbyjs is a good idea, also if not then what are the other frameworks that I can use for a easier and faster development.
One main problem with gatsby for this use case is: Once a new business signs in and wants to create and edit a new profile, this new profile is not part of the build process. Gatsby builds only the HTML pages you know in advance. Triggering a rebuild, which may take several minutes, everytime a business edits their page is not feasible. You would have to hack something together with client-side routes which is not the intended nor recommended way of doing things.
A server-side framework like Next.js is better suited for this task. This way you can dynamically add and change the profile pages.

How to deal with REST API calls in a multi-tenant application frontend in React?

I have a multi-tenant application separated in frontend(React) and backend(REST API made in Node.js). Each user can have their own subdomain, such as alice.example.com or bob.example.com, where the tenant is the first part of the URL. Each one of those custom pages have their own theme(just a primary color and a logo). You can access the API for a specific tenant through bob.example.com/api/v1, for example.
So far so good. But the problem is: How to deal with this in the frontend? When someone enters bob.example.com how will the React application know which specific theme to load from backend and make API calls only to bob.example.com/api/v1? Is it ok to make an API call everytime my page reloads to get theme colors and images? If so, how to get the tenant in frontend since React Router doesn't deals with subdomains?
Thanks in advance.
Here you can store colors value in redux specific to users. So that when ever you reload or when ever different user try to use the page then w.r.t user color theme can be shown.
Thankyou

SPA - When to use Location Based or Internal State?

Hopefully this is not too opinionated but I am wondering if there are best practices regarding location-based SPAs and Internal based SPAs.
Internal based SPAs - track state internally
Location-based SPAs - URL location / Sessions , etc
In one part of my site if a user pastes in the url the search results will show.
However if I should be doing it for areas like admin section.
For instance I am allow users to add inventory to this point
admin -> add new Inventory -> choose center -> choose subcategory -> add inventory.
This is pretty much the flow, however if I would make it location based then on the "add inventory page" I would have to set the
company
center
subcategory
Which would require ajax requests to get all the data and basically every page I would have to do setting up data. It just seems like alot of work that every page has to be fully setup if they are coming from a url.
I am already using stuff like react-router to do my routing but in the end of the day I would to make sure that everything is always setup to the page can basically run standalone.
So maybe in some situations it would be better to somehow just redirect users back to the root of everything instead?
I would recommend using React Context for resolving your problem.
Once authorized, you can set the Provider value to be the user or their permissions, then on each ComponentDidMount or render() or whatever lifecycle hook you choose, you can check the users permissions and then allow the functionalities based on that.
Context values persist throughout routing, so you won't have to worry about updating it all the time (although you probably should if your user has a timed session).
So it is fully possible and probably more effective to use a mix of both internal and location based state management.

Resources