Arc

screenshot of Arc
react
styled-components

React starter kit based on Atomic Design

Overview

ARc (Atomic React) is a React starter kit based on the Atomic Design methodology. It aims to organize and maintain large React projects by encouraging the use of small and pure components. The kit provides a basic stack with React, Webpack, react-router, and Jest, and offers additional branches with Redux, Redux-Saga, Redux-Form, and Server Side Rendering capabilities.

Features

  • Atomic Design Methodology: ARc follows the Atomic Design methodology, which emphasizes creating reusable components through composition. This helps to keep the project organized and maintainable as it grows.
  • Progressive Development: ARc provides a basic boilerplate that allows developers to start with the essentials and gradually incorporate additional features as needed. This allows for flexibility and ease of adoption.
  • Component Organization: With ARc, components can be organized based on their domain or shared functionality. This helps to avoid a large and complex components folder, making it easier to manage and maintain.
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

styled-components
Styled Components

Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.

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.

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.

Storybook

Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.

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.