const project = "Village Management System";

type: "Advanced Web Project";

Village Management System Screenshot
<div class="village-system">
<header>Dashboard</header>
<main>Village Data</main>
</div>
< Phase_1_Code /> < Phase_2_Code />

Description

The Village Management System provides a streamlined approach to managing and displaying demographic, geographical, and administrative details of various villages. It includes a real-time chat feature using WebSocket integrated with the API, enabling instant communication among users and admins.

Technologies Used

Frontend: React with pure CSS
Backend: Node.js with GraphQL API
Database: MySQL (XAMPP)
Real-time: WebSocket

Key Features

User

  • View village demographics
  • Access geographical data
  • See public facilities

Admin

  • Full CRUD capabilities
  • Manage village data
  • Monitor user activities

System

  • Real-time chat
  • Secure authentication
  • Responsive interface

Development Highlights

Phase 1

Initial front-end development using HTML, LESS CSS, and JavaScript with mock data.

Phase 2 & 3

Refactored to React with pure CSS, integrated Node.js backend with GraphQL and MySQL, added WebSocket chat.