Create a demo TODO APP with React / NextJS / Svelte / Vue

[brunobuddy]

We built a demo repo to showcase the integration of Manifest with different frontend frameworks.

The demo is based on the popular TodoMVC website that compares the differents frameworks building the same todo app. In our use case we added a small Manifest backend with a db for persistant data:

name: My TODO App ✅
entities:
  Todo:
    seedCount: 10
    properties:
      - title
      - { name: completed, type: boolean }

We need now to create frontend examples based on the TodoMVC ones:

• [ ] React
• [ ] NextJS
• [ ] Svelte
• [ ] Vue
• [ ] Other frontend ?

How to submit a demo

• Clone the mnfst/frontend-examples repository
• Install and checkout the angular implementation for inspiration
• Go to TodoMVC Github and grab the framework that you are going to integrate
• Copy it on the /examples folder and connect it to the backend
• Make sure that there is an npm run dev script in the package.json
• Make your PR in the mnfst/frontend-examples mentionning this issue

[ChinoUkaegbu]

Hi, I'd like to work on the React example!

[dawipayandas]

I'd like to work under this issue

[SebConejo]

Hi @ChinoUkaegbu and @dawipayandas . Which frontend do you want to work with? @brunobuddy FYI

[ChinoUkaegbu]

I can work on React.

[ChinoUkaegbu]

Just wondering what version of npm I should use for installing manifest. I'm getting a few errors when using Node.js v20.10.0 and I suspect it's as a result of that.

[brunobuddy]

@ChinoUkaegbu can you send me a screenshot of your errors ?

[ChinoUkaegbu]

[brunobuddy]

@ChinoUkaegbu it is not tested on Windows, sorry.... Only Mac and Linux for now

[LLxD]

Hey @brunobuddy! I'd love to tackle the Svelte one ;). Is it still available?

[brunobuddy]

@ChinoUkaegbu I just released a version that fixes that issue on Windows !

[brunobuddy]

@LLxD yes !

[ChinoUkaegbu]

Thanks! I'll continue working on the React example.

[ChinoUkaegbu]

Got this error when trying to run the angular example :( Manifest installed without errors but running npm run dev is resulting in this:

[ChinoUkaegbu]

Good news and bad news:

I got the manifest backend to work. Had to change the nodemonPath in watch.js to end with nodemon.cmd instead of nodemon since that's the Windows specific executable for nodemon. Shown below: I'm not sure how to modify the script to handle cross-platform compatibility? I think npx can handle that?

I'll work on the Angular error next but it still persisted.

[brunobuddy]

@ChinoUkaegbu sorry I did not explain to you that you had to get the latest version of the "manifest" package. I updated it on the "main" branch you can pull it and it should fix the issue

[ChinoUkaegbu]

I believe I was working off the latest version. I pulled the changes before starting.

The errors I got two weeks ago were with adding manifest using npx add manifest but they were resolved with the latest update! Now the errors from two days ago were with npm run manifest which was because of the nodemon executable not being compatible with windows but that was resolved like I mentioned above when I used nodemon.cmd instead.

[LLxD]

Hey @brunobuddy! Added a PR for the svelte example. Could you give it a check pls? ;)