DEV Community: Muthu Pandian

React and Material-UI Landing Page/Template Starter Kit — Kanban Taskboard WebApp

Muthu Pandian — Wed, 23 Jun 2021 21:51:59 +0000

Are you looking for a good/responsive React landing/Template to bootstrap your app?. You are in the right place. This article will help you to get your web app up and running quickly. Ideal for any hackathon or innovation project!.

Github: https://github.com/hellomuthu23/react-material-ui-template

Live site: https://react-material-ui-template.web.app/

The ready-to-go template comes with the most essential tech-stack of

React
Typescript
React Router
Material-UI
Linter
Prettier
Cool Landing Page with mobile support
Unit tests using Jest+React testing library
Deployment to Google Cloud firebase using Github Action

The app also has below basic features of creating a Taskboard and managing tasks using Kanban board.

Create a new Taskboard
Open a Task Board
Add Task
Move Task across the different stage using the drag and drop feature
Delete Task

Landing Page

The Template has a home page with Toolbar for main navigation, the main content area for displaying page content, and a footer. It also offers a smooth transition/animation effect while loading the content on the page.

The Landing page is responsive as well, built using material-ui grids.

Kanban Taskboard Page

The Taskboard page displays all the tasks in a kanban style format, task can be moved across to different stages using Drag and Drop feature. Along with this you can Add and Delete tasks. All data is stored in local storage.

How to use/run the app locally?

You can run the app locally and see how it performs. Follow the below steps to run the app locally.

Clone the repo git clone https://github.com/hellomuthu23/react-material-ui-template.git
Run yarn command to install the required npm package.
Run yarn start to start the app.
Access the app at http://localhost:3000.

Hope you like this cool template and is of use to you!.
Good luck!.

Links:

Github: https://github.com/hellomuthu23/react-material-ui-template
Live site: https://react-material-ui-template.web.app/

Free Planning Poker React App

Muthu Pandian — Wed, 28 Apr 2021 20:16:46 +0000

Happy to share that my open source Planning Poker app is ready to use now.

URL: https://planning-poker-agile.web.app/

Introduction

Free / Open source Planning Poker Web App to estimate user stories for your Agile/Scrum teams. Create a session and invite your team members to estimate user stories efficiently.

How to use it?.

It should be self explanatory on how to use the app, but just in case if you get stuck somewhere, below instructions should help!

URL : https://planning-poker-agile.web.app/

Create new Session — In the home page, Enter session name and your name, and Click on Create button. Your new session should be ready to use now.
Invite your team members — Once you create the session, use the Invite button in session to copy the invite link and send it to your team members.

Once they receive invite link they can join the session by entering their name in the invite link, session ID will be auto populated.
Vote — Once all team members join the session, they can vote/provide estimate for the user story by clicking on the card.
Voting Status — Voting status will be displayed in the user card with emoji- 👍 — for Voting Done, 🤔 — for Yet to Vote.
Result- to see the voting results, moderator can click on the Reveal button to see all team members voting. If someone didn’t vote, you will see thinking face.
Restart — To start estimate for next user story, moderator can click on Restart button which should reset voting.
Exit — Once you Refinement/Planning team members can leave the session by clicking on Exit button
Recent Sessions — Both Moderator and team members can re-use the same session by accessing it from the Recent Sessions section in the home page. To keep environment friendly please use recent sessions as much as possible.

That’s it, as simple as it is. Start using the App with your teams now.

If you would like to contribute to the App, you are more than welcome. Visit the github repo here: https://github.com/hellomuthu23/planning-poker

Tech Stack: React, Material-ui, Firestore, Firebase

How to use useReducer and useContext hooks with Typescript in React

Muthu Pandian — Tue, 30 Mar 2021 22:52:46 +0000

Introduction

Is your components are complex with too many states and props?. its time to use useReducer and useContext hooks now to make them simple and clean.

In this article, we will see how to use useReducer and useContext hooks together with typescript in a step-by-step guide. If you are not familiar with useReducer and useContext, have read through in ReactJS site

What is useReducer?.
https://reactjs.org/docs/hooks-reference.html#usereducer

What is useContext?.
https://reactjs.org/docs/hooks-reference.html#usecontext

To showcase the use of useReducer and useContext hooks, we will create a simple poker game app in React and manage the game state using useReducer/useContext hooks.Let's get started.
Note: All the code sample mentioned below can be found in the github repo here

Steps

