An opinionated boilerplate code for starting a new react web project.

![firebase]

_{Created and maintained with ❤️ by LoopStudio}

Table of Contents

• Project Structure
• Features
• Prerequisites
• List of Packages
• Recommended Extensions
• Getting Started
• Running the Test Suite
• Contributing
• Credits

Project Structure

.
├── .github/
├── public/
├── .husky/
├── src
│   ├── assets/
│   ├── features/
│   │   ├── common/
│   ├── helpers/
│   ├── layouts/
│   ├── pages/
│   ├── App.styles.ts
│   ├── App.tsx
│   ├── emotion.d.ts
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── setupTests.ts
│   └── theme.ts
├── .env
├── .gitignore
├── .eslintrc.json
├── .firebaserc
├── .prettierrc.json
├── firebase.json
├── tsconfig.json
├── jest.config.js
├── package.json
├── README.md
└── yarn.lock

Feature Structure

├── features
│ └── myFeature
│   ├── components/
│   ├── hooks/
│   ├── layouts/
│   ├── services/
│   ├── types.ts
│   └── index.ts

What does a feature export?

A feature should export anything that is meant to be consumed from outside the feature IE:

• actions
• reducer
• components (if they're meant to be used outside the feature)
• hooks (if they're meant to be used outside the feature)
• helpers (if they're meant to be used outside the feature)

Component Structure

├── MyComponent
│ ├── index.ts
│ ├── MyComponent.tsx
│ ├── MyComponent.styles.tsx
│ ├── MyComponent.test.tsx

Optional

If you want to split your component into pieces for readability, maintainability, or any other reason you could put the secondary components in the same folder. This is only for cases where these secondary components are only used inside MyComponent. If later they want to be used in other places they should be extracted to their own folder inside components.

├── MyComponent
│ ├── index.ts
│ ├── MyComponent.tsx
│ ├── MyComponent.styles.tsx
│ ├── MyComponent.test.tsx
│ ├── SecondaryComponent.tsx
│ ├── SecondaryComponent.styles.tsx

Features

1. Based on create-react-app.
2. Code splitting and prefetching.
3. Errors handling.
4. The httpClient provides status code errors handling and camelCase to snake_case automatic conversion.
5. Async actions and store hydration.
6. Internationalization.
7. Concurrent Mode ready.
8. Environment-specific settings provided through the built-in environment variables system provided by CRA.

Prerequisites

1. Install Node.js 10.16.3 or greater.
2. Install Yarn as a package manager.

List of Packages

Routing:

• react-router-dom: the most popular and powerful routing solution for React.

Testing:

• jest: a delightful JavaScript Testing Framework with a focus on simplicity.
• react-testing-library: a very light-weight solution for testing React components.
• cypress: automated integration tests. This tool isn't installed in our project, but we recommend to use it. You can install it running yarn add cypress --dev. For more information about the configuration, you can read this guide

Styling:

• emotion: Provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.

Deployment:

• firebase: "The fastest way to build the fastest sites". We recommend Firebase as a hosting solution. The free plan is very generous and meets the basic needs of any standard project. Also, it is dead simple to set up and use. For more information, you can dig into the official docs.

Recommended Extensions

Style / Linting

VSCode:

• Prettier - An opinionated code formatter.
• ESLint - Integrates ESLint into VS Code.

Sublime:

• Prettier - JsPrettier is a Sublime Text Plug-in for Prettier, the opinionated code formatter.
• ESLint - ESLint any JavaScript file in Sublime Text.

Intellisense

VSCode:

• Visual Studio IntelliCode - AI-assisted development features.
• Path Intellisense - Visual Studio Code plugin that autocompletes filenames.
• npm Intellisense - Visual Studio Code plugin that autocompletes npm modules in import statements.

Sublime:

• SublimeCodeIntel - Full-featured code intelligence and smart autocomplete engine.
• AutoFileName - Sublime Text plugin that autocompletes filenames.

Version Control

VSCode:

• Git Blame - See Git Blame information in the status bar for the currently selected line.

Sublime:

• Git Blame - Show Git blame information while viewing a file in Sublime Text.

Syntax Highlighting

VSCode:

• DotENV - A port of DotENV for VSCode.
• Color Highlight - This extension styles CSS/web colors found in your document.
• VSCode Styled Components - Syntax highlighting and IntelliSense for styled-components or emotion.

Sublime:

• DotENV - SublimeText Syntax Highlighting support for Environment (.env) Files
• Color Highlight - 🎨 Lightweight Color Highlight colorizer for Sublime Text

Snippets

VSCode:

• ES7 React/Redux/GraphQL/React-Native snippets - This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VSCode.

Sublime:

• ES7 React/Redux/GraphQL/React-Native snippets - Sublime ES7 React/Redux/React-Native/JS snippets.

Getting Started

1. Clone this repository and navigate to the folder.
2. Install all dependencies by running the yarn install command in the root directory.
3. Modify the environment variables files in root folder(.env.dev, .env.staging and .env.prod).
4. Start the dev server: yarn start command.

Running the Test Suite

1. Run the yarn test command.

Credits

React App Boilerplate is maintained by LoopStudio.