Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dev-eranda/reactjs-design-system-engineer
This projects covering advanced topics like performance optimization, component architecture, and scalable design systems for enterprise-level React applications.
https://github.com/dev-eranda/reactjs-design-system-engineer
accessibility-testing cicd css css-architecture design-patterns npm npm-package reactjs reusable-components storybook typescript unit-testing visual-regression-testing
Last synced: 2 days ago
JSON representation
This projects covering advanced topics like performance optimization, component architecture, and scalable design systems for enterprise-level React applications.
- Host: GitHub
- URL: https://github.com/dev-eranda/reactjs-design-system-engineer
- Owner: dev-eranda
- License: mit
- Created: 2024-05-18T08:59:05.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-01-24T10:35:07.000Z (10 days ago)
- Last Synced: 2025-01-24T11:27:39.500Z (10 days ago)
- Topics: accessibility-testing, cicd, css, css-architecture, design-patterns, npm, npm-package, reactjs, reusable-components, storybook, typescript, unit-testing, visual-regression-testing
- Language: TypeScript
- Homepage:
- Size: 2.43 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Advanced React For Enterprise
**Developed By:** Eranda Samarasinghe
## Project Backgroud and Overview
This repository contains resources and examples for the "Advanced React For Enterprise: React for Senior Engineers" course from Udemy. The course covers advanced topics in React, including performance optimization, state management, and server-side rendering.
## Project Goals
The main objectives of this application are to:
1. This project focuses on implementing scalable CSS architecture for maintainable and consistent styles.
2. It designs reusable React components using effective design patterns for modularity and composability.
3. The components are built with TypeScript to ensure type safety and improve code maintainability.
4. Unit and visual regression testing are incorporated to maintain component stability and catch style issues.
5. Storybook is used to document components and establish a consistent design system for collaboration.
## Technical Details
Core technologies used:
- **React.js, JavaScript, TypeScript, SCSS, HTML**
## Installation
1. Clone repository:
```sh
git clone https://github.com/dev-eranda/reactjs-design-system-engineer
2. Build the project:
```sh
npm run build
3. Start development server:
```sh
npm start
4. Test the project:
```sh
npm test
5. Publish the project:
```sh
npm publish
6. Commit the project:
```sh
npm commit
- **Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.**
## NPM Packages
@test.ds.e/foundation
```bash
npm install @test.ds.e/foundation
```
@test.ds.e/react
```bash
npm install @test.ds.e/react
```
@test.ds.e/scss
```bash
npm install @test.ds.e/scss
```