React.js Boilerplate

This is a boilerplate/template project for building React.js applications, utilizing several modern technologies and libraries including Effector for state management, Farfetched for data fetching, Cypress for end-to-end testing, Bun as runtime, Vite for fast development environment, Storybook for component documentation and testing, react-testing-library and Jest for unit testing, and Emotion for styling.

Technologies Used

• Effector: State management library for React applications.
• Farfetched: Lightweight and composable data fetching library.
• Cypress: End-to-end testing framework.
• Bun: Fast JS runtime.
• Vite: Fast, opinionated web dev build tool that serves your code via native ES Module imports during development.
• Storybook: UI component explorer for frontend developers.
• React Testing Library and Jest: For unit testing React components.
• Emotion: A performant and flexible CSS-in-JS library.

Features

• Effortless state management with Effector.
• Simplified data fetching with Farfetched.
• Comprehensive testing capabilities with Cypress, Jest, and React Testing Library.
• Efficient styling using Emotion.
• Rapid development setup with Vite.
• Component documentation and testing facilitated by Storybook.

Getting Started

Prerequisites

Make sure you have Bun installed on your machine.

Installation

1. Clone the repository:

git clone https://github.com/jassix/react-boilerplate.git

2. Navigate to the project directory:

cd react-boilerplate

3. Install dependencies:

bun install

Development

To start the development server, run:

bun dev

This will start the Vite development server.

Building

To build the project for production, run:

bun run build

This will generate a production-ready build in the dist directory.

Testing

Unit Testing

To run unit tests using Jest, execute:

bun run test

End-to-End Testing

Cypress is used for end-to-end testing. To run Cypress tests, use:

bun run test:e2e

Storybook

To start Storybook and view your components in isolation, run:

bun storybook

Folder Structure

/
├── public/
├── src/
│   ├── app/
│   │   ├── providers/ - Applications providers
│   │   ├── layouts/ - Different layouts for your pages
│   │   ├── router/ - Router-Component, collect your routes in one place
│   │   ├── styles/ - Global styles for your app
│   │   ├── core.tsx - Root-Component, your providers and routing must will connected there
│   │   └── index.tsx - Application entry-point
│   ├── pages/ - Pages
│   ├── widgets/ - Widgets
│   ├── features/ - Features
│   ├── entities/ - Entities
│   └── shared/ - Shared
│       ├── api/ - All requests to API
│       ├── lib/ - Additional local "libraries"
│       │    ├── media-query
│       │    └── i18n
│       ├── routing/ - Basement for routing, e.g. paths, or something else
│       ├── config/ - General config for your app
│       └── ui/ - UI-Kit, with atomic design
│           ├── atom
│           ├── molecules
│           └── organisms
└── package.json

License

This project is licensed under the MIT License.

Acknowledgements

• Effector
• Farfetched
• Cypress
• Bun
• Vite
• Storybook
• React Testing Library
• Jest
• Emotion

---

Feel free to contribute to this project and tailor it to your specific needs! If you encounter any issues or have suggestions for improvements, please open an issue or create a pull request. Happy coding! 🚀