DEV Community

loading...
Cover image for What problems i solved when did big app of a short period of time

What problems i solved when did big app of a short period of time

vladimirschneider profile image vladimirschneider Updated on ・2 min read

We have a task do Halloween app in no more a week and we did it!

Shork about app: Instagram for the Halloween.

I wanna talk about solved Frontend problems in the app.

I choice Typescript with React and Redux because I have a good experience for this.

App consists of a three layout nodes: #root (for a app), #navbar (bottom navigation bar) and #modal (for a modals and popups).

Problem 1. File structure

Each components have a directory with self styles in components directory in the root app.

For a components of a component I created directory in the component.

In the component I created index.ts file for import and [ComponentName].tsx for a component code for a easy search file in the tab of code editor.

For example:

Alt Text

For a views and hoc I created separate directory too.

Common styles such as Button.module.css or Field.mobule.css in the root directory _styles usage in the project all over. It's so convenient!

Alt Text

Problem 2. Content placeholder

I have a react-content-loader package for this problem and it looks greate! I love it!

Alt Text

Content placeholder is flexible. After avatar and user name loaded placeholder lost for a image only. It image have error load you will see rect-button for a reload try image.

Alt Text

Probler 3. Load content by scroll

Here I think that I solved problem no nicely :( but it work

How do you solve it?

I used useEffect with limit, offset and lock variables

useEffect(() => {
    let limit = 5;
    let offset = 0;
    let lock = true;

    const promise = props.getPublications({limit, offset});

    promise.then(() => {
      offset++;

      lock = false;
    });

    document.addEventListener('scroll', () => {
      if (!lock) {
        if (document.documentElement.offsetHeight < document.documentElement.scrollTop + Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) + 500) {
          lock = true;

          const promise = props.pushPublications({limit, offset});

          promise.then(() => {
            offset++;

            lock = false;
          });
        }
      }
    });
}, []);
Enter fullscreen mode Exit fullscreen mode

When a page height less than scroll to top of page plus page viewport height and plus 500px I do request to the server and push new content.

Thank you! It was great expirience and I like what we have done.

You can see the app and post your halloween publication on https://halloween.global/

Discussion (5)

pic
Editor guide
Collapse
karanpratapsingh profile image
Karan Pratap Singh

That was pretty good! you can maybe try npmjs.com/package/react-infinite-s... for infinite scroll

Collapse
vladimirschneider profile image
vladimirschneider Author

Wow, great! Thanck you)

Collapse
karanpratapsingh profile image
Karan Pratap Singh

I tried the app, it was pretty great. But on opening the console I saw redux logger logging the state, even my keys, and access token!!

Thread Thread
vladimirschneider profile image
vladimirschneider Author

I forgot remove redux logger for production, I will do it now, thank you