← Back to all projects

KNWS Website

KNWS Website project screenshot

Modern full-stack website showcasing KNWS's portfolio and services. Built with React/TypeScript frontend and Flask backend, featuring a responsive design, project showcase with filtering, and markdown support.

Technology

frontendreacttypescriptjavascript
backendpythonflaskjinja2
devopsapachewsgi
toolstailwindcssplaywrightnpmpostcsseslint

KNWS Website - Project Architecture

A modern, full-stack website showcasing KNWS's portfolio and services, built with React/TypeScript frontend and Flask backend.

🏗️ Architecture Overview

This project combines a React SPA (Single Page Application) frontend with a Flask backend, designed to showcase KNWS's custom software development services and project portfolio.

Frontend (React/TypeScript)

  • Framework: React 18 with TypeScript
  • Routing: React Router v6 for client-side navigation
  • Styling: Tailwind CSS with shadcn/ui components
  • Build Tool: Create React App (CRA)
  • State Management: React hooks (useState, useEffect)

Backend (Flask/Python)

  • Framework: Flask 2.0
  • Templates: Jinja2 for server-side rendering
  • Static Assets: Serves legacy HTML templates and static files

📁 Project Structure

The project is organized into clear frontend and backend sections:

  • src/: React frontend source code with components, data, and utilities
  • web/: Flask backend with templates and static assets
  • public/: Public assets served by React, including project screenshots
  • scripts/: Automation scripts for fetching project info and taking screenshots

🛠️ Technology Stack

Frontend Technologies

  • React 18.2.0: Modern React with hooks and concurrent features
  • TypeScript 4.9.5: Type-safe JavaScript
  • React Router DOM 6.20.0: Client-side routing
  • Tailwind CSS 3.3.6: Utility-first CSS framework
  • shadcn/ui: High-quality React component library built on Radix UI primitives
  • Lucide React: Modern icon library
  • React Markdown 10.1.0: Markdown rendering for project descriptions
  • class-variance-authority: Component variant management
  • clsx & tailwind-merge: Conditional class utilities

Backend Technologies

  • Flask 2.0.1: Lightweight Python web framework
  • Jinja2 3.0.1: Template engine for server-side rendering
  • Werkzeug 2.0.1: WSGI utilities
  • Python 3.x: Backend runtime

Development Tools

  • Create React App: React build tooling and dev server
  • Playwright 1.40.0: Browser automation for screenshots
  • PostCSS & Autoprefixer: CSS processing
  • ESLint: Code linting (React app config)
  • TypeScript Compiler: Type checking and compilation

🎨 Design System

Component Architecture

The project uses shadcn/ui components built on Radix UI primitives:

  • Accessible: Built with ARIA attributes and keyboard navigation
  • Customizable: Styled with Tailwind CSS, easy to theme
  • Composable: Small, reusable components

Styling Approach

  • Tailwind CSS: Utility-first CSS for rapid development
  • CSS Custom Properties: Theme variables for consistent theming
  • Responsive Design: Mobile-first approach with breakpoints
  • Dark Mode Ready: Color scheme supports dark backgrounds

🔄 Key Features

1. Project Showcase

  • Dynamic filtering by technology
  • Modal-based project details
  • Markdown support for rich descriptions
  • Screenshot gallery
  • Learn More functionality for detailed project information

2. Responsive Design

  • Mobile-first approach
  • Breakpoints: sm, md, lg, xl
  • Touch-friendly interactions

3. Performance Optimizations

  • Code splitting via React Router
  • Lazy loading for images
  • Optimized bundle size

4. Accessibility

  • Semantic HTML
  • ARIA labels and roles
  • Keyboard navigation
  • Screen reader friendly

🚀 Development Workflow

Frontend Development

npm start              # Start React dev server (localhost:3000)
npm run start:debug    # Debug mode with source maps
npm run build          # Production build

Backend Development

python web/app.py      # Start Flask dev server (localhost:5030)

Automation Scripts

npm run fetch-projects    # Fetch GitHub project info
npm run screenshot        # Take screenshots of projects

📦 Data Management

Projects

  • Stored in src/data/projects.json
  • Can be updated manually or via fetch-projects script
  • Supports project metadata, technology tags, screenshots, and markdown descriptions

Content

  • Services and industries defined in React components
  • Easy to update in component files
  • No CMS required for static content

🌐 Deployment

Production Build

  1. Frontend: npm run build creates optimized build/ folder
  2. Backend: Flask app serves static files and API routes
  3. Apache: Configured via apache_flask.conf for WSGI

📝 Architecture Highlights

  • Hybrid Architecture: Combines React SPA with Flask backend for flexibility
  • Component-Based: Modular React components for maintainability
  • Type-Safe: TypeScript throughout for better developer experience
  • Modern Stack: Latest versions of React, TypeScript, and Tailwind CSS
  • Developer Experience: Hot reload, TypeScript, ESLint, and automation scripts