DEV Community: Rosy Shrestha

Code, Create, and Connect: Reflections on a 24-Hour Hackathon Experience

Rosy Shrestha — Sun, 19 Mar 2023 02:53:45 +0000

In March 2023, I went to a 24-hour hackathon hosted by the Google Developer Student Club at the University of Michigan Dearborn. It was my first time at an event like this, and I want to share my experience - what my team did, and how we won!

Watch the clock

It's easy to get carried away and aim to achieve a lot in the 24-hour period, but we had to stay mindful of the time constraints. During our brainstorming session, we came up with several ideas, but we realized that it was crucial to be realistic and narrow them down. It was quite amusing that daylight savings started on the same day as the hackathon, and we ended up losing an hour. However, the organizers were very generous and gave us an additional hour to make up for it. To help us focus on the essential features, we created user stories and categorized them as good-to-haves and must-haves and focused on the latter.

Nailing the pitch

We were a team of four with different skills and backgrounds who teamed up for the hackathon. During the later stages of the event, we assigned one of our members to focus solely on the pitch and presentation which was crucial. This made a big difference in how well we were able to showcase our MVP and its potential.

Breaks

Taking breaks in-between was important. Whether it was a lunch break or a short walk, stepping away from our work helped us to recharge and stay focused. The organizers had arranged some fun activities, and my personal favorite was swing dancing. I teamed up with a partner outside of my project group and learned some new moves, which was a blast. The hackathon could get stressful at times, but we powered through and had a lot of fun along the way.

Beyond Coding

The hackathon wasn't all about coding our project. We attended workshops, networked with industry experts and socialized with participants from different universities. We took breaks to chat with other participants and share ideas. It was cool to hear their ideas and offer our thoughts. Likewise, getting a fresh perspective from outside our team helped us improve our project as well. It's important to seek out different perspectives and not get too caught up in our own bubble.

Making the Most of a Low-Battery Demo

During the demo, our laptops were running low, and unfortunately, we were seated quite far from the power outlet. We didn't finish everything on our to-do list, but we were still happy with what we had accomplished. By the end of the hackathon, we had a working demo and a solid presentation for the judges.

Win

The final showcase of the hackathon was the best part. We were all feeling a mix of exhaustion and excitement as we prepared to showcase our project. The hackathon experience itself was a victory for us, and we were surprised and thrilled to receive 3rd place overall.

A big congratulations to all the other teams and participants who took part in the hackathon. It's always a win to be a part of such a great event and see what everyone is capable of creating in a short amount of time. Check out all the projects here.

Overall, it was an amazing experience, and I'm looking forward to the next hackathon!

Deploy NestJS typescript app to Heroku (Solved: 503 Error)

Rosy Shrestha — Sat, 27 Feb 2021 18:34:29 +0000

Deploying applications on Heroku is pretty straightforward in most cases. But I ran into a problem while deploying my NestJS application that included TypeScript.

The build succeeded but I kept running into 503 service unavailable error.

It took me a while to figure out the problem. Turns out we need some of the devDependencies in package.json for the app to run properly since we are performing the TypeScript build on the server.

To future me, here are the steps to deploy NestJS app, which includes TypeScript, to Heroku:

Sign up at Heroku or login if you already have an account set up.
Create a new app.
Then you'll be redirected to a page where you have options to choose deployment methods. Clear instructions are provided in all of the available options.

I picked Github for convenience.
In your NestJs project folder, add an optional dynamic port since our web server will be assigned a dynamic port by Heroku and we cannot statically define the port through which our application will listen.

await app.listen(process.env.PORT || 3000);
If you use nest-cli to create your NestJS application, the package.json includes the following command that runs our app in production mode. And if not, add it manually:

"start:prod": "node dist/main.js"

Now, create a file called Procfile, without any file extension at the root of your project. Heroku uses the procfile to know the commands to start our application. Add the following in the file:

web: npm run start:prod

or

web: yarn start:prod
Now for the important step that I messed up. Heroku sets the NODE_ENV to production and NPM_CONFIG_PRODUCTION flag to true by default and installs production dependencies only.

To install devDependencies, set config vars NPM_CONFIG_PRODUCTION to false.

You can add/edit config vars using Heroku dashboard. The option is available under the app's settings tab.

Or as an alternative, heroku-cli can be used.