Create React app with typescript
Let's create a React app using create-react-app
```
npx create-react-app react-context-app --template typescript
# or
yarn create react-app react-context-app --template typescript
```
Navigate to react-context-app and run yarn start command to start the app. Access the app http://localhost:3000

While adding new files follow the below folder structure, and refer to the Github repo if you need any information on the imports, css files

Add State: Let's create a GameState that will hold the game state, the state will have players, gameName, winner details, and game status.

Create state.ts with GameState and initial state

export interface GameState {
    players: Player[];
    gameName: string;
    winner: Player | null;
    gameStatus: Status;
}

export enum Status {
    NotStarted = 'Not Started',
    InProgress = 'In Progress',
    Finished = 'Finished',
}

export interface Player {
    name: string;
    id: number;
    status: Status;
    value?: number;
}

export const initialGameState: GameState = {
    players: [],
    gameName: 'Game1',
    winner: null,
    gameStatus: Status.NotStarted,
};

Add Actions: Now let's add required Actions types for the poker games, actions like adding a player to the game, resetting the game, and playing the game.

Create actions.ts with the below actions

export enum ActionType {
    AddPlayer,
    SetPlayerValue,
    ResetGame,
}

export interface AddPlayer {
    type: ActionType.AddPlayer;
    payload: Player;
}

export interface SetPlayerValue {
    type: ActionType.SetPlayerValue;
    payload: { id: number; value: number };
}

export interface ResetGame {
    type: ActionType.ResetGame;
}

export type GameActions = AddPlayer | SetPlayerValue | ResetGame;

Add Reducer: Let's add a reducer file that will update the state for specific/required actions and side effects(calculate winner, game status etc).

Create reducer.ts with the below functions

export function gameReducer(state: GameState, action: GameActions): GameState {
    switch (action.type) {
        case ActionType.AddPlayer:
        return { ...state, players: [action.payload, ...state.players] };
        case ActionType.ResetGame:
        return {
            ...initialGameState,
            players: state.players.map((player) => ({
            ...player,
            status: Status.NotStarted,
            value: 0,
            })),
        };
        case ActionType.SetPlayerValue:
        let newState = {
            ...state,
            players: state.players.map((player: Player) =>
            player.id === action.payload.id
                ? {
                    ...player,
                    value: action.payload.value,
                    status: Status.Finished,
                }
                : player
            ),
        };

        return {
            ...newState,
            winner: getWinner(newState.players),
            gameStatus: getGameStatus(newState),
        };

        default:
        return state;
    }
}

const getWinner = (players: Player[]): Player | null => {
    let winnerValue = 0;
    let winner = null;
    players.forEach((player) => {
        if (player.value && player.value > winnerValue) {
        winner = player;
        winnerValue = player.value || 0;
        }
    });
    return winner;
};

const getGameStatus = (state: GameState): Status => {
    const totalPlayers = state.players.length;
    let numberOfPlayersPlayed = 0;
    state.players.forEach((player) => {
        if (player.status === Status.Finished) {
        numberOfPlayersPlayed++;
        }
    });
    if (numberOfPlayersPlayed === 0) {
        return Status.NotStarted;
    }
    if (totalPlayers === numberOfPlayersPlayed) {
        return Status.Finished;
    }
    return Status.InProgress;
};

// helper functions to simplify the caller
export const addPlayer = (player: Player): AddPlayer => ({
    type: ActionType.AddPlayer,
    payload: player,
});

export const setPlayerValue = (id: number, value: number): SetPlayerValue => ({
    type: ActionType.SetPlayerValue,
    payload: { id, value },
});

export const resetGame = (): ResetGame => ({
    type: ActionType.ResetGame,
});

Add Context: Now let's add a context file

Create context.ts with below GameContext that uses the above-created State

    export const GameContext = React.createContext<{
    state: GameState;
    dispatch: React.Dispatch<GameActions>;
    }>({
        state: initialGameState,
        dispatch: () => undefined,
    });

Add useContext and useReducer hook to the App: Now that we have created the necessary context, state etc, we can add them into the app.

Create a new component Poker.tsx for the poker game and add Context and useReducer hook as below. Ignore the errors for <PlayerList />, <Players /> , <GameStatus /> and <AddPlayer /> components for now, we will add these components in the coming steps. GameContext.Provider is the context provider here, any child component under this provider will have access to the context(i.e state and dispatch)

