KnowledgePedia - Full-Stack Documentation Platform

A modern, responsive documentation platform built with React (frontend) and Express.js (backend), inspired by Fumadocs. Features MDX support, integrated search, navigation, MySQL database authentication, and a clean, professional interface for creating and managing technical documentation.

🏗️ Architecture Overview

This project consists of two main components:

• Frontend (knowledgepedia-docs/): React application with TypeScript, Redux, and MDX support
• Backend (backend/): Express.js API with MySQL database and JWT authentication

🚀 Quick Start

Prerequisites

• Node.js (v18+)
• MySQL Server (v8.0+)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/your-username/knowledgepedia.git
   cd knowledgepedia

2. Set up the backend:

   cd backend
   npm install
   # Create .env file with database configuration
   npm run build
   npm run dev

3. Set up the frontend (in a new terminal):

   cd ../knowledgepedia-docs
   npm install
   npm run dev

4. Set up the database:

   • Create MySQL database named knowledgepedia
   • Run mysql -u root -p < backend/database-setup.sql
   • Default user: admin@example.com / password123

5. Access the application:

   • Frontend: http://localhost:5173
   • Backend API: http://localhost:3001

📋 Features

Frontend Features

• MDX Support: Write documentation using Markdown with React components
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Search Functionality: Built-in search capabilities across articles by title
• Authentication System: User login with JWT tokens and private routes
• Category Management: Full CRUD operations for documentation categories
• Article Management: Complete MDX article editor with category association
• Navigation: Sidebar navigation with categorized articles and user management
• Routing: Client-side routing with React Router and protected routes
• State Management: Redux Toolkit for global state handling (auth, categories, articles, search)

Backend Features

• RESTful API: Complete REST endpoints for authentication, categories, and articles
• Sequelize ORM: TypeScript-first ORM for MySQL with model definitions and associations
• MySQL Integration: Connection pooling and secure database operations
• JWT Authentication: Secure token-based authentication with expiration
• HTTPS Support: Optional SSL/TLS encryption with OpenSSL certificates
• Password Hashing: bcrypt for secure password storage
• Categories API: Full CRUD operations for managing documentation categories
• Articles API: Full CRUD operations with MDX content support and category relations
• Search API: Backend-powered search with category filtering
• TypeScript Support: Full type safety and better developer experience

📁 Project Structure

knowledgepedia/
├── knowledgepedia-docs/           # Frontend React Application
│   ├── src/
│   │   ├── components/            # UI Components
│   │   │   ├── ArticleEditor.tsx   # MDX article editor
│   │   │   ├── ArticleItem.tsx     # Article list item
│   │   │   ├── ArticleList.tsx     # Articles list with filtering
│   │   │   ├── ArticleView.tsx     # Article display with MDX rendering
│   │   │   ├── CategoryForm.tsx    # Category creation form
│   │   │   ├── CategoryItem.tsx    # Category management item
│   │   │   ├── CategoryList.tsx    # Categories list
│   │   │   ├── Layout.tsx          # Main layout with sidebar
│   │   │   ├── LoginForm.tsx       # Authentication form
│   │   │   ├── MainContent.tsx     # Content wrapper
│   │   │   ├── Navbar.tsx          # Navigation bar with logout
│   │   │   ├── PrivateRoute.tsx    # Route protection
│   │   │   ├── Sidebar.tsx         # Navigation sidebar
│   │   │   └── ...
│   │   ├── pages/                  # Page Components
│   │   │   ├── Article.tsx         # Individual article page
│   │   │   ├── ArticleEdit.tsx     # Article editing page
│   │   │   ├── Articles.tsx        # Articles list page
│   │   │   ├── Dashboard.tsx       # User dashboard
│   │   │   ├── Home.tsx            # Home page (redirects to login)
│   │   │   └── Login.tsx           # Login page
│   │   ├── store/                  # Redux Store
│   │   │   ├── slices/             # Redux slices
│   │   │   │   ├── articleSlice.ts # Article state management
│   │   │   │   ├── authSlice.ts    # Authentication state
│   │   │   │   ├── categorySlice.ts # Category state management
│   │   │   │   └── searchSlice.ts  # Search functionality
│   │   │   └── ...
│   │   └── utils/                  # Utility functions
│   │       └── api.ts              # API client with JWT handling
│   ├── package.json
│   └── README.md
│
├── backend/                       # Backend Express.js API
│   ├── src/
│   │   ├── config/                 # Database Configuration
│   │   │   └── database.ts         # Sequelize database setup
│   │   ├── models/                 # Sequelize Models
│   │   │   ├── Article.ts          # Article model with MDX content
│   │   │   ├── Category.ts         # Category model
│   │   │   └── User.ts             # User authentication model
│   │   ├── routes/                 # API Routes
│   │   │   ├── articles.ts         # Article CRUD endpoints
│   │   │   ├── auth.ts             # Authentication endpoints
│   │   │   └── categories.ts       # Category CRUD endpoints
│   │   └── index.ts                # Main Server File with HTTPS
│   ├── certs/                      # SSL Certificates
│   │   ├── cert.pem                # SSL Certificate
│   │   └── key.pem                 # Private Key
│   ├── database-setup.sql          # Database Schema with all tables
│   ├── package.json
│   └── README.md
│
└── README.md                      # This file

