TODO-UI

A todo application build with reactjs, typescript, clean code architecture and tdd

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Testing
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

This application is based on the clean code architecture. The reason i prefer to use this architecture is because it makes change easier and in world of software only change is constant.

Few words about the above architecture:

• Inner Layer Entities. Handles the creation and reading of our entities (todo). DB. Our choice of DB (in memory, MongoDB, SQL), this is independent of the model. Note that in Clean Architecture this is considered an outer layer framework, but for practical applications I find it easier to place it inner and have the data-access layer depend on it rather than injecting it in.

  Usecases: Defines the interaction or behavior of the system.

• Middle Layer Adapters. Handles transfer between the frontend and api (like an ORM). UseCases. As the name explains the use case are about the

• Outer Layer View and Containers. Represents the UI or interface (Web or CLI). It communicates only with the data-access layer. Views are dump components and containers have states related to the view.

For Deployment

• Husky pre-push to trigger tests
• CircleCI pipeline to trigger build, test and deployment on push to linux server.
• Digital Ocean Droplet

(back to top)

Built With

• React.js
• Typescript
• Nodejs

(back to top)

Getting Started

Prerequisites

• Nodejs

• yarn

  npm install -g yarn

Installation

1. Clone the repo

   git clone https://github.com/Abdulmoiz-Ahmer/todo-ui.git

2. Install NPM packages

   yarn install

3. To seed database run

    yarn start

(back to top)

Usage

This repository has been used with a todo backend api and it's repository.

(back to top)

Testing

• Acceptance testing: Acceptance tests are in the tests/acceptance directory. Can be invoked with:

  yarn test:acceptance

• Component: Component tests are in the tests/acceptance directory. Can be invoked with:

    yarn test:component

• Unit testing: Component tests are in the tests/unit directory. Can be invoked with:

    yarn test:unit

• Contract Driven Testing:

    yarn test:contracts

Sample test run report of circleci pipeline

Libraries used for testing:

• Jest for assertion.
• React Testing Library for ui testing.
• React Hooks Testing Library for custom hook testing.
• Pact.io

Note: To invoke all kind of tests use:

 yarn test

Contributing

Contributions of any kind are
greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License.

(back to top)

Contact

Your Name - Abdulmoiz Ahmer - abdulmoiz1996@gmail.com

Project Link: https://todo.ui.cryptobros.site

(back to top)

Acknowledgments

• Clean code architecture
• CircleCI
• Docker
• Digital Ocean Droplet
• React Testing Library
• Jest
• Faker
• crossenv
• Husky

(back to top)