A modern, responsive Excel Functions Reference website built with Vue.js 3, featuring comprehensive documentation of Excel formulas in Urdu/Roman language for Pakistani users.

• 48+ Excel Functions - Comprehensive library of commonly used Excel formulas
• Real-time Search - Instant search across function names, categories, and descriptions
• Category Filtering - Filter by Math, Statistical, Text, Logical, Date & Time, and Lookup
• Interactive Modal - Click any function to view detailed syntax and examples
• Documentation - Complete guides, tips, and FAQ section
• API Reference - REST API documentation with code examples
• Responsive Design - Mobile-first, works on all devices
• SEO Optimized - Proper meta tags and semantic HTML
• Production Ready - Optimized build for Netlify deployment

• Vue.js 3 - Composition API
• Vue Router 4 - Client-side routing
• Vite - Fast build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• Google Fonts - Inter font family

• Node.js 18+ (recommended)
• npm or yarn

1. Clone or download the repository

cd ExcelDocumentationVUE

2. Install dependencies

npm install

3. Run development server

npm run dev

The app will be available at http://localhost:5173

ExcelDocumentationVUE/
├── public/ # Static assets
├── src/
│ ├── assets/ # Styles and static resources
│ │ └── styles.css # Global CSS with Tailwind
│ ├── components/ # Reusable Vue components
│ │ ├── Header.vue
│ │ ├── CategoryFilter.vue
│ │ └── FunctionModal.vue
│ ├── data/ # Data layer
│ │ └── functions.js # Excel functions data
│ ├── router/ # Vue Router configuration
│ │ └── index.js
│ ├── views/ # Page components
│ │ ├── HomeView.vue
│ │ ├── DocumentationView.vue
│ │ └── ApiView.vue
│ ├── App.vue # Root component
│ └── main.js # App entry point
├── index.html # HTML template
├── package.json # Dependencies and scripts
├── vite.config.js # Vite configuration
├── tailwind.config.js # Tailwind CSS configuration
├── postcss.config.js # PostCSS configuration
└── netlify.toml # Netlify deployment config

1. Install Netlify CLI

npm install -g netlify-cli

2. Build the project

npm run build

3. Deploy

netlify deploy --prod --dir=dist

1. Build the project locally

npm run build

2. Go to Netlify Dashboard

3. Drag and drop the dist/ folder

1. Push code to GitHub/GitLab/Bitbucket

2. Connect repository in Netlify Dashboard

3. Configure build settings:

   • Build command: npm run build
   • Publish directory: dist

The netlify.toml file is already configured for proper SPA routing.

Edit tailwind.config.js:

theme: {
 extend: {
 colors: {
 primary: '#9ACD32', // YellowGreen
 'primary-dark': '#7FA82E',
 accent: '#FFFF99',
 }
 }
}

Edit src/data/functions.js:

export const excelFormulas = [
 // Add your function here
 { 
 name: "YOUR_FUNCTION", 
 category: "Category", 
 desc: "Description in Urdu/Roman" 
 },
 // ...
]
// Add syntax
export const syntaxMap = {
 'YOUR_FUNCTION': 'YOUR_FUNCTION(arg1, arg2, ...)',
}
// Add example
export const exampleMap = {
 'YOUR_FUNCTION': '=YOUR_FUNCTION(A1, B1)',
}

• Home (/) - Functions listing with search and filter
• Documentation (/docs) - Getting started guides, tips, and FAQ
• API (/api) - REST API reference with code examples

• Debounced search (180ms delay)
• Searches across function name, category, and description
• Case-insensitive matching

• Dynamic pills based on available categories
• Active state highlighting
• Filters combined with search

• Opens on row click
• Displays syntax and examples
• ESC key to close
• Click outside to close
• Smooth transitions

• Client-side routing with Vue Router
• 404 handling (redirects to home)
• Scroll to top on navigation
• Dynamic page titles

Contributions are welcome! Feel free to:

• Add more Excel functions
• Improve descriptions
• Fix bugs
• Enhance UI/UX

For questions or support, contact: systemset.co@gmail.com

This project is open source and available for educational purposes.

Built with ❤️ by Systemset Co