Redux

Application and Data / Libraries / State Management Library
CTO at My Job Glasses

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.

READ MORE
5 upvotes261.5K views
Shared insights
at

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.

READ MORE
19 upvotes1M views
Shared insights
at
()

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.

READ MORE
18 upvotes2 comments334.8K views
John Akhilomen
John Akhilomen
April 1st 2020 at 3:00PM

I like the tech stack you guys have selected. You guys seem to have it all figured out, and well planned. Good luck!

Reply
Ne Labs
Ne Labs
March 9th 2020 at 12:34PM

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.

Reply
Developer at Devonauts
Needs advice
on
Swift
React
and
Android Studio

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.

READ MORE
5 upvotes19.6K views
Replies (2)
Recommends
Laravel

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).

READ MORE
6 upvotes1.5K views
Craft Delivery Inc
Recommends
Node.js

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))

READ MORE
3 upvotes1.5K views

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.

READ MORE
13 upvotes144.8K views
Needs advice
on
Redux
React
and
Calendly

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:

Any advice?? :)

READ MORE
5 upvotes6.6K views

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.

READ MORE
3 upvotes180.2K views