Base

screenshot of Base
express
react
bootstrap
less

Base

A Starter Kit for React+Flux and Express+Postgres

Overview:

Base is a seed/starter kit for a modern web application stack built with ReactJS, Flux, Express, and Postgres. It provides a baseline level of security features for protection against common web application threats. The philosophy behind Base is to give developers a kick start when building their app by providing a secure web application stack and scaffolding out React components along with related Flux actions and stores.

Features:

  • React+Flux Scaffolding: Base scaffolds out React components along with related Flux actions and stores.
  • Secure web application stack using OAuth2: Base includes PassportJS for OAuth2 authentication and supports username/password sign-in and sign-up as well as social logins (Google and Facebook).
  • A light and scalable Web Server: Base uses Express and NodeJS as the web stack base, providing a powerful and scalable foundation.
  • An RDBMS Alternative: Base uses Postgres as the RDBMS option, offering a fast, scalable, open source, and well-supported choice.
  • Stack: Base includes Gulp, Webpack, React, Flux, Express, Postgres, Passportjs, Bootstrap, Jade, Mocha, and Chai.
  • Security: Base implements various security measures including HelmetJS for header protection mechanisms, TLS/SSL by default, XSS protections, CSRF protections, and secure sessions.

Installation:

Before running the install scripts for Base, there are a few manual steps to follow:

  1. Install a running instance of PostgreSQL from http://www.postgresql.org/download/.
  2. Download and install pgAdmin, the default admin platform for PostgreSQL, from http://pgadmin.org/.
  3. Open pgAdmin and create a new empty database.
  4. Indicate the name of this database in your DB connection string in the .env file.
  5. Set up your app's OAuth details for each respective provider (e.g., Facebook login, Google login).

Summary:

Base is a starter kit for building modern web applications with a focus on security. It provides scaffolding for React components and related Flux actions and stores. The stack includes technologies like Gulp, Webpack, Express, and Postgres. Base also supports OAuth2 authentication with username/password sign-in and sign-up as well as social logins. Its security features include TLS/SSL by default, XSS and CSRF protections, and secure sessions. Overall, Base aims to give developers a kick start with a secure web application stack and baseline security features.

express
Express

Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

bootstrap
Bootstrap

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.

less
LESS

Less CSS is a dynamic stylesheet language that extends the capabilities of CSS, allowing developers to write cleaner, more modular, and reusable stylesheets with features like variables, mixins, and nested rules.

fullstack
Fullstack Boilerplates

A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

gulp
Gulp

Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.