DEV Community: Bibin Antony

I Built a Full-Stack Family OS — Web App + Mobile App with Video Calls, Brain Games, Expenses & More

Bibin Antony — Fri, 27 Feb 2026 16:30:51 +0000

This is a submission for the DEV Weekend Challenge: Community

The Community

Every family is a tiny community — one that shares a home, a budget, responsibilities, inside jokes, and the never-ending question: "Who left the milk out?"

But families are deeply underserved when it comes to software. You've got Slack for work teams. Notion for project groups. Discord for gaming communities. But what do families actually have? A WhatsApp group that's 80% memes, a shared Google Calendar no one updates, and sticky notes on the fridge.

And when it comes to communication — the most important function of any community — families have it worst of all. Their options are:

WhatsApp/iMessage — mixed in with work messages, no structure, no privacy from the outside world
Facebook Messenger — run by an ad company that profits from your family's data
Zoom/FaceTime — great for calls, but no messaging, no shared context, no family management tools

There is no single, private, purpose-built space for families to communicate, organise, and connect — until now.

I built Family Command Center for exactly this community — the modern family distributed across school runs, work-from-home days, different cities, and different time zones.

There are two very different users in every family:

Parents — who need to manage the household: chores, groceries, budget, and staying connected
Kids — who need structure, fun, and a reason to actually do their chores

Most apps only serve one of these groups. Family Command Center serves both, simultaneously, in the same app. Kids get a gamified world of brain games, points, and rewards they can unlock. Parents get a control panel for the home. And both get a shared private space to communicate — with real-time chat and even face-to-face video calls.

This is software for the most important community most of us belong to.

What I Built

Family Command Center is a full-stack web app + React Native mobile app that serves as a unified operating system for your family. It's not just a to-do list. It's every tool your family actually needs, beautifully integrated into one place.

👨‍👩‍👧‍👦 Designed for Both Parents AND Kids

Family Command Center has a unified experience but with role-based interaction:

Parents can assign chores, create reward items, set grocery lists, track expenses, and oversee the family
Kids can complete chores, play 32 brain games to earn points, and redeem those points for real-world rewards
Everyone can use private chat, video calls, and see the shared dashboard

This parent/child dynamic is core to how the app was designed — it's not just a feature, it's the whole philosophy.

🏠 Core Features

Feature	What it does
Dashboard	Personalised greeting + live overview of chores, groceries & notes
Chores	Assign, track, and complete household tasks with progress tracking
Grocery / Shop	Shared live grocery list — add items from web or mobile
Notes	Family bulletin board for quick messages and reminders
💬 Private Chat	End-to-end family messaging with group + direct messages, photo/video sharing
📹 Video Calls	WebRTC P2P video calling with TURN server — works worldwide
Expenses / Split	Track shared expenses and settle up balances — like Splitwise, but private
Brain Games	32 cognitive games for kids to earn points
Rewards	Kids redeem points for real rewards set by parents
Family Management	Create or join a family group with invite codes

💬 Private Family Chat — A Space That Belongs Only to Your Family

This isn't just a chat box bolted on. Family Command Center's messaging is designed from the ground up for family privacy and connection:

Family Board — a shared group channel the whole family sees
Direct Messages — private 1-on-1 conversations between any family members
Photo & Video Sharing — attachments are transferred peer-to-peer (no server storage of your files)
HD Video Thumbnails — preview videos before opening, with quality status indicators
Real-time delivery — powered by Supabase Realtime, messages land instantly
No ads. No algorithms. No data harvesting. Your family's conversations stay in your family.

Why does this matter? Because privacy in family communication is a right, not a premium feature. Kids should be able to message parents without it being monetised. Parents should be able to share family photos without an algorithm learning from them. Family Command Center gives you that.

📹 WebRTC Video Calls — Face-to-Face, Anywhere in the World

This is where the technical depth really shows. Family Command Center has full peer-to-peer video calling built in — no Zoom subscription, no third-party app, no account needed beyond your family's Google login.

How the connection works:

Family Member A (Web)              Family Member B (Mobile)
        │                                    │
        │◄──── Supabase Realtime ───────────►│  ← Signaling channel
        │      (SDP Offer/Answer +            │    (WebRTC handshake)
        │       ICE Candidates)               │
        │                                    │
        │◄──── WebRTC P2P (Direct) ─────────►│  ← Video/Audio stream
        │         OR                         │
        │◄──── TURN Server (Relay) ──────────►│  ← Fallback for NAT/firewalls

