https://github.com/mirror45/big-trip
🗺️ «Big Trip» — современный сервис для путешественников. Сервис помогает детально спланировать маршрут поездки, рассчитать стоимость проезда и получить информацию о достопримечательностях.
https://github.com/mirror45/big-trip
chartjs flatpickr js momentjs mvp oop rest-api webpack
Last synced: about 1 month ago
JSON representation
🗺️ «Big Trip» — современный сервис для путешественников. Сервис помогает детально спланировать маршрут поездки, рассчитать стоимость проезда и получить информацию о достопримечательностях.
- Host: GitHub
- URL: https://github.com/mirror45/big-trip
- Owner: Mirror45
- Created: 2024-02-12T13:26:18.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-19T08:57:05.000Z (almost 2 years ago)
- Last Synced: 2024-12-27T05:08:47.624Z (over 1 year ago)
- Topics: chartjs, flatpickr, js, momentjs, mvp, oop, rest-api, webpack
- Language: JavaScript
- Homepage: https://big-trip-1.netlify.app
- Size: 976 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- Contributing: Contributing.md
Awesome Lists containing this project
README
# ✈️ Big Trip — Travel Planner
A travel planning application that allows users to build route itineraries, calculate trip costs, view statistics, and work without an internet connection.
Built with **Vanilla JavaScript** using the **MVP (Model-View-Presenter)** architectural pattern.
## 🚀 Features
### 🗺 Route Management
- **View:** Display a list of all travel events.
- **Create:** Add new route points with selectable types (Taxi, Bus, Train, Ship, Transport, Drive, Flight, Check-in, Sightseeing, Restaurant), destinations, dates, prices, and extra offers.
- **Edit:** Modify existing points.
- **Delete:** Remove route points.
- **Favorites:** Mark specific points as favorites.
### 🔍 Filtering & Sorting
- **Filters:**
- `Everything` — all points.
- `Future` — upcoming trips.
- `Past` — completed trips.
- **Sorting:**
- `Day` — by date (default).
- `Time` — by event duration.
- `Price` — by cost.
### 📊 Statistics
A dedicated statistics screen (powered by `Chart.js`), accessible via the menu:
- **Money:** Chart showing expenses by transport/venue type.
- **Type:** Chart showing usage count for each transport type.
- **Time-spend:** Chart showing time spent on each activity.
### 📡 Network & Offline Mode
- Interacts with a REST API (fetches points, destinations, offers).
- **Offline-first:** The app works without an internet connection.
- Uses `Service Worker` for static asset caching.
- Data is saved to `localStorage` (prefix: `big-trip-localstorage`).
- Automatic synchronization (`/points/sync`) occurs when the connection is restored.
- Network status indicator in the browser tab title (`[offline]`).
---
## 🛠 Tech Stack
### Core
* **JavaScript (ES6+)** — Primary development language.
* **MVP** — Architectural pattern (separation into Model, View, Presenter).
* **Webpack 4** — Module bundler.
### Libraries (Dependencies)
* **dayjs** (`1.9.5`) — Date and time manipulation.
* **flatpickr** (`4.6.6`) — Date and time picker component.
* **Chart.js** (`2.9.4`) — Data visualization for statistics.
* **he** (`1.2.0`) — HTML entity encoder/decoder (XSS protection).
### Dev Tools
* **ESLint** — Code linting (`htmlacademy` config).
* **nanoid** — Unique ID generation.
---
## 🏗 Project Structure (`src/`)
* `api/` — Server interaction and storage logic (`Api`, `Provider`, `Store`).
* `model/` — Data models (`EventModel`, etc.).
* `view/` — UI components (inherit from `AbstractView`).
* `presenter/` — Presenters (manage logic for `TablePresenter`, `EventPresenter`).
* `utils/` — Utility functions (dates, rendering, toast notifications).
* `const.js` — Project constants (types, filters, sorting).
* `main.js` — Application entry point.
---
## 🔧 Getting Started
> ⚠️ **Node.js v16** is required.
```bash
# Clone the repository to your local machine
git clone git@github.com:Mirror45/big-trip.git
# Navigate into the cloned project directory
cd big-trip
# Install all dependencies
npm install
# Start the development server
npm start
# (Optional) Run linter to check code quality
npm run lint
```