0

I am creating a fullstack application using node, react redux mongo and passport. I have an ask regarding the app architecture:.

Currently the hTML content being displayed on the pages(React Components) apart from the one being fetched from mongo DB like user name, his credits etc. is hard coded like headings, sub headings, article data, welcome page etc. Supoose going further and scaling the application I want to lauch my website in other countries as well and for that I need localization of my website content. Second usecase is to add tabs like 'Our blogs', 'Case studies' etc which will have the content which keeps on changing and adding and so on. So my question is how to make this hardcoded data also from some JSON and using it in my components.

What kind of architecture I shoud adopt. Note - i am already using express api's for getting my user info, logged in status, mogodb data etc. Screenshot attached.enter image description here

ankit gupta
  • 35
  • 1
  • 7
  • You need to build your rest api's which returns some json data on different user action and that action will be fired from your react(client-side) and the data will be shown as you want.I have answered similar kind of question https://stackoverflow.com/questions/46497980/django-and-reactjs/46499388#46499388 which will guide you how to setup your api and client separately,as the answer is for setting up the api with django you can find many sources for building rest api in node js. – Vinit Raj Feb 08 '18 at 05:55
  • 1
    Vinit thanks for your response. i am already using express api's for getting my user info, logged in status, mogodb data etc. here my concern is there is some hardcoded stuff so how that be handled and bind to components. Shouls there be seperate CMS or so. – ankit gupta Feb 08 '18 at 06:23
  • Hardcoded stuffs like?? – Vinit Raj Feb 08 '18 at 08:43
  • Content shown on the page like heading, subheadings, landing page content also shown in screenshot attached. – ankit gupta Feb 08 '18 at 08:49
  • architecture for client is not scalable. you will end up in a huge flat list of components which is not managable. same for actions etc. i would suggest create folders as components and keep their functions restricted to the folder. here is a starter for react clent. have a look at the folder structure and come up with something similer : https://github.com/hannadrehman/react-redux-starter – hannad rehman Feb 08 '18 at 09:24
  • I would suggest having separate folders will be a good solution put all hardcoded component in components folder(dumb components) and make another folder container which will contain those components which depend on application state. You can go through this project and can see how i have kept my files in react-redux project https://github.com/vinitraj10/watchmygit – Vinit Raj Feb 08 '18 at 11:23

0 Answers0