Technical highlights:

STUN + TURN servers — STUN for direct P2P, TURN relay as fallback. Calls work across NAT, firewalls, mobile networks, and across the world — not just on the same WiFi
Supabase Realtime as the signalling channel — instead of building and hosting a dedicated signalling server, I reused Supabase's realtime channels for WebRTC SDP offer/answer and ICE candidate exchange. Zero extra infrastructure, creative reuse
Cross-platform calling — web app user can call a mobile app user seamlessly
P2P file transfer in calls — send photos/videos during a call, peer-to-peer, never touching a server
Queue management — transfer queue handles multiple attachments without blocking the call

Why this matters for families: Your video call goes directly from your device to theirs — no middleman company recording or processing your family conversations. If a direct P2P link isn't possible (e.g., strict corporate firewall or mobile carrier NAT), the TURN server creates an encrypted relay. Either way, your family's video is private.

🧠 The Brain Games Hub — 32 Games (Kids Love This)

Instead of screentime being passive and mindless, the games section makes it productive and rewarding. There are 32 brain-training games across 5 cognitive categories:

Category	Games
🧠 Memory	Memory Match, Pattern Memory, N-Back, Number Memory, Simon Says
🔢 Logic	Sudoku, 2048, Tower of Hanoi, Ball Sort, Lights Out, Water Jugs
🔤 Language	Word Scramble, Hangman, Word Connections, Word Chain, Anagram Solver
⚡ Reflex	Whack-a-Mole, Reflex Challenge, Typing Speed, Quick Math
🗺️ Spatial	Sliding Puzzle, River Crossing, Matchstick Math, Pathway Maze, Mental Rotation

Kids earn points for every game they play — turning screen time into skill-building that feeds into the rewards system.

🏆 The Kids Rewards Loop

 Kid completes a chore ──► Earns points
 Kid plays brain games ──► Earns more points
              ▼
  Kid browses the Rewards store
              ▼
  Kid submits a redemption request
              ▼
  Parent sees it & approves ✅  (or rejects)
              ▼
  Kid gets their real-world reward! 🎉

Rewards are fully customisable by parents — e.g. "Movie night = 200 pts", "Extra screen time = 150 pts", "Sleepover = 500 pts". This creates a motivating, transparent system that makes kids want to participate — not because they're forced to, but because there's something real at the end of it.

📱 Cross-Platform

Web App: React + TypeScript + Vite (deployed on Vercel)
Mobile App: React Native + Expo (Android build available on Play Store)
Both share the same Supabase backend — data syncs in real-time across all devices

Demo

🎥 Website → family-command-center-taupe.vercel.app
📱 Mobile App →

Family Command Center - Apps on Google Play

The ultimate family organizer: Chores, Rewards, Groceries & Fun Brain Games!

play.google.com

(Sign in with any Google account to explore the full app)

Key moments to look for:

👋 Personalised dashboard — real-time family overview
🎮 Brain Games hub with 32 games, categorised by cognitive type
💬 Family Board + Direct Messages — private family chat
📹 WebRTC Video Call between web and mobile
💰 Expense tracker with settle-up calculations
✅ Chore management with confetti celebration + points earned
🏆 Rewards store — parent creates rewards, kid redeems, parent approves

Code

bibinantony1998 / family-command-center

🏠 Family Command Center

A unified operating system for the modern family — private chat, WebRTC video calls, brain games, chore management, shared expenses, grocery lists, and a kids rewards system. All in one app, across web and mobile.

📖 Overview

Family Command Center solves a real problem: families have no private, purpose-built digital space. WhatsApp mixes family with work. Google Calendar nobody updates. Zoom requires a subscription. There's no single app that handles family communication, organisation, and fun together.

This app is built for two types of users in every family:

User	What they need	What they get
Parents	Manage the household	Chores, groceries, expenses, family overview, reward approval
Kids	Structure + motivation	Brain games, points, rewards store, redemptions
Everyone	Stay connected	Private chat, direct messages, WebRTC video calls

✨ Features

🏠 Dashboard

Personalised greeting with the family member's name
At-a-glance overview: upcoming chores, grocery items needed, latest…

View on GitHub

The repo contains both the web app (/src) and the React Native mobile app (/mobile-app).

How I Built It

🛠️ Tech Stack

Frontend (Web)

React 18 + TypeScript — component-based, strongly typed
Vite — blazing-fast dev server and build
React Router v6 — client-side routing across 40+ pages
Tailwind CSS — utility-first styling

