101 lines
3.3 KiB
Markdown
101 lines
3.3 KiB
Markdown
# 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.0` IP address in `data.json` to 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:
|
|
|
|
1. **Clone the repository:**
|
|
```bash
|
|
git clone [repository-url]
|
|
cd Client # Assuming 'Client' is the project root directory
|
|
```
|
|
2. **Install dependencies:**
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
## ▶️ Running the Project
|
|
|
|
### Development Mode
|
|
|
|
To run the project in development mode with hot-reloading:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
This command compiles the project into the `dist/` directory, ready for deployment.
|
|
|
|
### Preview Production Build
|
|
|
|
To preview the production build locally:
|
|
|
|
```bash
|
|
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`:
|
|
|
|
```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. |