Building a web app (Whinst) weekly update #2

• Added functionality that compresses images on the backend

To optimize the performance of a web app that uses images it’s important to keep the size of the images small while also maintaining their quality. In the Whinst web app I used the Nodejs Sharp library to compress jpeg files after saving. I’ll add compression functionality for png files later.

• Add a footer to the web app layout

Added a simple footer to the layout component. The code below is of the web app layout

export default component Layout({children}:Props){
return(
<div className='flex justify-between'>
 {/*NavbBar*/}
  <div>
  </div>
  {/*Core Component*/}
  <div className='mb-auto'>
  {children}
  </div>
 {/*Footer*/}
  <div>
  </div>
</div>
)}

• Added functionality that counts the number of users and active users

To do this I just made a simple query that returns all the users. I then used the “.length” property to get the number of all users. To get the number of active users I used a simple for-loop and a count. The for loop loops through the users and increases the count on every active user found. The code below shows how this was done and the image shows the user and active user count on the frontend.

const data = await getData()
    var activeCount = 0
    for(let info of data ){
        if(info.active == true){
            activeCount = activeCount + 1;
        }
    }
return(
<div>
   <p>Users: {data.length}</p>
   <p>Active users: {activeCount}</p>
</div>
)

• Added a blur effect on images that are loading

Loading images appear with a blur effect when the loading state of the image loading state is set to true. The image loading state is set to true by default and is set to false on after the image is loaded. Using the onLoadingComplete property on the image tag, the loading state is set to false thus removing the blur making an aesthetically pleasing effect.

• Added functionality that redirects users trying to access sections of the app they’re not supposed to access

Non admin users that try to access the admin sections of the web app are redirected and non-subscribed users that access sections of the web app that are subscribed are also redirected. The code below shows how this is done.

 if(user != 'admin'){
        return(
            <div className="h-screen flex flex-col justify-center items-center">
            <p>You're not an admin</p>
            </div>
        )
    }