https://github.com/gftf2011/clean-react-todolist
React.Js WEB APP built with Clean Architecture and Design Patterns that consumes a REST API server response
https://github.com/gftf2011/clean-react-todolist
clean-architecture clean-code design-patterns github-actions javascript nodejs reactjs rest rest-api test typescript
Last synced: 6 months ago
JSON representation
React.Js WEB APP built with Clean Architecture and Design Patterns that consumes a REST API server response
- Host: GitHub
- URL: https://github.com/gftf2011/clean-react-todolist
- Owner: gftf2011
- License: mit
- Created: 2023-05-23T00:23:13.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-20T02:52:34.000Z (over 1 year ago)
- Last Synced: 2024-07-20T21:47:14.121Z (over 1 year ago)
- Topics: clean-architecture, clean-code, design-patterns, github-actions, javascript, nodejs, reactjs, rest, rest-api, test, typescript
- Language: TypeScript
- Homepage:
- Size: 828 KB
- Stars: 14
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
CLEAN React.JS TODOLIST • :ledger: :computer:
About •
Supported OS •
Technologies •
Concepts •
Design Patterns •
Principles •
Required Tools •
Running Project •
Running Tests •
License
## :page_facing_up: About
This a frontend from a TODO LIST typescript project.
The objective from this project is to show how to create an WEB APP with a well-defined and decoupled architecture, using Clean Architecture concepts, dividing the layers responsibility and exploring the usage of several design patterns !
## :hammer_and_wrench: Supported OS
- [x] Mac OS
- [x] Linux
- [x] Windows - WSL
## :robot: Technologies
- React.JS
- React Router Dom
- React Redux
- React Testing Library
- Vite
- Vitest
- Eslint
- Prettier
- Github Action
## :large_orange_diamond: Concepts
- Advanced Object Oriented Programming
- Functional Programming
- Redux
- Clean Code
- Clean Architecture
- Design Patterns - (Object Oriented)
- Design Patterns - (Functional Style)
- Unit Testing
- Integration Testing
- Continuous Integration Pipeline
- Semantic Commits
- Test Doubles - (Dummies • Stubs • Spies • Fakes • Mocks)
- Linting
- Browser Cache
- Cache Validation
## :large_blue_diamond: Design Patterns
### Creational
- [Builder](https://refactoring.guru/design-patterns/builder)
- [Singleton](https://refactoring.guru/design-patterns/singleton)
### Structural
- [Facade](https://refactoring.guru/design-patterns/facade)
- [Adapter](https://refactoring.guru/design-patterns/adapter)
- [Composite](https://refactoring.guru/design-patterns/composite)
- [Decorator](https://refactoring.guru/design-patterns/decorator)
- [Proxy](https://refactoring.guru/design-patterns/proxy)
### Behavioral
- [Visitor](https://refactoring.guru/design-patterns/visitor)
- [Template method](https://refactoring.guru/design-patterns/template-method)
### Non GOF - Gang of Four - Official
- [Dinamic Factory](https://dl.acm.org/doi/10.1145/1753196.1753207)
## :blue_book: Principles
- [Single Responsibility Principle (SRP)](https://en.wikipedia.org/wiki/Single-responsibility_principle)
- [Open Closed Principle (OCP)](https://en.wikipedia.org/wiki/Open%E2%80%93closed_principle)
- [Liskov Substitution Principle (LSP)](https://en.wikipedia.org/wiki/Liskov_substitution_principle)
- [Interface Segregation Principle (ISP)](https://en.wikipedia.org/wiki/Interface_segregation_principle)
- [Dependency Inversion Principle (DIP)](https://en.wikipedia.org/wiki/Dependency_inversion_principle)
- [Don't Repeat Yourself (DRY)](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)
- [You Aren't Gonna Need It (YAGNI)](https://en.wikipedia.org/wiki/You_aren%27t_gonna_need_it)
- [Keep It Simple, Stupid (KISS)](https://en.wikipedia.org/wiki/KISS_principle)
- [Composition Over Inheritance](https://en.wikipedia.org/wiki/Composition_over_inheritance)
## :clipboard: Required Tools
- [x] Node - [https://nodejs.org/](https://nodejs.org/)
- Node version: 18.x.x
- npm version: 9.x.x
## :racing_car: Running Project
```sh
$ npm i
```
```sh
$ npm run dev
```
```sh
$ npm run dev:server
```
> #### OBS.: Use 2 Terminals, one to run the development server first and the second to run the application
## :test_tube: Running Tests
> ### Full Test Coverage Report
```sh
$ npm run test
```
## :memo: License
This project is under MIT license. See the [LICENSE](https://github.com/gftf2011/clean-react-todolist/blob/main/LICENSE) file for more details.
---
Made with lots of :heart: by [Gabriel Ferrari Tarallo Ferraz](https://www.linkedin.com/in/gabriel-ferrari-tarallo-ferraz/)