herbsjs / todolist-on-herbs Goto Github PK

A sample Todo List app using Herbs

License: Other

JavaScript 100.00%

todolist-on-herbs's Introduction

What's Herbs?

Herbs is an open source library for backend applications. It is focused on achieving faster deliveries and with happier developers, without neglecting the long-term need to constantly evolve your application as requirements change.

See more on the website: https://herbsjs.org/

Getting Started with TO DO list on Herbs

Within this repository, you will find a front-end application, made in react consuming a back-end application, using Herbs, the API is made in graphQL

Todolist on Herbs

This is a example on how to build a backend application using Herbs.

Live example Herbs Shelf

Using

$ npm install
$ npm run knex:migrate
$ npm start

You should receive this message => 🚀 Server UP and Running in port: 4000

VSCode launchers (launch.json) are also available.

Postgresql setup

Change knexfile.js and src\infra\config\dev.json connection info.
Run migration:

$ npx knex migrate:latest --env development

Herbs Shelf

View all the use cases and its steps in just one place.

Herbs Shelf: http://localhost:4000/herbsshelf

Documentation dynamically generated by herbsshelf.

GraphQL

GraphQL Playground: http://localhost:4000/graphql

GraphQL dynamically generated by herbs2gql.

Rest

Express routes dynamically generated by herbs2rest.

Herbs REPL

View all the use cases your termnal.

$ node ./src/infra/repl

REPL dynamically generated by Herbs REPL.

Settings

Environment:

.env.{environment} files.

Rename one of the files to just .env.

Default is dev. Also check for HERBS_EXCEPTION env variable.

Config:

Edit /backend/infra/config/{environment}.json files if necessary.

Diagram

classDiagram
    class Item {
        Number id
        String description
        Boolean isDone
        Number position
    }
    class ToDoList{
        Number id
        String name
        Item[] items
        isEmpty()
        lastPosition()
    }

    ToDoList "1" --> "*" Item

How to contribute

If you would like to help contribute to this repository, please see CONTRIBUTING

License

MIT License

todolist-on-herbs's People

Contributors

Stargazers

Watchers

todolist-on-herbs's Issues

Upgrade the To-do-List Apollo Server 3

From @m7vicente

Apollo Server 3 has significant changes in the implementation of graphql api structure.

Update the To-do-List project will help us to understand if the upgrade has some effect o herbs2gql and will make the To-do-List example more actual as possible.

Implement Update Item

Implement Update Item use case and mutation

Implement Create Item

Implement Create Item use case and mutation

Herbs Shelf not working

When accessing http://localhost:4000/herbsshelf it shows nothing.

Debug:

Add getAll lists in backend

We already have a feature that can get lists by their own ids, would it be a nice ideia to create a query to get all lists?

Delete list in SPA

Implement the functionality of deleting a list in the SPA using the DeleteList usecase

This example project must to be generated with herbs-cli?

I think this example app must to be generated with our herbs-cli ooor the example app must to be inside herbs-cli repository into an example folder

Create list using SPA architecture.

Implement the list creation functionality based on the SPA architecture.

Implement a SPA front-end

Create a simple SPA to start consume the API and have a nice UI.
Should it be a completely separate project or a directory on the root folder works (back-end/front-end)?

Adjust the main read me file

Write a new main read me explaining the complete project

how to use
front end stack + link to read me
back end stack + link to read me

UpdateList and DeleteList

Implementation of UpdateList and DeleteList use case and GraphQL mutation for that operations.

Application breaks after update herbs2gql version