Backend & Database

Supabase — PostgreSQL with Row Level Security
Supabase Realtime — live subscriptions for chat, chores, groceries, and WebRTC signalling
Supabase Auth — Google OAuth + secure sessions
Custom SQL schema with 15+ tables — families, members, expenses, rewards, game scores, redemptions, messages, attachments, and more

Mobile App

React Native + Expo — cross-platform iOS/Android
Same Supabase backend — real-time sync with web
Expo AV — video/audio handling in calls
Custom bottom tab navigation

Real-Time Communication

WebRTC — peer-to-peer video/audio with ICE/STUN/TURN
Supabase Realtime repurposed as the WebRTC signalling server
TURN server — relay fallback for worldwide connectivity through NAT/firewalls
P2P file transfer — attachments sent directly between devices during chat/calls

🏗️ Architecture Highlights

Family Data Isolation with Row Level Security
Every piece of data — notes, chores, expenses, chat messages, game scores — is scoped to a family_id via Supabase RLS policies. A user from Family A physically cannot read or write data from Family B. This is enforced at the database level, not just the application level.

WebRTC + Supabase as Signaling (No Extra Server)
Instead of spinning up a dedicated WebRTC signalling server (the usual approach), I used Supabase Realtime channels for the SDP offer/answer and ICE candidate exchange. When a call is initiated, both clients subscribe to a shared channel, negotiate the WebRTC handshake through it, then establish a direct P2P connection. The Supabase channel is only used for ~5 messages — the actual video never touches it.

TURN Server for Global Reach
Pure P2P WebRTC works great on the same network. But real families are distributed — kid at school, parent at work, grandparent in another country. The app uses TURN server configuration so that when a direct P2P connection isn't possible (strict NAT, mobile carrier, corporate firewall), the video is relayed through the TURN server. Calls work reliably worldwide, not just on the same WiFi.

Invite-Code Family System
Families are created by one member who gets a unique invite code. Others join by entering the code — simple enough for kids to use, secure enough that strangers can't stumble in. Family data is isolated from the moment of joining.

Rewards Economy (Parent Admin + Kid Participant)
Parents are the admins: they create chore assignments, set reward items, and approve/reject redemption requests. Kids are the participants: they complete chores, earn points from games, browse the rewards store, and submit redemption requests. The role separation is baked into the database (role field on profiles) and enforced both in RLS policies and the UI flow.

32 Self-Contained Brain Games
Every game is an isolated React component with its own state machine. No external game engine. Pure React + hooks + occasional HTML Canvas. Games range from simple tap games (Whack-a-Mole) to complex working-memory tasks (N-Back, Dual Task, Trail Making) — intentionally spanning different cognitive domains so there's something for every age.

💡 Why I Built It This Way

I wanted something my own family would actually use — not a portfolio demo.

Privacy first — your family's chat, video calls, photos, and data belong to your family. No ad targeting, no data selling
No friction — Google login, no manual sign-up, invite code to join family
Mobile-first — works on the family iPad, the kids' Android phones, the parent's laptop
Games that earn real rewards — kids are genuinely motivated, not forced
Parent oversight without micromanagement — parents set the rules (chores, rewards), kids operate within them independently
Video calling built-in — family members in different cities stay face-to-face
One app for everyone — no separate "kids app" and "parent app"; the whole family shares one space

The biggest technical challenge was getting WebRTC to work reliably cross-platform (web ↔ mobile, different networks, different countries). The TURN server implementation and using Supabase Realtime as the signalling layer took the most iteration — but once solved, it meant zero additional infrastructure cost and calls that work anywhere in the world.

Thanks for reading! I'd love to hear your thoughts — especially if you're a parent. What features would your family actually use? 🏠

Co-built with @sojinantony01

Some attachments

Web animations - A walk through | A Story by Bibin Antony

Bibin Antony — Fri, 14 Feb 2025 13:05:09 +0000

We have to implement animations in our website over many occasion, and there are many types of animations library out there. but if we want to create one from scratch, which one we will choose. Let’s check how many type on animations are out there

1. Transition and transform

This are the basic css property for creating basic movement and visibility animations, like if we need to move an item a little bit, or increase it opacity gradually, transition is the best way to solve that. and transition runs in GPU by default so the process will be faster.

.class {
  transform: scale(1.5);
  transition-duration: 1s;
}

