Merge pull request 'develop' (#3) from develop into main
All checks were successful
Deploy to Production / deploy (push) Successful in 2m52s
All checks were successful
Deploy to Production / deploy (push) Successful in 2m52s
Reviewed-on: #3
This commit is contained in:
commit
3222978db2
135
README.md
Normal file
135
README.md
Normal file
|
|
@ -0,0 +1,135 @@
|
||||||
|
# Aero Echo
|
||||||
|
|
||||||
|
A real-time flight tracking application that displays live aircraft movements on an interactive map.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
## 🚀 Features
|
||||||
|
|
||||||
|
- **Real-Time Tracking**: Watch aircraft positions update instantly with WebSocket connections
|
||||||
|
- **Global Coverage**: Track flights worldwide with extensive ADS-B network coverage
|
||||||
|
- **Live Data**: Access comprehensive flight details including altitude, speed, and heading
|
||||||
|
- **Smart Filtering**: Flight data is filtered based on map zoom level and boundaries for optimal performance
|
||||||
|
- **Responsive Design**: Works seamlessly on desktop and mobile devices
|
||||||
|
|
||||||
|
## 🛠️ Technologies Used
|
||||||
|
|
||||||
|
### Frontend
|
||||||
|
|
||||||
|
- **Next.js** - React framework for optimized performance and seamless navigation
|
||||||
|
- **Socket.IO Client** - WebSocket technology for real-time bidirectional communication
|
||||||
|
- **Tailwind CSS** - Utility-first CSS framework for styling
|
||||||
|
- **Lucide React** - Beautiful icon library
|
||||||
|
|
||||||
|
### Backend
|
||||||
|
|
||||||
|
- **Node.js** - JavaScript runtime environment
|
||||||
|
- **Express** - Web application framework for Node.js
|
||||||
|
- **Socket.IO** - Real-time event-based communication
|
||||||
|
- **ADSB.one API** - Real-time aircraft data streaming
|
||||||
|
|
||||||
|
## 📋 Prerequisites
|
||||||
|
|
||||||
|
Before you begin, ensure you have the following installed:
|
||||||
|
|
||||||
|
- Node.js (v18 or higher)
|
||||||
|
- npm or yarn
|
||||||
|
- Git
|
||||||
|
|
||||||
|
### 🔧 Installation
|
||||||
|
|
||||||
|
## ⚙️ Configuration
|
||||||
|
|
||||||
|
### Backend Configuration
|
||||||
|
|
||||||
|
Create a `.env` file in the backend directory:
|
||||||
|
|
||||||
|
```env
|
||||||
|
NODE_ENV=development
|
||||||
|
PORT=3001
|
||||||
|
```
|
||||||
|
|
||||||
|
### Frontend Configuration
|
||||||
|
|
||||||
|
Create a `.env.local` file in the frontend directory:
|
||||||
|
|
||||||
|
```env
|
||||||
|
NEXT_PUBLIC_API_URL=http://localhost:3001/api/v1
|
||||||
|
NEXT_PUBLIC_SOCKET_SERVER_URL=http://localhost:3001
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🚀 Running the Application
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📡 API Limitations
|
||||||
|
|
||||||
|
This application uses the ADSB.one API with the following constraints:
|
||||||
|
|
||||||
|
- **Coverage Radius**: Limited to 250 nautical miles from a specific location
|
||||||
|
- **Rate Limiting**: Maximum 1 request per second to the API
|
||||||
|
- **Data Caching**: Server-side global variable caching is implemented to optimize performance and respect rate limits
|
||||||
|
- **Smart Filtering**: Flight data is filtered based on map zoom level and boundaries to provide relevant information efficiently
|
||||||
|
|
||||||
|
## 🏗️ Architecture
|
||||||
|
|
||||||
|
### Data Flow
|
||||||
|
|
||||||
|
1. Backend makes requests to ADSB.one API (max 1 req/sec)
|
||||||
|
2. Flight data is cached in a global variable on the server
|
||||||
|
3. Frontend connects to backend via Socket.IO
|
||||||
|
4. Backend filters and sends relevant data based on map boundaries
|
||||||
|
5. Frontend receives real-time updates and displays aircraft on the map
|
||||||
|
|
||||||
|
### Caching Strategy
|
||||||
|
|
||||||
|
To respect the API's 1 request/second limit, the backend:
|
||||||
|
|
||||||
|
- Maintains a global cache of all aircraft data
|
||||||
|
- Updates the cache once per second
|
||||||
|
- Filters data based on client's map view
|
||||||
|
- Pushes only relevant data to connected clients
|
||||||
|
|
||||||
|
## 🤝 Contributing
|
||||||
|
|
||||||
|
Contributions are welcome! Please feel free to submit a Pull Request.
|
||||||
|
|
||||||
|
1. Fork the project
|
||||||
|
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
|
||||||
|
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
|
||||||
|
4. Push to the branch (`git push origin feature/AmazingFeature`)
|
||||||
|
5. Open a Pull Request
|
||||||
|
|
||||||
|
## 📝 License
|
||||||
|
|
||||||
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
||||||
|
|
||||||
|
## 🙏 Acknowledgments
|
||||||
|
|
||||||
|
- [ADSB.one](https://api.adsb.one) for providing free aircraft tracking data
|
||||||
|
- [Socket.IO](https://socket.io/) for real-time communication
|
||||||
|
- [Next.js](https://nextjs.org/) for the amazing React framework
|
||||||
|
- [Tailwind CSS](https://tailwindcss.com/) for the utility-first CSS framework
|
||||||
|
|
||||||
|
## 📞 Contact
|
||||||
|
|
||||||
|
Your Name - [@yourtwitter](https://twitter.com/yourtwitter)
|
||||||
|
|
||||||
|
Live Demo: [https://aeroecho.roozbehk.com/](https://aeroecho.roozbehk.com/)
|
||||||
|
|
||||||
|
## 🐛 Known Issues
|
||||||
|
|
||||||
|
- Coverage limited to 250nm radius from configured location
|
||||||
|
- API rate limiting may cause delays during high traffic
|
||||||
|
- Some aircraft may not appear if outside the coverage area
|
||||||
|
|
||||||
|
## 🔮 Future Enhancements
|
||||||
|
|
||||||
|
- [ ] Add flight path history
|
||||||
|
- [ ] Implement aircraft search functionality
|
||||||
|
- [ ] Add airport information overlays
|
||||||
|
- [ ] Create mobile app version
|
||||||
|
- [ ] Add weather layer integration
|
||||||
|
- [ ] Implement multiple location support
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
|
||||||
|
|
||||||
## Getting Started
|
|
||||||
|
|
||||||
First, run the development server:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run dev
|
|
||||||
# or
|
|
||||||
yarn dev
|
|
||||||
# or
|
|
||||||
pnpm dev
|
|
||||||
# or
|
|
||||||
bun dev
|
|
||||||
```
|
|
||||||
|
|
||||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
|
||||||
|
|
||||||
You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
|
|
||||||
|
|
||||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
|
||||||
|
|
||||||
## Learn More
|
|
||||||
|
|
||||||
To learn more about Next.js, take a look at the following resources:
|
|
||||||
|
|
||||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
|
||||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
||||||
|
|
||||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
|
||||||
|
|
||||||
## Deploy on Vercel
|
|
||||||
|
|
||||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
|
||||||
|
|
||||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
|
||||||
BIN
frontend/image.png
Normal file
BIN
frontend/image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
||||||
{
|
{
|
||||||
"name": "aeroecho-fullstack",
|
"name": "aeroecho-fullstack",
|
||||||
"version": "1.0.0",
|
"version": "1.1.1",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "aeroecho-fullstack",
|
"name": "aeroecho-fullstack",
|
||||||
"version": "1.0.0",
|
"version": "1.1.1",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"leaflet-rotatedmarker": "^0.2.0"
|
"leaflet-rotatedmarker": "^0.2.0"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user