heroku config:set NPM_CONFIG_PRODUCTION=false

Edit: Not all devDependencies (like prettier, eslint) are required so it's preferable to move necessary dependencies for production from devDependencies to dependencies
Make sure to add the following in .gitignore file to exclude them from deploying to Heroku

/dist /node_modules
Commit and push your changes to the remote repository. And, deploy your changes via any of the available integrations.

Either by using Heroku cli
git push heroku <branch_name>

Or using the Github deployment method from the Heroku dashboard

Build your first app with Mobx and React

Rosy Shrestha — Fri, 31 Jan 2020 04:28:10 +0000

MobX is another state management library available for React apps besides Redux and Context API. However, MobX is not just a library for React alone, it is also suitable for use with other JavaScript libraries and frameworks that power the frontend of web apps. The MobX >=5 version runs on any browser that supports ES6 proxy.

Major concepts

Here are the major concepts of mobx:

Observable

The observable allows us to turn any data structure or property into an observable state so that other things can keep track of these observable changes and values.

Action

The action allows us to change the state i.e. values of observable. The state data should not be modified outside actions to ensure code scalability.

Computed

The computed property allows us to derive some value based on the state change. The computed values are obtained by performing some sort of calculations on observables.

Observer

The observer allows us to keep track of changes in observables so that React gets notified on any change and starts re-rendering. They are provided by the mobx-react package.

Store

The store is the source of data. Unlike redux, in mobx data and functions which change the data live in the store. So a store may contain observables and actions.

Very in a nutshell mobx works on the observable — observer flow. You declare some data to be observable and when that data changes all the observers that are using that data will be notified.

Now let’s put these concepts into practice.

We are going to create a simple application where users can react to images and comment on it, similar to Facebook. Here’s the link to the demo.

Project setup

Assuming prior knowledge of React, you need to have NPM and Node.js installed on your machine.

I am using custom webpack configuration and setting up the project to enable decorators. Don’t worry, there’s an alternative way to do this without decorators as well. For this example, I’m using decorators anyway since it’s more concise. But I’ll mention the alternatives as well. If you’re using create-react-app you can skip these setup steps.

Pull the master branch from this repository for initial setup.

Run yarn to install dependencies and start the project using yarn start. The app will run on http://localhost:8080.

Setup for decorators

The following plugins are required to enable ESNext decorators.

yarn add --dev @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators

Then add the following configuration to .babelrc file.

"plugins": [
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ],
        [
            "@babel/plugin-proposal-class-properties",
            {
                "loose": true
            }
        ]
    ]

Styles

Pull design branch for styles. All the styling is under the css folder inside the src directory. Here's a visual of our app components.

Card component with:

Randomly generated image.
Count component to keep track of the number of likes and comments.
Button component with Like and Comment buttons.

Form component with the input field to post a comment.
Comments component with a list of comments.

Installing Dependencies

Install mobx state management solution and mobx-react library to connect the state layer to the React view layer.

yarn add mobx mobx-react

Now we will actually start adding features using Mobx.\

Store

First, we’re going to create a Store.jsx under store folder.

import { observable, action } from 'mobx'

class Store {
    @observable likesCount = 12

    @action updateCount{
        this.likesCount++;
    }
}

const storeInstance = new Store()
export default storeInstance;

Here we’ve created a Store class with likesCount as an observable state, updateCount as an action to modify the state and then exported a new instance of the Store.

If your setup doesn’t support decorators the above code can be re-written as:

import { decorate, observable } from "mobx";

class Store {
    likesCount = 12;

    updateCount{
        this.likesCount++;
    }
}

decorate(Store, {
    likesCount: observable,
    updateCount: action
})

Then we make the store accessible throughout the app by passing it using the Context API in main.js.


import storeInstance from './store/Store'

export const StoreContext = React.createContext();

ReactDOM.render(
        <StoreContext.Provider value={storeInstance}>
            <Post />
        </StoreContext.Provider >
    , document.getElementById('app'));

Now we can access the store and its class properties in Count.jsx using useContext. Since we've set the initial value of likesCount to 12, your app will render that value.

import React, { useContext } from 'react';
import { StoreContext } from '../main'