The above example will scale the element to 1.5 rate in a duration of 1s, we can have many animations like, scale, rotate, matrix, skew, etc…

Check out more transition examples on https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions

2. Keyframe

This are the best CSS way to animate any complex movement, we can use all types of css property inside the keyframes which we can decide over a from and to or percentage wise steps. using this we can do much complex things than plain animations. But keyframe are always bit sluggish when there is too much movement.

@keyframes show-up{
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.class {
  animation: show-up 1s forwards;
}

The above example will show an element from opacity 0 to opacity 1 in of 1s, ‘forwards’ means continue animation to keyword as final, otherwise after the duration it will access the class original property of opacity, We can also all ‘infinite’ to create infinite animation that loop between from and to.

@keyframes grow {
  0% {
    width: 0
  }

  50% {
    width: 100%
  }

  100% {
    width: 0
  }
}

.class {
  animation: grow 1s infinite;
}

The above example is the same keyframe using a % keyword to go through, rather than from and to we can add any css property in any time using keyframe, and can loop through this variables infinitely.

Note: Keyframe may have some support issue on old browsers of safari or firefox, so we need web-Kit derivatives of keyframes such as,

@-webkit-keyframes grow {
  0% {
    width: 0
  }

  50% {
    width: 100%
  }

  100% {
    width: 0
  }
}

@keyframes grow {
  0% {
    width: 0
  }

  50% {
    width: 100%
  }

  100% {
    width: 0
  }
}

Keyframes are basically control the duration and specific points style switch in animations, all other is just CSS, you can add any CSS property inside this keyframes to make it animate.

(Please don’t use display: none; 🤣)

3. Canvas

Here, we move out from CSS and use javascript straight for complex animations, imagine we want a 1000 particles to roam around you screen that listening to your mouse movement we can’t do such user interaction animation with straight CSS, so here we can use canvas animations. But this is not like plain CSS. It need a very good knowledge over Javascript and Mathematics, all are calculation's here. Basically we can draw shapes using canvas keyword at any position inside the canvas by providing a x and y coordinates, and if we want to animate any elements, just calculate a new position and redraw the shape, for fluency we have reanimate function that provided from javascript that automatically trigger in all frame per second gaps.

But plain canvas is directly running on CPU and the load on CPU on the client system can straight affect the animation performance, also the reanimate function trigger as per frame per second supported on the browser (Chrome: 120fps , safari: 60fps on 120 fps display). This could affect the fluency feel differently for different users.

<canvas id="cw"
  >Animation creating multi-colored disappearing stream of light that follow the
  cursor as it moves over the image
</canvas>

const canvas = document.getElementById("cw");
const context = canvas.getContext("2d");
context.globalAlpha = 0.5;

const cursor = {
  x: innerWidth / 2,
  y: innerHeight / 2,
};

let particlesArray = [];

generateParticles(101);
setSize();
anim();

addEventListener("mousemove", (e) => {
  cursor.x = e.clientX;
  cursor.y = e.clientY;
});

addEventListener(
  "touchmove",
  (e) => {
    e.preventDefault();
    cursor.x = e.touches[0].clientX;
    cursor.y = e.touches[0].clientY;
  },
  { passive: false },
);

addEventListener("resize", () => setSize());

function generateParticles(amount) {
  for (let i = 0; i < amount; i++) {
    particlesArray[i] = new Particle(
      innerWidth / 2,
      innerHeight / 2,
      4,
      generateColor(),
      0.02,
    );
  }
}

function generateColor() {
  let hexSet = "0123456789ABCDEF";
  let finalHexString = "#";
  for (let i = 0; i < 6; i++) {
    finalHexString += hexSet[Math.ceil(Math.random() * 15)];
  }
  return finalHexString;
}

function setSize() {
  canvas.height = innerHeight;
  canvas.width = innerWidth;
}

function Particle(x, y, particleTrailWidth, strokeColor, rotateSpeed) {
  this.x = x;
  this.y = y;
  this.particleTrailWidth = particleTrailWidth;
  this.strokeColor = strokeColor;
  this.theta = Math.random() * Math.PI * 2;
  this.rotateSpeed = rotateSpeed;
  this.t = Math.random() * 150;

  this.rotate = () => {
    const ls = {
      x: this.x,
      y: this.y,
    };
    this.theta += this.rotateSpeed;
    this.x = cursor.x + Math.cos(this.theta) * this.t;
    this.y = cursor.y + Math.sin(this.theta) * this.t;
    context.beginPath();
    context.lineWidth = this.particleTrailWidth;
    context.strokeStyle = this.strokeColor;
    context.moveTo(ls.x, ls.y);
    context.lineTo(this.x, this.y);
    context.stroke();
  };
}

function anim() {
  requestAnimationFrame(anim);

  context.fillStyle = "rgb(0 0 0 / 5%)";
  context.fillRect(0, 0, canvas.width, canvas.height);

  particlesArray.forEach((particle) => particle.rotate());
}

#cw {
  position: fixed;
  z-index: -1;
}

