TRAM

screenshot of TRAM
express
react
scss

Boilerplate for building reactive isomorphic applications. Built around TypeScript, React, Apollo, MongoDB.

Overview

TRAMBoilerplate is an impressive framework designed for building reactive isomorphic applications with ease. Leveraging the power of TypeScript, React, Apollo, and MongoDB, it streamlines the development process while ensuring high-quality code. Ideal for developers looking to create dynamic and interactive web applications, TRAMBoilerplate brings together modern technologies into a cohesive package.

What sets TRAMBoilerplate apart is its focus on developer experience and performance. With built-in support for hot module replacement and server-side rendering, it facilitates rapid development and deployment, making it an excellent choice for both novice and seasoned developers alike.

Features

  • TypeScript Integration: Everything is written in TypeScript, enhancing code quality and maintainability, including Webpack configurations and tests.
  • Hot Module Replacement: Experience immediate feedback during development with hot module replacement on the client side.
  • Automatic Server Restart: The server automatically rebuilds and restarts upon changes, keeping the development workflow smooth.
  • MongoDB & GraphQL: Utilize MongoDB as your database, queried efficiently using GraphQL through Apollo, offering a robust data handling solution.
  • Testing Support: Comes equipped with AVA and NYC for comprehensive testing and coverage, ensuring your application performs as expected.
  • Server Side Rendering: React and React-Router support server-side rendering, improving both SEO and load times for your applications.
  • Basic Authentication: Implement basic authentication logic using Passport, adding a layer of security to your application.
  • Well-Structured Project: The project structure is organized, making it easy to navigate and build upon as your application grows.
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

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

apollo
Apollo

Apollo is an open-source platform for building GraphQL APIs that connects with any data source. It provides a powerful set of tools and features for developers, including client and server-side caching, real-time data synchronization, and a seamless integration with popular frontend frameworks.

graphql
Graphql

A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.

Redux

Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

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.