export default function Count() {
    const store = useContext(StoreContext)
    return (
        <div className="row reactions-count" >
            <div className="col-sm" align="left">
                <i className="fa fa-thumbs-up" />{store.likesCount}
            </div>
            <div className="col-sm" align="right">
                3 comments
        </div>
        </div>
    )
}

Remember that the observable state can only be modified via actions. So in order to increment likesCount when the user clicks on Like button we are going to use updateCount action from the store that we've already defined. Handle onClick action in Buttons.jsx.

const store = useContext(StoreContext)
<button type="button" className="btn btn-light align-top" onClick={() => store.updateCount()}>
  <i className="fa fa-thumbs-o-up" />
  Like
</button>

If you click on the Like button you won’t see any changes.

To observe and react to changes in a functional component, we can either wrap the component in observer function or implement useObserver hook, like below. So let’s update Count.jsx as:

import { useObserver } from 'mobx-react';

...
  return useObserver(() => (
        <div className="row reactions-count" >
            <div className="col-sm" align="left">
                <i className="fa fa-thumbs-up" />{store.likesCount}
            ...
            ...
        </div>
        </div>
    ))

Now the like count updates when you click on the button.

Comments

Let’s start working on the comments section.

An array data structure can be observable as well. Let’s create an observable comments field. Add the following in Store.jsx.

@observable comments = ["Wow", "awesome"]

Then access the comments property of Store class from Comments.jsx like we did before in Count.jsx using useContext. The Comments component will now render the comments from the store.

import React, { useContext } from 'react';
import { StoreContext } from '../main';

export default function Comments() {
    const store = useContext(StoreContext)
    return (
        <table className="table">
            <tbody>
                {
                    store.comments.map((comment, index) => {
                        return (
                            <tr key={index}>
                                <td>
                                    {comment}
                                </td>
                            </tr>
                        )

                    })
                }
            </tbody>
        </table>
    )
}

We also need to allow the user to add comments from the form.

First, let’s create an action called postComment in the store that simply pushes the new comment into the previous array of comments. Add the following lines of code in Store.jsx.

@action postComment(comment){
            this.comments.push(comment)
}

Then update the Form.jsx component as:

import React, { useContext } from 'react';
import { StoreContext } from '../main';

export default class Form extends React.Component {

    handleSubmit = (e, store) => {
        e.preventDefault();
        store.postComment(this.comment.value);
        this.comment.value = "";
    }

    render() {
        return (
            <StoreContext.Consumer>
                {
                    store => (

                        <form onSubmit={(e) => this.handleSubmit(e, store)}>
                            <div>
                                <input type="text" id={'comment'} className="form-control" placeholder={"Write a comment ..."} ref={node => {
                                    this.comment = node;
                                }} />
                            </div>
                        </form>
                    )
                }
            </StoreContext.Consumer>
        )
    }
}

Here we’ve simply created a function that calls the store’s postComment action when the user submits the comment and set the input field to empty after submit.

To update the comments component when a new comment is added, we need to make the Comments component an observer as we did with Count. So in Comments.jsx wrap the content to be returned with useObserver. Also, don't forget to import useObserver.