body {
  margin: 0;
  padding: 0;
  background-color: rgb(0 0 0 / 5%);
}

The above example is a mouse movement listening animations, you can check the result here

https://medium.com/media/8c5528b355dba5f4e24fc2ef14def475/href

3. WebGl

This is the modern version for canvas that use a canvas to create the animation same as mentioned above but this is running straight on GPU, so the performance will be better. But WebGl is based on a shaders code that most developers will struggle to understand, this is mostly like writing all complex logics as a string shaders. learning curve for plain shaders is very high and the logic behind drawing shapes here are complex.

(Some browser system may not have GPU so we need a fallback canvas animation to prevent error pages)

you can check a sample WebGl2 animation here

https://medium.com/media/61b22e8094f3c12d71d1257547cbfbf3/href

We have some library out there for writing WebGl animations.

i. Pixi.js

Pixi js is a library for creating webGl 2D animations. We can use Pixi js API for drawing shapes rather than creating complex shaders, for example we can have Graphics animation for creating shapes like circle or triangle, and Sprite for creating images. Using this we can create complex animations that run in GPU and also we can control the frame per second to keep the uniq feel on all browsers

ii. Three Js

Three is a very popular and powerful 3D animation based on WebGl and WebGl 2 using three Js we can even create complex games in just a canvas with very good fluency. Three offer shapes images and complex movement logic API for creating complex animation without writing much Mathematical equations

There are many more WebGl library out there for use have a look on here https://en.wikipedia.org/wiki/List_of_WebGL_frameworks

Conclusion

Animations are important for you website visual appearance, but overcomplicating animations on website will affect the use cases of your website and users may switch for better usability than visual appearance, so its very important to have the balance between usability and visual appearance, with above examples you can choose between animation methods for the best balanced animation in your website that align with your specific use cases. Happy coding ;)

— Bibin Antony | Senior Full-Stack Developer | https://bibinantony1998.github.io/my-portfolio/ | https://github.com/bibinantony1998

Next Js — When to use and how to use | A Story by Bibin Antony

Bibin Antony — Mon, 16 Dec 2024 18:23:47 +0000

Next Js — When to use and how to use

I worked on Next JS framework an year before, and at that time, I didn’t have much idea about it. I ended up somehow completing the task rather than using it properly. But now I am trying to learn from the basics and figure out my three questions: What, When, and ** How.**

What

Here, we start with Next Js. Next Js is a popular React framework introduced by Vercel for better SEO and SSR features.

What is the difference?

As all know React is a Library of JS and when we need to build something out of React we need to create a framework out of it by installing the dependencies we need. so there are a thousand varieties of React frameworks when we move from project to project. Here Next Js is a Framework of react Js, This has its own routing and components for rendering Images and much more.

But Next Js has more, Next support SSR (Server side rendering)

What is SSR — Why is it needed

SSR is a technology that renders the JS from the server itself. In the case of React, there is only CSR(Client-side rendering). As you know JS needs to render using a JS engine, Browsers have a JS engine to render this. so if we share a JS bundle build file, a browser can render the JS bundle itself and display it to the DOM. But when the browser renders it, this leads to high memory usage on the client system.

Why React have poor SEO

React renders its pages it needs JS to render the pages, But In the case of SEO, the search engine crawlers will read the XML files to access the content. but this crawler's Bots have no JS engine so from a React project all the Crawler bots see is a blank index.html without any content. It results in poor SEO on React sites. This not only limited to React but also on all CSR pages.

In case of SSR, the page render from server, that is a node engine in the server render the JS andf built all to an XML file and the result page will transfer to the client through API. So when the Crawler bot acess the pages the result that this Bots get is a XML with all the contents in it, so the Serch engine crawlers can acess and store the copntents in it, this leads to a high SEO rating for SSR components

When

So we learn about what is Next js and SSR. But when you need it an important questions. This SSR components come with some drawbacks also. an SSR component has no support on client intraction, it won’t support Events, Browser API’s and also no React hook support. So when we really need to use Next js.

