Loco Reactor Tech Stack and Features

Tech stack - components and frameworks used, and major features.

Frontend

Features

• Built using TypeScript.
• Light/dark mode.
• Responsive.
• Accessible.
• Sidebar and header layouts.

Stack

Included in distribution:

• CSS:
  • clsx - Utility for constructing className strings conditionally.
  • Tailwind CSS - Utility-first CSS framework packed with classes.
  • tailwind-merge - Utility function to efficiently merge Tailwind CSS classes in JS without style conflicts.
  • tailwindcss-animate - A Tailwind CSS plugin for creating beautiful animations.
• ⌘K aka cmdk - Command menu React component that can also be used as an accessible combobox. You render items, it filters and sorts them automatically.
• day.js - Minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. Used for date formatting on forms.
• Shadcn Admin Dashboard - Project structure and initial template for the frontend.
• ShadcnUI - Template library for UI development based on TailwindCSS and RadixUI.
• Radix UI - Composable component library optimized for fast development, easy maintenance, and accessibility.
• React - Library for web the user interface.
• react-day-picker - Customizable react date picker.
• React Router - Routing.
• react-hook-form - Performant, flexible and extensible forms library for React Hooks.
• recharts - Redefined chart library built with React and D3.
• @tanstack/react-query - Powerful asynchronous state management.
• @tanstack/react-table - Headless UI for building powerful tables & datagrids.
• Tabler Icons - Icon library.
• zod - TypeScript-first schema validation with static type inference.

Development only:

• Formatting and linting:
  • Eslint - TypeScript and JavaScript linting.
  • Prettier - formatting.
  • @trivago/prettier-plugin-sort-imports - A prettier plugin to sort import declarations by provided Regular Expression order.
  • prettier-plugin-tailwindcss - A Prettier v3+ plugin for Tailwind CSS v3.0+ that automatically sorts classes based on tailwind recommended class order.
• Build tools:
  • TypeScript - transpile TypeScript to JavaScript.
  • Vite - build tool.
  • vite-plugin-handlebars - allows for the use of handlerbars syntax in frontend/index.html.
• chalk - colors for command line UI.

Backend

Features

• Based on Loco.
• "Rails Like" development for the backend.
• Batteries included.
• Rust for safe efficient code.

Servers

• PostgreSQL for relational data.
• Redis for task management.

Components and Libraries

Included in distribution:

• axum - Web framework that focuses on ergonomics and modularity, based on Tower and Tokio.
• loco-rs - The "one-person" framework for Rust, inspired by Rails.
• sea-orm - Relational ORM for building web services in Rust with the familiarity of dynamic languages.
• serde - Framework for serializing and deserializing Rust data structures efficiently and generically.
• tokio - Runtime for writing reliable, asynchronous, and slim applications with the Rust programming language.
• tracing - Application-level tracing for Rust to be used on top of Tokio.
• validator - Common validation functions (email, url, length, ...) and trait.

Development only:

• cargo-husky - Crate for Rust project managed by cargo. In short, cargo-husky is a Rust version of husky.
• concurrently - Run multiple processes concurrently, with support for cargo.

Last Updated: May 30, 2024