After splitting our monolith into a Rails API + a React Redux.js frontend app, it became a necessity to monitor frontend errors. Our frontend application is not your typical website, and features a lot of interesting SPA mechanics that need to be followed closely (many async flows, redux-saga , etc.) in addition to regular browser incompatibility issues. Rollbar kicks in so that we can monitor every bug that happens on our frontend, and aggregate this with almost 0 work. The number of occurrences and affected browsers on each occurence helps us understand the priority and severity of bugs even when our users don't tell us about them, so we can decide whether we need to fix this bug that was encountered by 1k users in less than a few days days VERSUS telling this SINGLE user to switch browsers because he's using a very outdated version that no one else uses. Now we also use Rollbar with Rails, Sidekiq and even AWS Lambda errors since the interface is quite convenient.
Redux
I'm working as one of the engineering leads in RunaHR. As our platform is a Saas, we thought It'd be good to have an API (We chose Ruby and Rails for this) and a SPA (built with React and Redux ) connected. We started the SPA with Create React App since It's pretty easy to start.
We use Jest as the testing framework and react-testing-library to test React components. In Rails we make tests using RSpec.
Our main database is PostgreSQL, but we also use MongoDB to store some type of data. We started to use Redis for cache and other time sensitive operations.
We have a couple of extra projects: One is an Employee app built with React Native and the other is an internal back office dashboard built with Next.js for the client and Python in the backend side.
Since we have different frontend apps we have found useful to have Bit to document visual components and utils in JavaScript.
Repost
Overview: To put it simply, we plan to use the MERN stack to build our web application. MongoDB will be used as our primary database. We will use ExpressJS alongside Node.js to set up our API endpoints. Additionally, we plan to use React to build our SPA on the client side and use Redis on the server side as our primary caching solution. Initially, while working on the project, we plan to deploy our server and client both on Heroku . However, Heroku is very limited and we will need the benefits of an Infrastructure as a Service so we will use Amazon EC2 to later deploy our final version of the application.
Serverside: nodemon will allow us to automatically restart a running instance of our node app when files changes take place. We decided to use MongoDB because it is a non relational database which uses the Document Object Model. This allows a lot of flexibility as compared to a RDMS like SQL which requires a very structural model of data that does not change too much. Another strength of MongoDB is its ease in scalability. We will use Mongoose along side MongoDB to model our application data. Additionally, we will host our MongoDB cluster remotely on MongoDB Atlas. Bcrypt will be used to encrypt user passwords that will be stored in the DB. This is to avoid the risks of storing plain text passwords. Moreover, we will use Cloudinary to store images uploaded by the user. We will also use the Twilio SendGrid API to enable automated emails sent by our application. To protect private API endpoints, we will use JSON Web Token and Passport. Also, PayPal will be used as a payment gateway to accept payments from users.
Client Side: As mentioned earlier, we will use React to build our SPA. React uses a virtual DOM which is very efficient in rendering a page. Also React will allow us to reuse components. Furthermore, it is very popular and there is a large community that uses React so it can be helpful if we run into issues. We also plan to make a cross platform mobile application later and using React will allow us to reuse a lot of our code with React Native. Redux will be used to manage state. Redux works great with React and will help us manage a global state in the app and avoid the complications of each component having its own state. Additionally, we will use Bootstrap components and custom CSS to style our app.
Other: Git will be used for version control. During the later stages of our project, we will use Google Analytics to collect useful data regarding user interactions. Moreover, Slack will be our primary communication tool. Also, we will use Visual Studio Code as our primary code editor because it is very light weight and has a wide variety of extensions that will boost productivity. Postman will be used to interact with and debug our API endpoints.
I like the tech stack you guys have selected. You guys seem to have it all figured out, and well planned. Good luck!
RDBMS like Postgres can also store, index and query schemaless data as JSON fields, while also supporting relations where it makes sense. A document model is actually a downside, since usually data will still have relations, and it makes modeling them inconvenient.
Hey everyone, I am a new self-taught developer and have some questions regarding apps. I apologize in advance if the question is too obvious or simple.
I am currently trying to build an app for a local supermarket as a way to get experience in the development world. The app needs to pull data from a MySQL database that the owner has through GoDaddy. It also needs to have an admin panel.
Problem: I have the app ready, and it works using Firebase. I also have the admin panel built with React and Redux. However, I have no idea how to integrate the app with the Admin Panel. Can somebody please mentor me in this case?
Thanks.
There isn't really enough detail in your question to give you concrete answers. React/Redux are frontend technologies, and it sounds like you have your data in a MySQL database somewhere. There is no mention of any kind of backend, so I assume you don't have one. In that case, I don't know enough about GoDaddy to know what APIs it exposes for modifying your database, but unless you want to let literally anyone with the URL to your admin panel to be able to modify your data, you're going to need to include some authentication. Now, the classic way to do this is to look into creating some sort of backend to authenticate admins (with some kind of login system. There are many ways to do this, Laravel and Ruby on Rails are fairly time-tested technologies for doing this), and also serve as an in-between from your frontend admin panel to your database. The cost of doing it this way is you're going to have to have a server to host somewhere which will add to the maintenance cost for your client. Alternatively, there are ways which don't involve creating a backend, such as OAuth authentication. This article talks about a few: https://css-tricks.com/apis-and-authentication-on-the-jamstack/. Firebase can also do authentication for you, though it sounds like it only offers an SDK, not hosting (you will still need to create a authentication server, or use OAuth or other third-party authentication tech if you use Firebase).
I'd say keep it simple and create a small express.js back end on heroku https://devcenter.heroku.com/articles/getting-started-with-nodejs
This would communicate with the database. You would setup routes that your react app could access using something like axios
express: app.get('/products', (req, res) => { // call mysql db run query and return result // set up db connection... dbconn.query('select * from products'). then(result => { res.send(result.rows) }).catch(e => res.sendStatus(400)) }) react: axios.get('https://app.herokuapps.com/products').then(resp => console.log(resp.data))
Server side
We decided to use Python for our backend because it is one of the industry standard languages for data analysis and machine learning. It also has a lot of support due to its large user base.
Web Server: We chose Flask because we want to keep our machine learning / data analysis and the web server in the same language. Flask is easy to use and we all have experience with it. Postman will be used for creating and testing APIs due to its convenience.
Machine Learning: We decided to go with PyTorch for machine learning since it is one of the most popular libraries. It is also known to have an easier learning curve than other popular libraries such as Tensorflow. This is important because our team lacks ML experience and learning the tool as fast as possible would increase productivity.
Data Analysis: Some common Python libraries will be used to analyze our data. These include NumPy, Pandas , and matplotlib. These tools combined will help us learn the properties and characteristics of our data. Jupyter notebook will be used to help organize the data analysis process, and improve the code readability.
Client side
UI: We decided to use React for the UI because it helps organize the data and variables of the application into components, making it very convenient to maintain our dashboard. Since React is one of the most popular front end frameworks right now, there will be a lot of support for it as well as a lot of potential new hires that are familiar with the framework. CSS 3 and HTML5 will be used for the basic styling and structure of the web app, as they are the most widely used front end languages.
State Management: We decided to use Redux to manage the state of the application since it works naturally to React. Our team also already has experience working with Redux which gave it a slight edge over the other state management libraries.
Data Visualization: We decided to use the React-based library Victory to visualize the data. They have very user friendly documentation on their official website which we find easy to learn from.
Cache
- Caching: We decided between Redis and memcached because they are two of the most popular open-source cache engines. We ultimately decided to use Redis to improve our web app performance mainly due to the extra functionalities it provides such as fine-tuning cache contents and durability.
Database
- Database: We decided to use a NoSQL database over a relational database because of its flexibility from not having a predefined schema. The user behavior analytics has to be flexible since the data we plan to store may change frequently. We decided on MongoDB because it is lightweight and we can easily host the database with MongoDB Atlas . Everyone on our team also has experience working with MongoDB.
Infrastructure
- Deployment: We decided to use Heroku over AWS, Azure, Google Cloud because it is free. Although there are advantages to the other cloud services, Heroku makes the most sense to our team because our primary goal is to build an MVP.
Other Tools
Communication Slack will be used as the primary source of communication. It provides all the features needed for basic discussions. In terms of more interactive meetings, Zoom will be used for its video calls and screen sharing capabilities.
Source Control The project will be stored on GitHub and all code changes will be done though pull requests. This will help us keep the codebase clean and make it easy to revert changes when we need to.
Hello,
I am trying to bring in an efficient calendar API that allows multiple users to book meeting with 1 or 100s clients. If a client signs up for a meeting on an available slot, the appointment will show on both users' calendars and within the app.
I can't decide on how I should seamlessly implement this in my platform due to so many options. I'm building an experimental MVP so I need to keep the costs down. My application is in React + Redux. I need full control over the UI Visual Design. The calendar must also sync to 3rd party services such as Google Calendar.
Looking at these services or libraries to help speed up implementation:
- https://www.timekit.io/ - Leaning towards this API.... does anyone have opinions around this service?
- https://reactjsexample.com/tag/scheduler/
- https://www.nylas.com/products/calendar-api/
- https://developer.calendly.com/
- https://developers.google.com/calendar
Any advice?? :)
Hi there,
I want to make a front-end POC about market stocks with React and TypeScript that lets you search stocks, list stocks, and see stocks detail with authorization.
I will fetch data from GraphQL API. Should I add Redux to this project or should I use React Context API or is GraphQL meets my needs for state management?
And any other recommendations to add my project as package or concept?
Thanks
Heya!
For a PoC, React alone with the built-in useState/useReducer/Context API state management goes a long way. You could use GraphQL just for data fetching then.
Alternatively, you could opt to combine all state management and data fetching within the GraphQL layer with local resolvers, allowing you to treat local state as yet another GraphQL operation. The latter is especially handy if you need to add/enrich further data from local state into server side GraphQL data. Apollo and Urql GraphQL libraries both have local state management options built-in or via plugin packages.
Both approaches should be easily scalable within the context of your use case.
React Context API has issues with causing re-renders on all paths in the tree and requires using memoization for optimizing that. Depending on how frequently or how much the data changes, you could look at Jotai or Zustand or similar that manages the state outside of React and provides powerful features to last beyond a PoC.
Hope that's helpful :)
Hey Enes! I think that mainly depends on which kind of POC you want to build. Should it be mainly client-side, a SPA? Then you'd probably want to add some state management on the client-side (like Redux), and probably a library to help with the communication, too (like Apollo). If it's doable or desired to generate as much as possible on the server, you could have a look at Remix, they have some really nice architectural choices that would align with your other decisions quite well I think!
Depending on how you’re planning to develop the API layers to run (serverless vs microservice vs monolith) you may want to look into GraphQL subscriptions, Helix and Envelop for supporting real time updates to market data. I’m using RedwoodJS for my monorepo and they’re moving toward helix for serverless support. I don’t know what Bison and Blitz are doing for this. It’s probably moot if you aren’t planning to do websockets or real time data updates.
Read a lot about RedwoodJS and Blitz, too, for what it's worth! Especially for a more all-encompassing framework I think I'd be the way to go! They both looked greated when evaluating (no real word experience with both, though)
We chose to use React as our frontend. This will allow us to effectively manage and condense our code into repeatable components to avoid repetition and promote clarity. We have also decide to use Redux as it has proven to be an efficient way to manage a state space given a complex and scalable product such as ours. To avoid costly time and effort with boiler plate styling of common components, we have decided to use the Semantic UI React open-source library as it provides great customization and clear documentation. Lastly, we will be using Jest for frontend Unit testing, as it is a popular framework and has great support for React.
Hi, I'm building a detailed workout logging app on React Native (managed expo project) with Redux as my state management and Firebase as my user authentication. I want to be able to backup users' profiles, workout logs, and progress pictures. Later on, I want to run machine learning on my data as well. After a bunch of research, I still don't know which one of these databases to use (let's assume that my app will grow to many users).
Am already using Redux in my application. My application is kind of big (a lot of code ) and mostly uses class-based components. Should I go for React Query for better API calls? I have read online about the React Query. Should I use react-query or not?
I would recommend that you to use Redux-Toolkit Query instead of React Query. Before migrating your code to Redux-Toolkit Query I strongly suggest that look at the documentation to migrate Redux-Toolkit. The reason behind that, you already implemented a Redux in your project. Redux-Toolkit Query is doing the same job as React Query but has been built by the Redux team to work specifically with Redux.
For query operations and especially filters React Query is really good and way more simple then Redux