Here are my suggections

When we want to built a public website that need a high SEO
When we have very less user intraction on the website
When we need to hide the API keys from Browser

If i am developing an inhouse website for a coopration to use it in thier network, i don’t need SEO, in fact i need to hide this from the serch engine crawlers. In that case we can straight use CSR rendering.

But is that mean i don ‘t want Next js for those cases. NO

Here we want to learn about to routing options of Next and when we need to use those routing

Next JS routing — Page and App

In Next Js framework the routing is based on a folder stucture we create. its a standard of Next Js. But there is two type of routing Page and App

Page router.

This is a routing Next introduced in its older versions, we can route from a page folder and all the files inside the pages will be accesible on the UI using it name. But the important part is page router is a CSR componet.

Yes, when we create components using page route this will act same as a React component and it has poor SEO. But why we need this in 1st palce, becuse like i said abouve react is a library and when we need to create a website from it we need to create a framework, it lead to high initial setup time. But in case of Next page route, we can just create a it with CLI tools.

App router

App routing in introduced in latest version of react use the same folder stucture routing as page router, but only the files names as page will be accesible to UI. and as the main part App router pages is SSR as deafult. If we need to write a CSR component is app router we need to mention a ‘use client’ in the componet first line.

How

As we see, using app router in Next JS we can create SSR components with Great SEO. But how we solve the Drabacks. Yes SSR don’t support Events Browser API’s and React hooks functions

So we need to design the component as SSR and CSR in app router.

When we need to show a list of data from server to UI, we don’t need any client intraction, we just need to list the data and print the page to the DOM. so we can create this using SSR component, the Data list API will call from SSR itself from server and create the XML and pass it to the browser.

And in case of a create page component, we need to handle the client intaractions and State to manage the value, here we need to use CSR component using ‘use client’.

But we need to remember a important thing while designing the components, A CSR component can create inside a SSR component. But all the components inside a CSR component will be a CSR component, we can’t create a SSR component inside a CSR component.

So we can’t plainly create a main page with CSR component and levarage the SEO.

Drawbacks of Next

There are no Drawbacks for any languages, only the usecase we use this. But i will mention some i found during the learning process

Next Js need a server to run
If there is high trafic expect on the site, the server need to be very powerfull to handle all this rendering.
Complex to design SSR and CSR components
High learning curve compare to react

Conclusion

Next Js is a powerfull framework to counter the poor SEO of React and also to follow a structured framework on react, but there are many cases that we don’t really want SSR and just need page route. So when ever we want to choose Next js we need to think about our usecase.

All the things i mentioned in this Blog is from my learning, so please correct me if anything i mentioned is wrong, please use the comment box to communicate, or contact me on Linkdin

https://www.linkedin.com/in/bibin-antony-773375193/

— Bibin Antony | Senior Full-Stack Developer | https://bibinantony1998.github.io/my-portfolio/ | https://github.com/bibinantony1998

How we can style a web application with minimal css | A Story by Bibin Antony

Bibin Antony — Thu, 29 Aug 2024 09:58:42 +0000

Styling an entire website is always a big task, creating the frame for each screens could create large set of css files. and is clients request a change that affect all screens, then the things will get worse.

How we solve this problem that we face on each project

Is there is a way to style all the screen frame on just one screen and apply to all. and also we can customise each screen content by individual styles.

How?

Here, i am using SCSS and React for an example, But we can have this in any languages.

First, We need to create some constant files. that holds the colour, font, and constants of our project

So for colour here i am creating a color.scss file, and i added a :root selector, Other than any SCSS constants, this root will directly get appleid on browser and there is no need to import this constant files on each SCSS files

:root {
 --themeColor: rgb(26, 9, 89);
 --boxShadow: rgba(0, 0, 0, 0.25);
 --black: #000000;
 --whiteInsideTheme: #ffffff;
 --invalid: rgb(246, 95, 95);
}

So, here i added some basic colour variables that i normally use in my application, You can add or remove the variables as per the needs.

For the font files, we can use font TTF or WOFF files, How?. In a font.scss file we are adding _@font-face_. Also keep the TTF files in a fonts folder with the SCSS

