Techs

Here is a list of techs we use to build the project.

Frontend:

Tech	Usage	Priority	Difficulty
React	Rendering	⭐️⭐️⭐️⭐️⭐️	🌟🌟🌟🌟🌟
Unstated	State Management	⭐️⭐️⭐️⭐️	🌟🌟
BLK(reactstrap)	Bootstrap	⭐️⭐️⭐️⭐️	🌟🌟
React Final Form	Form State Management	⭐️⭐️⭐️	🌟🌟🌟🌟🌟
React Router	Routing	⭐️⭐️⭐️	🌟🌟🌟
CSS Module	CSS	⭐️	🌟
WorkBox	Service Worker	⭐️⭐️⭐️	🌟🌟🌟
Yup	input validator	⭐️⭐️⭐️	🌟🌟
LocalForage	IndexedDB Wrapper	⭐️	🌟

Backend:

Tech	Usage	Priority	Difficulty
Firebase	Backend	⭐️⭐️⭐️⭐️⭐️	🌟🌟🌟
Apollo Server	API	⭐️⭐️⭐️	🌟🌟🌟🌟🌟
Web Push	Push Notification	⭐️⭐️⭐️	🌟🌟🌟
CORS	CORS	⭐️⭐️	🌟
Yup	input validator	⭐️	🌟🌟
Busboy	Form Parser	⭐️	🌟🌟
UUID-v4	UUID	⭐️	🌟

⭐️⭐️⭐️⭐️⭐️: You need this to literally do anything.
⭐️⭐️⭐️⭐️: Possible to contribute but extremely limited.
⭐️⭐️⭐️ : Unable to work on certain modules but still possible to contribute significantly.
⭐️⭐️: Highly recommend, but use native API if you don't want to use it.
⭐️: You are free to use your favorite equivalent library.

🌟🌟🌟🌟🌟: Ground up guidance is not possible, you must have basic in this.
🌟🌟🌟🌟: Possible to introduce it to you, but you still need to feed yourself the documentation.
🌟🌟🌟: Possible to explain with self-made documentation.
🌟🌟: Can be easily explained.
🌟: Cake.

We prioritize developing experience, so we choose techs that are easy to use and rich in resources if you have a better suggestion you are free to voice it out.

React

It is extremely unlikely we shift to Vue or Angular, we will utilize React till the end.

We will slowly convert class components of BLK into functional components, all new components should be written as a functional component, no class components in this project.

May use isomorphic rendering like Nextjs in the future for better SEO but it seems like the bar is too high for most people to contribute, the same reason why this project is not a Typescript project.

Unstated

The hype over redux is totally unreasonable, Unstated can be picked up in 5 minutes and basically can do most things you need in redux.

Not using the new Unstated-Next because Hook cannot be used in the class component.

React Router

React without React Router is not React.

BLK (Bootstrap)

BLK currently is the best in the market now(as for 2019), this is not something that we should change easily, however, please let the team know if you found better, we can use it in other projects.

BLK use reactstrap extensively.

WorkBox

Seem like there is no alternative to WorkBox, so we gonna stick with this one.

Yes, this is a PWA project, no Swift, no Java, no Ionic, no Cordova, no Flutter, no React Native, only Web Tech.

CSS

No SASS or SCSS, we go straight to CSS in JS which is much more powerful than SASS/SCSS, the tech we decided is Styled Component as it is very easy to pick up and widely popular.

It is either CSS(CSS module) or CSS In JS, no SASS or SCSS. The benefit of not using SASS/SCSS is we only deal with CSS syntax, what you write in Styled Component is basically CSS syntax and some Javascript.

fewer languages = fewer complications = fewer technicals barriers.

However, do note that we still need SCSS to deal with vendor's stylesheets.

As for components library, you are free to use any resources you want, as long as it doesn't bloat the app, look nice and most importantly, provide sleek users experience.

React Final Form

since this is an e-commerce platform, we probably going to deals with quite a number of forms, in this case, we shall use react final form, this is so much better than dealing with the form state our self.

Why Final Form over Formik? This is because Final Form is more flexible, it handles validation individually and much smaller in size.

And yes, managing form is still difficult even with libraries.

Yup

Yup is a validator, use it with react final form, a very neat library.

Firebase

Firebase is a solid choice to greatly reduces backend workload so we can focus on front end creativity task and user experience, plus 99.99% of time firebase definitely does a better job in setup the server than you and do it with a much lower cost.

I would even go further to say that in this decade, there is virtually no reason to set up your own server.

Why Firebase? Why not AWS? For a very simple reason, Firebase SDK is much easier to use(ease of use and development are heavily emphasized in this project) plus it comes with a no expiration free plan (which is very rare for backend service).

This is what we use Firebase for:

1. Authentication
2. Endpoint
3. Storage
4. Database
5. Chat

All can be done with just a few lines of code with Firebase SDK, plus plus plus Admin page is ready, so you don't need to build one yourself!

It is crazy not to utilize it.

Apollo Server

we are going to implement GraphQL endpoint, not much library to choose from.

=====================
Other libraries are just standard libraries that we use, if you have better in mind, just let the team know.