Skip to content

Instantly share code, notes, and snippets.

View Kasun002's full-sized avatar
💭
{}

Kasun Abaywardana Kasun002

💭
{}
3 followers · 12 following
View GitHub Profile
@Kasun002
Kasun002 / MICRO_FE_SHELL_README.md
Last active May 14, 2026 03:14

Shell Webpack Config — Module Federation

  • Purpose: Webpack config for the shell host app consuming 4 remote micro-frontends (Market, Chart, Portfolio, Angular).
  • Vercel URL resolution: Prefers VERCEL_PROJECT_PRODUCTION_URL (stable prod domain) over VERCEL_URL (deployment-specific, unreliable for baked URLs).
  • Local dev fallback: When both Vercel vars are absent, uses localhost:3001–3004 (overridable via MF_*_URL env vars).
  • Subpath routing: All MFs deploy as subpaths (/mf-market, /mf-chart, etc.) on the same origin — no CORS, no separate domains.
  • Module Federation: Shell exposes nothing; consumes 4 remotes via remoteEntry.js at runtime.
  • Shared deps: react and react-dom as singletons (^19.0.0) — prevents duplicate React instances and hook errors.
  • Build: Babel (preset-env, preset-react) for .js/.jsx; mode toggled by NODE_ENV.
  • Output: publicPath: "auto" — critical for MF, lets remotes resolve their own assets correctly.
@Kasun002
Kasun002 / react_code_review_checklist.md
Last active May 14, 2026 03:14
Senior React Code Review Checklist

Senior React Code Review Checklist

A pragmatic, battle-tested checklist for reviewing React codebases (React 19+, Hooks era, Next.js-aware). Use it as a scan-during-PR reference — not a rulebook. Context always wins.

1. Project Setup

  • README.md present: Setup, scripts, env vars, architecture diagram. A new dev should be productive in <30 min.
  • .gitignore: Excludes node_modules/, .env*, dist/, build/, .DS_Store, coverage/, IDE folders.
@Kasun002
Kasun002 / docker-compose.yml
Created January 30, 2024 06:21
Configure Keycloak with PG SQL for role based authentication
version: '3.4'
volumes:
postgres_data:
driver: local
services:
postgres:
image: postgres:14.1
container_name: keycloak-nodejs-example-postgres
@Kasun002
Kasun002 / Docker
Created January 8, 2024 07:58
This is an example of deploying a React app's production build to an Nginx server. If you're deploying inside a cloud instance (such as AWS EC2), this method helps reduce the resources used on the server.
FROM node:18 AS build
WORKDIR /opt/{your app name}
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build --build-arg CACHEBUST=${CACHEBUST}
FROM nginx:latest
COPY --from=build /opt/{your app name}/build /usr/share/nginx/html
EXPOSE 81
COPY nginx.conf /etc/nginx/nginx.conf
@Kasun002
Kasun002 / dashboard.html
Created August 20, 2023 23:26
Responsive dashboard layout using tailwind css and JS. This dashboard layout contains side-bar and header mainly inside the middle container we can load any content dynamically.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
@Kasun002
Kasun002 / IssueSlice.ts
Created July 10, 2023 06:52
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
export const fetchIssues = createAsyncThunk<string[], void, { rejectValue: string }>(
"githubIssue/fetchIssues",
async (_, thunkAPI) => {
try {
const response = await fetch("https://api.github.com/repos/github/hub/issues");
const data = await response.json();
const issues = data.map((issue: { title: string }) => issue.title);
return issues;
@Kasun002
Kasun002 / responsive_form.html
Created July 8, 2023 07:55
This form contains a responsive layout with CSS and a correct HTML structure
<!DOCTYPE html>
<html>
<head>
<!-- Page title -->
<title>Event Page</title>
<!-- Other possible tags -->
<script></script>
<style></style>
<!-- Can specify document base URL -->
@Kasun002
Kasun002 / mongoose.js
Created June 29, 2023 02:08
Express JS project Mongo-DB connection
import mongoose from 'mongoose';
const dbUri = "Your mongo DB URI" // This should be prick from .env file
export default async () => {
await mongoose.connect(dbUri,{})
.then(() => {
console.log('Mongodb Connection to database');
})
.catch(err => {