return useObserver(() => (
        <table className="table">
            <tbody>
                {
                    store.comments.map((comment, index) => {
                       ...
                       ...
                }
            </tbody>
        </table>
    )
    )

Now if you write any comment and hit enter your list of comments will automatically update.

Let’s focus on the input field when you click on the comment button. We can simply use HTML DOM focus( ) method. But first, let’s give the input field an id.

<input type="text" id={'comment'} className="form-control" placeholder={"Write a comment ..."} 
ref={node => {this.comment = node;}} />

Then add focus method on onClick handler of comment button in Buttons.jsx component.

<button type="button" className="btn btn-light" 
onClick={() => document.getElementById('comment').focus()}>
  <i className="fa fa-comment-o" />
  Comment
</button>

Now when you click on the comment button the comment field is focused.

Computed

Now in order to get the count of the comments, we are going to create a commentsCount getter function that computes the observable comments array's length. MobX will ensure commentsCount updates automatically whenever comments array changes. In Store.jsx add the following:

@computed get commentsCount(){
            return this.comments.length;
}

Then simply update the following lines in Count.jsx.

<div className="col-sm" align="right">
      {store.commentsCount} comments
</div>

You’ll also notice that when you add a comment, the count gets updated as well.

Services / API call

Making an API call and asynchronous codes are frequent in applications. Since this is a custom webpack configuration to enable async/await update the .babelrc file with the following.

"presets": [
        ["@babel/preset-env",
        {
            "targets": {
              "node": "10"
            }
          }
        ],
        "@babel/preset-react"
    ],

or else you might run into this error

Let’s change the image in the Card.jsx component on button click. We are going to use this fun and free API to fetch the characters' images from the Rick and Morty show. Check out their documentation for more details.

You’ll find from this section that we can get a single character by adding the id as a parameter: /character/1

https://rickandmortyapi.com/api/character/1

Let’s create an image store with observable imageUrl containing default value. Then we create a fetchImage action that returns the JSON response of a single character.

After await a new asynchronous function is started, so after each await, state modifying code should be wrapped as action. There are multiple ways to do this. Read this section of Mobx documentation for more details.

One way is to use the runInAction, which is a simple utility that takes a code block and executes in an anonymous action. Here we are wrapping the state modifying part after await in runInAction.

import { action, runInAction, observable } from "mobx";

class ImageStore {

    id = 1

    @observable imageUrl = `https://rickandmortyapi.com/api/character/avatar/1.jpeg`

    @action async fetchImage() {
            const characterId = ++this.id
            const response = await fetch(`https://rickandmortyapi.com/api/character/${characterId}`)
            const data = await response.json()
            runInAction(() => {
                this.imageUrl = data.image
            })
    }
}

const imageStore = new ImageStore()

export default imageStore;

You can also run only the state modifying part of the callback in an action. Here we’ve created an action to set the URL outside the fetchImage and then called it as required.

class ImageStore {

    ... 

    @action async fetchImage() {
            ...
            this.setImageUrl(data.image)
    }


    @action setImageUrl(url) {
        this.imageUrl = url
    }
}

Then in Card.jsx component

Import the imageStore and set the source of the image to the observable imageUrl from the store.
Implement useObserver to react to changes.
Add a button with onClick handler that calls the fetchImage to get the image URL.

import React from "react";
import Count from "./Count";
import Buttons from "./Buttons";
import imageStore from '../store/ImageStore'
import { useObserver } from "mobx-react";

export default function Card() {
    return (
        useObserver(() => (
            <div className="card">
                <img src={imageStore.imageUrl} className="card-img-top" alt="..." />
                <button className="btn btn-light" onClick={() => { imageStore.fetchImage() }}>
                    <i className="fa fa-chevron-right" />
                </button>
                <Count />
                <div className="card-body" >
                    <Buttons />
                </div>
            </div>
        ))
    );
}

Aaand we’re done! Here’s what your final output will look like:

#Note

The nice thing about bundling actions with stores is that we can use them in onClick handlers. Which means most of the components, like in this example, can be stateless functional components. To make a class component an observer we can use @observer decorator or wrap the component with observer function.

    import React from "react";
    import { observer } from "mobx-react";

    //With decorator
    @observer
    export default class Form extends React.Component{
     ...
    }

    //Without decorator

    class Form extends React.Component{
     ...
    }
    export default observer(Form)

Mobx docs are well-written and contain a lot of best practices.

You can find all the code of this example here —

And that’s it. Thanks for reading! 😃

Debugging in React + Redux chrome extension

Rosy Shrestha — Thu, 09 Jan 2020 09:16:20 +0000

Often, the basic setup for Redux DevTools Extension is not enough. I ran into this problem while trying to debug a redux store in my chrome extension. Here are the steps I followed to address this problem:

Step 1: Follow instructions from here to install the Redux Dev Tools chrome extension.

npm install -- save-dev remote-redux-devtools
or
yarn add remote-redux-devtools --dev

Step 2: Assuming a basic store set up without any sort of middlewares, configure your project to use it.

import { createStore } from 'redux';
import devToolsEnhancer from 'remote-redux-devtools';

import rootReducer from './reducers';

const store = createStore(rootReducer, devToolsEnhancer());

export default store;

Now we’re ready to debug.

Open extension popup by clicking on its icon. Right-click on the opened extension window and choose Inspect. This will open Chrome Developers Tools and will keep your extension window open until you close the devtools.

Right-click on the extension window again and choose Open Remote DevTools under Redux DevTools.

This will open Remote Dev Tools that will connect to your Redux store in a moment.

Now you’re ready to debug 😊👏.