@font-face {
 font-family: "regular";
 src: url("./fonts/noto-sans-jp-japanese-400.woff") format("woff");
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: "bold";
 src: url("./fonts/noto-sans-jp-japanese-900.woff") format("woff");
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: "black";
 src: url("./fonts/noto-sans-jp-japanese-700.woff") format("woff");
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: "light";
 src: url("./fonts/noto-sans-jp-japanese-300.woff") format("woff");
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: "medium";
 src: url("./fonts/noto-sans-jp-japanese-500.woff") format("woff");
 font-weight: normal;
 font-style: normal;
}

Using the above set of code we can define font face, and we can use this font-family like given below

body {
  font-family: "regular";
}

Ok, then if we have some constant values, We can set in a constant.scss, like given

:root {
 --headerHeight: 65px;
 --sidebarWidth: 250px;
}

We can use as many :root in any files.

So here we set all constant files, So if a request from client to change entire colour theme of a font family, We can just do this by changing 2 files. Easy right?

So, How we can create styles for all screen?

For styling all screen from a common file, We need to understand how a web application look’s like. I am adding some examples here

UI with a Header and a Sidebar

UI with only Header

UI with only Sidebar

In this three style that we see above we can just use one set of css file and just remove the un wanted item. How?

We can create a main-container.scss file and style all the main frameset there, Here given is a example to create a UI for option 1