Describe the bug
After updating herbs2gql with version 2.1.4 (herbsjs/herbs2gql#47) or higher the application breaks when is starts up

To Reproduce
Steps to reproduce the behavior:

Run the project, and you will see in the console the error.

Screenshots

Additional context
@pamellaas, @Vx-Nico please fix this bug.

Create method to delete item

Create method to delete item from the todo list

Create and Update Item on List

Implementation of CreateItemList and UpdateItemList use case and GraphQL mutation for that operations.

Fix package.json

package.json is pointing the npm start to wrong folder.

Implementation of frontend behavior

We need to implement some behaviors on frontend, that improve user experience.

Update List in SPA

Create method to update lists

Layout and Design

I believe that the project can include a simple layout with a good design, but that shows the real potential of the project.

Frontend - Implement GetList and CreateList

Implement methods bellow on frontend using Apollo React Hooks for connect with graphql api:

GetTodos
CreateTodo

The items inside list are not returning inside route /lists

Describe the bug
When accessing the route /lists (get all lists) only the lists are returned but not the items inside the lists.

To Reproduce
Run localy and access the route http://localhost:4000/lists

What about herbs CLI ?

Herbs CLI

Inspired by VueJS, Angular, dotnet and others, I would like to suggest the creation of a CLI to help the new herbs adopters

Usually developer use CLIs to easily start an project and principally the jr developers use it to maintain the project in the same architecture proposed by the framework.

The main idea of this CLI is to facilitate the creation of new projects and modules in your project that use herbs. In the future I believe this CLI can be an tool to check your herbs quality code, help you to modeling your clean archtecture, analisy logs and more, but for now it will start being something like a semi-inteligent code generator.

Herbs start

Propose 1

My initial propose is to build an entry project by the CLI like an template

Herbs new app -—graphql -—knex-pg (We can use --rest --mongo --knex-sql-server and other)

This will create an app with graphql that use a knex-repository, the generated files will be something like this:

│   ├── herbs.json
│   ├── index.js
│   ├── knexfile.js
│   ├── package.json
│   └── src
│       ├── domain
│       │   ├── entities
│       │   │   ├── entity.js
│       │   │   ├── entity.test.js
│       │   └── usecases
│       │       ├── createEntity.js
│       │       ├── createEntity.test.js
│       │       ├── deleteEntity.js
│       │       ├── deleteEntity.test.js
│       │       ├── getEntity.js
│       │       ├── getEntity.test.js
│       │       ├── updateEntity.js
│       │       └── updateEntity.test.js
│       └── infra
│           ├── api
│           │   ├── graphql
│           │   │   ├── custom
│           │   │   ├── defaultResolver.js
│           │   │   ├── defaultResolver.test.js
│           │   │   ├── index.js
│           │   │   ├── mutations.js
│           │   │   ├── queries.js
│           │   │   └── types.js
│           │   └── server.js
│           ├── config
│           │   ├── config.js
│           ├── db
│           │   └── migrations
│           │       ├── 20210101000000_entity.js
│           ├── repl
│           │   └── index.js
│           └── repositories
│               ├── memDB
│               │   ├── inMemDB.js
│               │   ├── EntityRepository.js
│               │   ├── EntityRepository.test.js
│               └── pg
│                   ├── connection.js
│                   ├── EntityRepository.js

note we have an herbs.json, this json will be an control file to help the cli when it add new modules in the project.

Propose 2

my second propose is to build an modular project, so the first thing you need is to create your entities int the root project path:

├── user.js
├── item.js

so when we start our project we can generate all project using the entities
Herbs new app -—graphql —-knex

This will create an app with graphql that use knex into repository, the generated files will be something like this:

│   ├── herbs.json
│   ├── index.js
│   ├── knexfile.js
│   ├── package.json
│   └── src
│       ├── domain
│       │   ├── entities
│       │   │   ├── user.js
│       │   │   ├── user.test.js
│       │   └── usecases
│       │       ├── createUser.js
│       │       ├── createUser.test.js
│       │       ├── deleteUser.js
│       │       ├── deleteUser.test.js
│       │       ├── getUser.js
│       │       ├── getUser.test.js
│       │       ├── updateUser.js
│       │       └── updateUser.test.js
│       │       ├── createItem.js
│       │       ├── createItem.test.js
│       │       ├── deleteItem.js
│       │       ├── deleteItem.test.js
│       │       ├── getItem.js
│       │       ├── getItem.test.js
│       │       ├── updateItem.js
│       │       └── updateItem.test.js
│       └── infra
│           ├── api
│           │   ├── graphql
│           │   │   ├── custom
│           │   │   ├── UserResolver.js
│           │   │   ├── UserResolver.test.js
│           │   │   ├── ItemResolver.js
│           │   │   ├── ItemResolver.test.js
│           │   │   ├── index.js
│           │   │   ├── mutations.js
│           │   │   ├── queries.js
│           │   │   └── types.js
│           │   └── server.js
│           ├── config
│           │   ├── config.js
│           ├── db
│           │   └── migrations
│           │       ├── 20210101000000_User.js
│           │       ├── 20210101000000_item.js
│           ├── repl
│           │   └── index.js
│           └── repositories
│               ├── memDB
│               │   ├── inMemDB.js
│               │   ├── UserRepository.js
│               │   ├── UserRepository.test.js
│               └── pg
│                   ├── connection.js
│                   ├── UserRepository.js
│                   ├── UserRepository.test.js
│               │   ├── ItemRepository.js
│               │   ├── ItemRepository.test.js

note we have an herbs.json, this json will be an control file to help the cli when it add new modules in the project.

Propose 3

Makes the propose-1 so grow the CLI to propose-2

Herbs Modules

After create your app, you can write an new entity in the project and generate a new crud for this entity, example:
herbs new entity ShoppingCart(or you can specify the entity path with --path)
So we will in the entities path `src/entities/item.js, read the file and generate a CRUD usecase (create, delete, list, update), generate the repository and add this entity into graphql layer.

│   ├── herbs.json
│   ├── index.js
│   ├── knexfile.js
│   ├── package.json
│   └── src
│       ├── domain
│       │   ├── entities
│       │   │   ├── user.js
│       │   │   ├── user.test.js
│       │   └── usecases
│       │       ├── createUser.js
                [...]
│       │       ├── createItem.js
│       │       [...]
                ├── createShoppingCart.test.js
│       │       ├── deleteShoppingCart.js
│       │       ├── deleteShoppingCart.test.js
│       │       ├── getShoppingCart.js
│       │       ├── getShoppingCart.test.js
│       │       ├── updateShoppingCart.js
│       │       └── updateShoppingCart.test.js
│       └── infra
│           ├── api
│           │   ├── graphql
│           │   │   ├── custom
                    [...]
│           │   │   ├── ShoppingCart.js
│           │   │   ├── ShoppingCart.test.js
│           │   │   ├── index.js
│           │   │   ├── mutations.js
│           │   │   ├── queries.js
│           │   │   └── types.js
│           │   └── server.js
│           ├── config
│           │   ├── config.js
│           ├── db
│           │   └── migrations
                    [...]
│           │       ├── 20210101000000_ShoppingCart.js
│           ├── repl
│           │   └── index.js
│           └── repositories
│                   memDB
│                   ├── inMemDB.js
                    [...]
│                   ├── 20210101000000_ShoppingCart.js
│                   pg
│                   ├── connection.js
│                   ├── UserRepository.js
│                   ├── UserRepository.test.js
│                   ├── ItemRepository.js
│                   ├── ShoppingCartRepository.test.js
│                   ├── ShoppingCartRepository.test.js

other example is to create new presentation layer
herbjs new module --rest

so we add the herbs2rest into package.json and generate the rest layer

I believe we can have the commands:

beta stage
herbs new app < --graphql --rest --knex --mongo >

release 1.0
herbs add layer < --graphql --rest --knex --mongo >
herbs add entity <name or --path>

Frontend - Implement UpdateList

Coverage Tests and Authorization Rules

I believe it is necessary to update the authorization rules, and improve test coverage.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.