Create React App

A few months ago, we decided to migrate our web apps from Create React App to Next.js for its "batteries-included" approach as well as its advanced server-side rendering capabilities. This move allowed us to focus our development efforts on building what matters to us the most: automating property due diligence.

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.

I picked up an idea to develop and it was no brainer I had to go with React for the frontend. I was faced with challenges when it came to what component framework to use. I had worked extensively with Material-UI but I needed something different that would offer me wider range of well customized components (I became pretty slow at styling). I brought in Evergreen after several sampling and reads online but again, after several prototype development against Evergreen—since I was using TypeScript and I had to import custom Type, it felt exhaustive. After I validated Evergreen with the designs of the idea I was developing, I also noticed I might have to do a lot of styling. I later stumbled on Material Kit, the one specifically made for React . It was promising with beautifully crafted components, most of which fits into the designs pages I had on ground.

A major problem of Material Kit for me is it isn't written in TypeScript and there isn't any plans to support its TypeScript version. I rolled up my sleeve and started converting their components to TypeScript and if you'll ask me, I am still on it.

In summary, I used the Create React App with TypeScript support and I am spending some time converting Material Kit to TypeScript before I start developing against it. All of these components are going to be hosted on Bit.

If you feel I am crazy or I have gotten something wrong, I'll be willing to listen to your opinion. Also, if you want to have a share of whatever TypeScript version of Material Kit I end up coming up with, let me know.

In #Aliadoc, we're exploring the crowdfunding option to get traction before launch. We are building a SaaS platform for website design customization.

For the Admin UI and website editor we use React and we're currently transitioning from a Create React App setup to a custom one because our needs have become more specific. We use CloudFlare as much as possible, it's a great service.

For routing dynamic resources and proxy tasks to feed websites to the editor we leverage CloudFlare Workers for improved responsiveness. We use Firebase for our hosting needs and user authentication while also using several Cloud Functions for Firebase to interact with other services along with Google App Engine and Google Cloud Storage, but also the Real Time Database is on the radar for collaborative website editing.

We generally hate configuration but honestly because of the stage of our project we lack resources for doing heavy sysops work. So we are basically just relying on Serverless technologies as much as we can to do all server side processing.

Visual Studio Code definitively makes programming a much easier and enjoyable task, we just love it. We combine it with Bitbucket for our source code control needs.

For Etom, a side project. We wanted to test an idea for a future and bigger project.

What Etom does is searching places. Right now, it leverages the Google Maps API. For that, we found a React component that makes this integration easy because using Google Maps API is not possible via normal API requests.

You kind of need a map to work as a proxy between the software and Google Maps API.

We hate configuration(coming from Rails world) so also decided to use Create React App because setting up a React app, with all the toys, it's a hard job.

Thanks to all the people behind Create React App it's easier to start any React application.

We also chose a module called Reactstrap which is Bootstrap UI in React components.

An important thing in this side project(and in the bigger project plan) is to measure visitor through out the app. For that we researched and found that Keen was a good choice(very good free tier limits) and also it is very simple to setup and real simple to send data to

Slack and Trello are our defaults tools to comunicate ideas and discuss topics, so, no brainer using them as well for this project.

Docker Compose might have been a bit of overkill for a dev environment as a solo founder, but I'd found so much with past side projects (though this is no longer a side project) that I would frequently waste time every time I came back to work on the project getting my dev env sorted again.

Made the conscious choice to make a "prod-ish" docker-compose config up front to make sure that didn't bite me again.

Structured it so I have the following containers running

• server - the Rails app in API style
• client - the Create React App
• ngrok - ngrok to receive webhooks in dev
• db - PostgreSQL
• queues - delayed_job worker

We never have to worry about setting up Webpack and other tooling again. Create React App

We needed a frontend framework for to make it easier to work with JavaScript. We chose Next.js since it maintains the flexibility of something like Create React App but gives some structure on how to organize the app similar to Ember.js.

Webpack and Babel are configured out of the box for #ServerSideRendering, #TreeShaking, and other nice #JS features.