Overview
Skills
Job Details
New Assignment - React Front End Developer w Full Stack
(Figma, Node.js, React.js, Python, Docer, Kubectl, Git, Jenkins, Kubernetes)
Overview
This guide walks you through the end-to-end process of transforming your Figma designs into a fully functioning, on-prem React/TypeScript front end (built with Vite), integrated with a FastAPI backend, PostgreSQL database, Keycloak authentication, LLM inference service, containerized in Kubernetes, and deployed to your Dell hardware.
Prerequisites
• Figma access with the finished design and export permissions
• Node.js (>=18) and npm or yarn
• Python (>=3.10) and pip
• Docker & kubectl configured for your on-prem cluster (k3s or full Kubernetes)
• Git and access to your on-prem GitLab/Jenkins
• Dell hardware procured (Phase 1 starter node)
1. Extract Design Tokens from Figma
1. Install the Figma Tokens plugin in Figma.
2. Define your global tokens (colors, spacing, typography, breakpoints) in the plugin panel.
3. Export tokens as JSON: tokens.json.
4. Optionally use Style Dictionary to transform tokens to multiple platforms:
5. Create a config.json for Style Dictionary that points at tokens.json and outputs a Tailwind config.
2. Initialize Repository & Monorepo Structure
1. Create a new Git repo:
2. Organize directories:
3. Add a root README.md outlining project structure and conventions.
3. Frontend Setup (Vite + React + TypeScript)
1. Scaffold the project:
2. Install core dependencies:
3. Initialize Tailwind:
4. Configure tailwind.config.js to include your Figma tokens (colors, spacing, typography).
5. Import Tailwind directives in src/index.css:
6. Define routes in src/App.tsx using React Router v6.
4. Integrate Design Tokens
1. Use Style Dictionary to convert tokens.json into a Tailwind extension:
2. Merge tailwind.tokens.js into tailwind.config.js under theme.extend.
3. Re-run on token updates.
5. Build UI Components
• Atomic design:
Atoms: Button, Input, Text, Icon
Molecules: FormField, Card, Modal
Organisms: NavBar, ChatWindow, Dashboard
• Use Tailwind + clsx for conditional styles.
• Optionally add Storybook for isolated component development.
6. Page Layouts & Animations
• Create MainLayout and AuthLayout wrappers for consistent header/footer and responsive grids.
• Use Framer Motion’s and for page transitions and micro-interactions.
7. Backend Skeleton (FastAPI)
1. Create a virtual environment:
2. Install dependencies:
3. Scaffold main.py with health-check and include routers for auth, data, and chat.
4. Run locally:
8. Database & Connection Pooling
• Deploy PostgreSQL on Phase 1 server (or container) and initialize your schema manually with SQL scripts.
• Use PgBouncer in transaction-pooling mode (e.g., max_client_conn=100, default_pool_size=20).
• Connect via asyncpg.create_pool(dsn) in FastAPI startup.
9. Authentication with Keycloak
1. Deploy Keycloak using your preferred method (Helm chart or container YAML).
2. Configure a realm, clients (frontend & backend), roles, and users in the Keycloak admin UI.
3. In FastAPI, use python-keycloak to verify and introspect tokens in a middleware.
4. In React, integrate via @react-keycloak/web for login flows, token refresh, and protected routes.
10. LLM Inference Service
• Host models like Llama2 locally using transformers + accelerate.
• Build a /chat endpoint streaming responses over WebSockets or Server-Sent Events.
• Implement rate-limiting and embed caching with Redis for RAG.
11. Containerization & Kubernetes
• Create Dockerfile.frontend and Dockerfile.backend for production builds.
• Package everything as Helm charts under /infrastructure/helm with configurable resource limits.
• Use Traefik or NGINX Ingress for routing, TLS termination via your internal PKI.
12. CI/CD Pipeline
• Use GitLab CI or Jenkins pipelines:
1. Lint & test (ESLint, Jest, pytest, Bandit)
2. Build & push Docker images to your on-prem registry
3. Deploy via helm upgrade --install with dynamic values.yaml
13. Monitoring & Logging
• Deploy Prometheus and Grafana via Helm.
• Install exporters: postgres_exporter, node-exporter, nvidia-dcgm-exporter.
• Configure dashboards and Alertmanager notifications (email/Slack).
• Aggregate application logs using a centralized ELK or Loki stack.
14. Phase 1 Deployment
1. Provision your Dell server with k3s or full k8s.
2. Point GitLab Runner / Jenkins to that cluster.
3. Execute Helm deploy with minimal replicas:
4. Verify services:
15. Appendix: Vue.js vs. React.js
While this guide focuses on React:
• React.js is a component-based library using JSX, created by Facebook with a virtual DOM and hook-based reactivity.
• Vue.js is an independent framework with single-file components (.vue), template syntax, and a Proxy-based reactivity system.
• Both share concepts like component architecture and virtual DOM but differ in syntax, ecosystem, and core reactivity implementations.
16. Next Steps & Scaling
• Scale horizontally: add additional app nodes once CPU > 60% or GPU > 80%.
• Database isolation: deploy a dedicated Postgres node and read replicas.
• GPU upgrades: move from T4 to A40 or A100 for larger models.
• Disaster Recovery: schedule automated backups for Postgres & Keycloak.