Catalyst

Catalyst is a React/Redux web application starter kit built in Typescript. It has best practices built in, making doing the right thing the easy thing!

Is Catalyst for you?

So you're building a web app:

• Do you want to use React?
  • React is a component based library for building user interfaces.
  • It's implementation of a virtual DOM makes it fast and its introduction of JSX makes your code much easier to read and debug!
• Is it going to be a large project, maintained by multiple developers?
  • Typescript takes much of the mystery out of JavaScript, leaving you with declarative, scalable code.
• Is it going to be data intensive?
  • Redux's unidirectional dataflow helps you write applications that behave consistently. It also provides a great developer experience, such as live code editing combined with a time traveling debugger.
• Is it going to be heavily styled?
  • SCSS is a powerful syntax over the top of CSS that makes everything better.
  • (S)CSS modules allow you to not have to worry about writing CSS for one component that could affect another, everything has local scope!

If you answered yes to these four questions, Catalyst is for you.

Getting Started

$ git clone https://github.com/zposten/Catalyst.git
$ cd Catalyst
$ yarn install
$ yarn start

Library choices

There are many, many choices to make when establishing a JS project, this is one of the reasons that doing so is so difficult and time consuming. I have made the following decisions for this project:

• JS Library: React
• JS flavor: Typescript
• Data flow architecture: Redux
  • Asynchronous calls: Redux thunk
• Bundler: Webpack
  • Module format: ES2015+
• Transpiler: Babel
• Automation tool: yarn run scripts
• Styles
  • CSS modules
  • SCSS
  • PostCSS
    • Autoprefixer
• Linter: TSLint
• Test framework: Jest
  • Enzyme - wraps React test utils for a better api
  • Test placment: Alongside classes
  • Where to run tests: In memory
  • When to run tests: Every time you save
• CI Servers: AppVeyor
• HTTP Requests: Fetch
• Mock API: json-server, JSON Schema Faker
• URL Navigation: React Router 4
• Included UI component libraries:
  • React-Bootstrap
  • Material UI