Using XState as a orchestrator for UI

[karntrehan]

Project Details

Workflow is a complete package that allows you to deploy an application with authentication, database, backend, storage service, frontend and enketo forms with just a single command.

Enketo has been used all around the world for a wide range of uses from needs assessments in humanitarian aid, to raising historical awareness, to clinical research, to election monitoring.

Feature to be implemented

We need to create a state machine based system in React which allows to handle UI changes according to the state transitions and actions using XState and move application to NextJs

What needs to be built

1. Migrate app to NextJS
2. Add Redux Persist
3. Implement State Machine logic for UI

Learning Path

Complexity

Medium

Skills Required

React, Redux, XState, LocalForage, Enketo

Name of Mentors

@amit-s19

Project Size

8 weeks

Product Setup

Follow this link

Acceptance Criteria

• React app is now a NextJS based app
• Redux is now integrated with properly written dispatchers, reducers, actions and middlewares
• Transform React app to be powered through state machines and UI is handled through state transitions using XState
• Enketo forms render properly

Milestones

• Setting up the project locally
• Understanding NextJS
• Figuring out how state machine works and how to implement in React
• Understanding Redux and integrating in React
• Integrating State Machines in the app

C4GT

This issue is nominated for Code for GovTech (C4GT) 2023 edition.
C4GT is India's first annual coding program to create a community that can build and contribute to global Digital Public Goods. If you want to use Open Source GovTech to create impact, then this is the opportunity for you! More about C4GT here: https://codeforgovtech.in/

[Drish-xD]

@karntrehan I am interested in working on this project

How can I contribute to this Project?

• I am a front-end developer with React.js as a main stack
• I am familiar with redux, and xState

[SrijanShovit]

Hey @karntrehan I already know NextJs so I guess I can contribute

[Tushar-go]

Hi @karntrehan i am interested to contribute in this project

[J0SAL]

Hey @amit-s19!

Just went through the issue and looking forward to submitting a proposal for the project.

Thank You!!

[Rohan27s]

I have gone through the project and it seems really interesting and matches my skillset and experience too, Looking forward to submitting the proposal for this one!

[Jeevan-Kiran-Lenka]

Hey, would love to work on this issue :)

[priyanshi0720]

Hi, I'm interested in this project. It would be great to work on this project and bring in more creativeness and innovation to the idea.

[RoshanAnsy]

Hey, I would like to contribute to this project.

[VenuChoudhary001]

Hey I am interested in contributing to the project . Do we have any slack or discord servers? Also I have some doubts regarding state machine. I went through the xstate docs and got to know that they are just kind of flows (from one state to another on a particular input), however I have doubts regarding how are we using state here? Is this project something like vercel/ digital ocean / heroku? I am well aware with Next js / redux , so the states which you mention above, are they the normal redux states which dictate the flow of application?

[amberIS01]

Hi @karntrehan i am interested to contribute in this project

[Vivekumar08]

Hello, @karntrehan, per my understanding of the project's objective is to migrate the existing app to Next.js, implement state machine logic using XState, integrate Redux Persist, and ensure the proper rendering of Enketo forms aligns perfectly with my experience and interests. I have a strong background in NextJ, React, and Redux, and have worked with similar technologies in the past.

I am particularly enthusiastic about the challenges presented by this project, including the migration to Next.js and the implementation of state machine logic. I believe these tasks will provide an opportunity for me to further enhance my skills and contribute to the project's success.

I am eager to collaborate with the team, learn from the mentor (@amit-s19), and work together towards achieving the project milestones. I am committed to delivering high-quality code and ensuring a seamless user experience throughout the application.

Please let me know if there are any specific tasks or areas of focus that need attention at this stage. I am ready to actively contribute and make a meaningful impact on the project. If you don't mind, could you please enlighten me on where I can submit my proposal for this project?

[aakanksha1801]

hello @karntrehan I am MERN stack web developers I wanted to contribute in this project.

[mustafaazad03]

Hi @karntrehan , @amit-s19 ,
I am Mustafa Azad. Currently, I am MERN Stack Developer with some knowledge of Xstate. As I have build many such projects with NextJs and Redux in the past and learned many efficient techniques to implement functionality. This project grabs my interest and I would love to contribute in this.