🛠️ Technologies Used

Frontend Technologies

Core Framework & Language

• React 19.1.1 - Najnowsza wersja biblioteki React z ulepszonymi funkcjami i wydajnością
• TypeScript 5.9.3 - Typowany nadzbiór JavaScript zapewniający bezpieczeństwo typów i lepsze wsparcie IDE
• Vite 7.1.7 - Nowoczesny build tool zapewniający szybkie hot module replacement (HMR) i optymalizację bundlowania

State Management & Routing

• Redux Toolkit 2.3.0 - Oficjalny, uproszczony sposób pisania logiki Redux z wbudowanymi najlepszymi praktykami
• React Redux 9.1.2 - Oficjalne bindings React dla Redux
• React Router DOM 6.28.0 - Biblioteka routingu dla aplikacji React z obsługą protected routes

Content & Editor

• MDX Editor 3.48.0 - Zaawansowany edytor WYSIWYG dla dokumentacji MDX z obsługą React components
• MDX JS React 3.0.1 - Integracja MDX z React, umożliwiająca pisanie dokumentacji w formacie Markdown z komponentami React
• MDX JS Rollup 3.0.1 - Plugin Rollup/Vite do przetwarzania plików MDX podczas buildowania

HTTP Client & Styling

• Axios 1.7.9 - Promise-based HTTP client z automatyczną obsługą JWT tokenów i interceptors
• Styled Components 6.1.19 - CSS-in-JS library umożliwiająca stylowanie komponentów z wykorzystaniem template literals
• CSS3 - Tradycyjne style CSS dla globalnych stylów i layoutu

Development Tools

• ESLint 9.36.0 - Linter JavaScript/TypeScript z konfiguracją dla React
• TypeScript ESLint 8.45.0 - ESLint plugin dla TypeScript z dodatkowymi regułami
• Vite Plugin React 5.0.4 - Oficjalny plugin Vite dla React z Fast Refresh

Backend Technologies

Core Framework & Language

• Express.js 4.18.2 - Minimalistyczny i elastyczny framework webowy dla Node.js
• TypeScript 5.3.3 - Typowany nadzbiór JavaScript zapewniający bezpieczeństwo typów po stronie serwera
• Node.js - Środowisko uruchomieniowe JavaScript (wymagane v18+)

Database & ORM

• MySQL2 3.6.5 - Oficjalny driver MySQL dla Node.js z obsługą Promise i connection pooling
• Sequelize 6.37.7 - Potężny ORM (Object-Relational Mapping) dla Node.js z obsługą migracji, asocjacji i transakcji
• Sequelize TypeScript 2.1.6 - Rozszerzenie Sequelize zapewniające pełne wsparcie TypeScript z dekoratorami i typami

Authentication & Security

• bcrypt 5.1.1 - Biblioteka do hashowania haseł z wykorzystaniem algorytmu bcrypt (10 rounds)
• jsonwebtoken 9.0.2 - Implementacja JSON Web Tokens (JWT) dla autentykacji bezstanowej
• CORS 2.8.5 - Middleware Express do konfiguracji Cross-Origin Resource Sharing

Development & Configuration

• dotenv 16.3.1 - Ładowanie zmiennych środowiskowych z pliku .env
• nodemon 3.0.2 - Narzędzie do automatycznego restartowania serwera podczas developmentu
• ts-node 10.9.2 - TypeScript execution engine dla Node.js umożliwiający bezpośrednie uruchamianie plików .ts
• OpenSSL - Narzędzie do generowania certyfikatów SSL/TLS dla obsługi HTTPS (opcjonalne)

Database

• MySQL 8.0+ - Relacyjna baza danych wykorzystywana do przechowywania użytkowników, kategorii i artykułów

Build & Development Tools

• npm/yarn - Menadżery pakietów Node.js
• TypeScript Compiler - Kompilacja TypeScript do JavaScript (ES2020)
• Vite Build - Produkcyjne bundlowanie frontendu z optymalizacją i minifikacją

📖 Detailed Documentation

• Frontend README
• Backend README

🔒 Security Features

• JWT token authentication with automatic logout on token expiration
• Password hashing with bcrypt (10 rounds)
• HTTPS support with OpenSSL certificates (optional)
• Private routes protection with authentication guards
• Secure API communication via Axios with automatic token injection
• Input validation and sanitization
• CORS configuration
• Environment-based configuration
• Single shared user authentication system

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📞 Contact

Developed by MaxSoft

For questions, support, or collaboration opportunities, please visit our website at https://maxsoft.pl

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.