🧭 Server Explorer

A React + Vite-based app that displays a list of servers with location, distance, and sorting capabilities.

---

🚀 Features

• 🔎 View servers with name and distance
• ↕️ Sort servers by name or distance
• 💅 Tailwind CSS for responsive styling
• ✅ Unit tests using Vitest and @testing-library/react

---

📦 Tech Stack

• React 19 + TypeScript
• Vite
• Tailwind CSS
• Vitest for testing
• Vercel for deployment

---

📂 Project Structure

. ├── src │ ├── components // Reusable components │ ├── pages // Main pages │ ├── context // Authentication context │ ├── styles // Global styles for tailwind │ ├── utils // Helper functions │ └── tests // Unit tests ├── public // Static assets ├── dist // Production build output

---

🔧 Setup & Run Locally

# 1. Clone the repo
git clone https://github.com/your-username/server-explorer.git
cd server-explorer

# 2. Install dependencies
npm install

# 3. Run the development server
npm run dev

🧪 Run Tests

npm run test

To run in watch mode

npm run test:watch

📦 Build for Production

npm run build

🌍 Live Demo

View Live Project

🚀 Features to Improve

• Enhanced Form Validation: Add custom error messages and validations with regex for password and username.
• Improve Responsiveness: Optimize layout for medium-sized screens and tablets.
• Add Search & Filter: Implement server name search and distance filtering for better usability.
• Implement Pagination or Lazy Loading: Efficiently handle large server lists to improve performance.
• Theme Support: Enable light/dark mode using Tailwind’s dark: variant and theme toggling logic.
• Persist User Authentication: Maintain login state across page reloads using localStorage or cookies (if needed).