.main_container {
   height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   flex-direction: column;
   .custom_header {
      flex: 0 0 var(--headerHeight);
      height: var(--headerHeight);
      background-color: var(--white);
      box-shadow: 0px 0px 4px 0px var(--boxShadow);
      position: relative;
      z-index: 99;
   }
   .content_container {
      flex: 1 1 10px;
      height: 10px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      background-color: var(--mainBg);
      .custom_sidebar_container {
       -webkit-box-flex: 0;
       -ms-flex: 0 0 var(--sidebarWidth);
       flex: 0 0 var(--sidebarWidth);
       height: 100%;
       .custom_sidebar {
          height: 100%;
          background-color: var(--white);
          box-shadow: 0px 1px 4px 0px var(--boxShadow);
          border-radius: 0px 4px 4px 0px;
          overflow: auto;
          padding: 15px 14px;
       }
  }
  .overview_container {
     -webkit-box-flex: 1;
     -ms-flex: 1 1 10px;
     flex: 1 1 10px;
     width: 10px;
     width: 100%;
     height: 100%;
     overflow: auto;
     padding: 15px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
  }

So how we can use the same file set for option 2 and 3, We can just remove .custom_sidebar_container for option 2 and .custom_header styles for option 3. All the other frames are aligned by flex so when ever we remove the set that we don’t need, It will just auto adujust the other screens.

So how out HTML will look like?.

<div className="main_container">
   <div className="custom_header">Header</div>
   <div className="content_container">
      <div className="custom_sidebar_container">
         Sidebar
      </div>
      <div className="overview_container">
         Overview Area
      </div>
   </div>
</div>

Is this responsive?

Yes, and it will work with any width or height for header and sidebar as well, we don’t need to modify any code for adjusting the resolutions.

There is more we can do with the same some more set of css, here in overview container, we styled this to show some data. We can use the same flex box to create variable and responsive filter and tabular listing screens, here is an example

With the UI given here, We can add some more layout to the Above SCSS

.main_container {
   height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   flex-direction: column;
   .custom_header {
      flex: 0 0 var(--headerHeight);
      height: var(--headerHeight);
      background-color: var(--white);
      box-shadow: 0px 0px 4px 0px var(--boxShadow);
      position: relative;
      z-index: 99;
   }
   .content_container {
      flex: 1 1 10px;
      height: 10px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      background-color: var(--mainBg);
      .custom_sidebar_container {
         -webkit-box-flex: 0;
         -ms-flex: 0 0 var(--sidebarWidth);
         flex: 0 0 var(--sidebarWidth);
         height: 100%;
         .custom_sidebar {
            height: 100%;
            background-color: var(--white);
            box-shadow: 0px 1px 4px 0px var(--boxShadow);
            border-radius: 0px 4px 4px 0px;
            overflow: auto;
            padding: 15px 14px;
         }
      }
      .overview_container {
         -webkit-box-flex: 1;
         -ms-flex: 1 1 10px;
         flex: 1 1 10px;
         width: 10px;
         width: 100%;
         height: 100%;
         overflow: auto;
         padding: 15px;
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         .main_title_container {
            font-size: 16px;
            font-family: "medium";
            margin-bottom: 10px;
         }
         .main_overview_content_container {
            -webkit-box-flex: 1;
            -ms-flex: 1 1 10px;
            flex: 1 1 10px;
            height: 10px;
            overflow: auto;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            .main_list_container {
           -webkit-box-flex: 1;
             -ms-flex: 1 1 10px;
             flex: 1 1 10px;
             height: 10px;
            }
         }
      }
   }
}

And the HTML

<div className="main_container">
   <div className="custom_header">Header</div>
   <div className="content_container">
    <div className="custom_sidebar_container">Sidebar</div>
    <div className="overview_container">
     <div className="main_title_container ">Tittle here</div>
     <div className="main_overview_content_container">
      <div className="">Some Filter Components Will Appear Here</div>
      <div className="main_list_container">Main list here</div>
     </div>
    </div>
   </div>
</div>

Using this, even is the height of filter or title exceed one line, still the UI will be perfectly adapt to the available height becuse of the flex layout we created here. So we can have anything inside this containers without thinking about the frame break. Only thing we need to consider is the order of HTML till this point need to be same.

Any Doubts?

You can contact me through my LinkedIn,

https://www.linkedin.com/in/bibin-antony-773375193/

— Bibin Antony | Senior Full-Stack Developer | https://bibinantony1998.github.io/my-portfolio/ | https://github.com/bibinantony1998

What if we need to create a HTML table with column resize? | A Story by Bibin Antony

Bibin Antony — Wed, 14 Aug 2024 06:29:28 +0000

There is many cases when we need to create a table in a website and need column resize on those tables, how we can do that?

NPM Grid Packages

There are many NPM grid packages with inbuilt resize feature in it, we can use one of those packages, But what is the problem?

Any drawbacks?

Yes, This packages comes with lot more features that we don’t possibly need (Pagination, sort, virtualise). So why we need to create such a large package just to have the resize, do we have any other options.

CSS Resize

resize: horizontal;

Yes, we can use ‘resize’ in CSS for enabling the resize for any element, so do it can be applied for table cell to. But is that have anything missing?. Ya kind off

What is missing in CSS resize?

Yes, CSS resize can’t be controlled much from a script, like in resize there will be a resize icon that we can’t style also a min-width and max-width for a cell while resize can’t be controlled from CSS resize.

Is there any solution?. Yes

Solution

We can create a element in each table cell for resize and then user hold and drag this element, we need to adjust with of the table cell just prior to the element. Because this is in table style all cells will auto adjust to the the size as we adjust one cell width.

import React from "react";
import { render } from "react-dom";

const App = () => {
   return(
      <div>
        <table class="column_resize_table">
          <thead>
            <tr>
              <th>Headding 1</th>
              // resize element
              <th onMouseMove={onMouseMove} class="resize-th"/>
              <th>Headding 2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Content 1</td>
              <td />
              <td>Content 2</td>
            </tr>
          </tbody>
        </table>
      </div>
  )
};

render(<App />, document.body);

function onMouseMove(e) {
    const moveDiff = this.startPos - this.mouseX;
    let newPrev = this.startWidthPrev - moveDiff;

    ele.previousSibling.style.width = newPrev + 'px';
    ele.previousSibling.style.minWidth = newPrev + 'px';
    ele.previousSibling.style.maxWidth = newPrev + 'px';
}

Okey, Now we need to control the min-width and max-width


function onMouseMove(e, minWidth, maxWidth) {
    const moveDiff = this.startPos - this.mouseX;
    let newPrev = this.startWidthPrev - moveDiff;

    if((!minWidth || newPrev >= minWidth) && (!maxWidth || newPrev <= maxWidth)) {
        ele.previousSibling.style.width = newPrev + 'px';
        ele.previousSibling.style.minWidth = newPrev + 'px';
        ele.previousSibling.style.maxWidth = newPrev + 'px';
    }
}

So we can set all this features in this resize element, but the TH element we created will act as a column itself, so we need to control its width, how we can do that?, Style the resize element

.resize-th {
  cursor: ew-resize;
  width: 3px; // Change as per the UI
  min-width: 3px;
  max-width: 3px;
}

Conclusion

So we done that, we can resize a table cell without over complicating and with all the features we need. For implementing this and with some more additional features check out my NPM package.

react-table-column-resizer

You can find a demo and sample implementation here

https://medium.com/media/7e2d6320ccab84673b28d7dcbcbe4a26/href

— Bibin Antony | Senior Full-Stack Developer | https://bibinantony1998.github.io/my-portfolio/ | https://github.com/bibinantony1998