QuickLaunch - IP Bookmark Dashboard
QuickLaunch is a modern, responsive web application designed to provide quick access to your most frequently used websites and services. It dynamically displays links based on your current IP address, allowing for a personalized and context-aware browsing experience. Additionally, it supports universal links that are accessible regardless of the user's IP.
🚀 Features
- Automatic IP Detection: Identifies your public IP address to tailor content.
- Dynamic Link Display: Shows relevant bookmarks and services based on your detected IP.
- Universal Links Support: Configure links with
0.0.0.0IP address indata.jsonto make them accessible to all users. - Modern User Interface: A clean, intuitive, and responsive design built with Tailwind CSS, featuring glassmorphism elements and smooth transitions.
- Fast Development Experience: Powered by React and Vite for a highly optimized development and build process.
- TypeScript: Ensures type safety and improves code quality.
🛠️ Technologies Used
- React 19: A JavaScript library for building user interfaces.
- Vite: A fast frontend build tool that provides an excellent developer experience.
- Tailwind CSS 4: A utility-first CSS framework for rapidly styling modern web applications.
- TypeScript: A superset of JavaScript that adds static types.
💻 Setup and Installation
To get this project up and running on your local machine, follow these steps:
- Clone the repository:
git clone [repository-url] cd Client # Assuming 'Client' is the project root directory - Install dependencies:
npm install
▶️ Running the Project
Development Mode
To run the project in development mode with hot-reloading:
npm run dev
This will typically start the application on http://localhost:5173 (or another port if 5173 is in use).
Build for Production
To build the application for production:
npm run build
This command compiles the project into the dist/ directory, ready for deployment.
Preview Production Build
To preview the production build locally:
npm run preview
⚙️ Configuration
The application's links are configured via the public/data.json file. This file should contain an array of objects, where each object represents a link.
public/data.json Structure
Each object in the data.json array should have the following properties:
ip: The IP address for which this link should be displayed. Use"0.0.0.0"for links that should be visible to all users, regardless of their IP.url: The full URL of the website or service.name: A user-friendly name for the link, which will be displayed on the dashboard.
Example data.json:
[
{
"ip": "5.181.187.250",
"url": "https://www.google.com",
"name": "Google"
},
{
"ip": "0.0.0.0",
"url": "https://gemini.google.com",
"name": "Gemini"
},
{
"ip": "192.168.1.100",
"url": "http://localhost:3000",
"name": "Local Dev Server"
}
]
🤝 Contributing
Feel free to fork the repository, make improvements, and submit pull requests. For major changes, please open an issue first to discuss what you would like to change.