export const Poker = () => {
    const [state, dispatch] = useReducer(gameReducer, initialGameState);
    return (
        <GameContext.Provider value={{ state, dispatch }}>
            <div className='Header'>
                <header>
                    <p>React useReducer and useContext example Poker App</p>
                </header>
            </div>
            <div className='ContentArea'>
                <div className='LeftPanel'>
                    <PlayersList />
                </div>
                <div className='MainContentArea'>
                    <Players />
                </div>
                <div className='RightPanel'>
                    <GameStatus />
                </div>
            </div>
            <div className='Footer'>
                <AddPlayer />
            </div>
        </GameContext.Provider>
    );
};

Add the <Poker/> component to App.tsx component file.

Add Components: It's time to add the components and play the game.

Add AddPlayer.tsx component: This component will be responsible for adding new players to the game and updating the GameState using dispatch actions. We can access the GameState/Reducer using the useContext Hook here, useContext(GameContext)

export const AddPlayer = () => {
    const { dispatch } = useContext(GameContext);

    const [playerName, setPlayerName] = useState('');

    const handlePlayerNameChange = (event: ChangeEvent<HTMLInputElement>) => {
        setPlayerName(event.target.value);
    };

    const handleSubmit = (event: FormEvent) => {
        const player: Player = {
        id: +new Date(),
        name: playerName,
        status: Status.NotStarted,
        };
        dispatch(addPlayer(player));
        setPlayerName('');
        event.preventDefault();
    };
    return (
        <>
        <h4>Add New Player</h4>
        <form onSubmit={handleSubmit}>
            <input
            value={playerName}
            type='text'
            onChange={handlePlayerNameChange}
            />
            <button type='submit' value='Submit' disabled={playerName === ''}>
            Add
            </button>
        </form>
        </>
    );
};

Add PlayersList.tsx component: This component will show a list of players in the game. Again we use the amazing useContext hook to get list players from GameState.

export const PlayersList = () => {
    const { state } = useContext(GameContext);
    return (
        <div className='PlayersList'>
        <h4>Players</h4>
        {state.players.map((player) => (
            <label>{player.name}</label>
        ))}
        </div>
    );
};

Add Players.tsx component: This is the player's play area component. The component will show the player's status, card value, and a button to play the game. Again we use the amazing useContext hook to get players status from GameState and dispatch player action.

export const Players = () => {
    const { state, dispatch } = useContext(GameContext);
    const playPlayer = (id: number) => {
        const randomValue = Math.floor(Math.random() * 100);
        dispatch(setPlayerValue(id, randomValue));
    };
    return (
        <div>
        <h4>Players Status</h4>
        <div className='PlayersContainer'>
            {state.players.map((player: Player) => (
            <div key={player.id} className='Player'>
                <label>Name: {player.name}</label>
                <label>Status : {player.status}</label>
                <label>Card Value: {player.value}</label>
                <button
                disabled={player.status !== Status.NotStarted}
                onClick={() => playPlayer(player.id)}
                >
                Show Card
                </button>
            </div>
            ))}
        </div>
        </div>
    );
};

Add GameStatus.tsx component. Now finally we need to add a component to display the game status and winner information. The component also has a button to restart/reset the game, when the game is reset it clears all players card value and reset the game status(refer the reducer file on how this is done)

export const GameStatus = () => {
    const { state, dispatch } = useContext(GameContext);
    return (
        <div className='GameStatus'>
        <div className='Status'>
            <h4>Game Status</h4>
            <label>{state.gameStatus}</label>
            <button onClick={() => dispatch(resetGame())}>Start New Game</button>
        </div>
        <div className='Winner'>
            {state.gameStatus === Status.InProgress && (
            <label>
                In Lead : {state.winner?.name} by {state.winner?.value}
            </label>
            )}
            {state.gameStatus === Status.Finished && (
            <label>
                Winner: {state.winner?.name} by {state.winner?.value}
            </label>
            )}
        </div>
        </div>
    );
};

Add CSS file: copy the required CSS files from the github repo here: https://github.com/hellomuthu23/react-context-example
Play the Game: Once you have added all necessary components, CSS and states, you should be ready to play the game and see the use of useContext and useReducer hooks in action.

Conclusion

Hope you had fun creating useContext and useReducer hooks and playing the game. As you have seen, the components look clean with fewer props/state and easy to manage the state/actions using useContext hook.

Full working demo: https://codesandbox.io/s/quirky-grass-4f0yf?fontsize=14&hidenavigation=1&theme=dark

Github repo: https://github.com/hellomuthu23/react-context-example