A sleek app to manage and track your travel essentials. Organize your packing lists, set reminders for must-buy items, and get alarms if you forget anything while on the go.
- Key Features
- Tech Stack
- Project Structure
- Getting Started
- How It Works
- Security
- Screenshots
- Future Scope
- Contributing
- License
- Contact
Maintain separate lists for Going on Trip and Coming from Trip. Add, check off, and delete items with a single click. Your lists persist across sessions.
Forgot to pack something? TripTally plays an audio alarm when unchecked items remain on your active list. Configure the alarm volume, duration, and reminder interval to your preference.
Sign up and log in to keep your data tied to your account. Passwords are SHA-256 hashed before storage, and sessions use cryptographically random tokens instead of predictable user IDs.
Fine-tune your reminder experience:
- Adjust alarm volume (0-100%)
- Set alarm playback duration
- Set reminder check interval
- Test the alarm sound before your trip
Works on both desktop and mobile browsers with a clean, intuitive interface.
| Layer | Technology |
|---|---|
| Frontend | HTML5, CSS3, Vanilla JavaScript |
| Backend | Node.js, Express.js (static file server) |
| Storage | Browser LocalStorage, Cookies |
| Security | Web Crypto API (SHA-256, crypto.getRandomValues) |
TripTally/
├── index.js # Express server entry point
├── package.json
├── public/
│ ├── index.html # Main dashboard
│ ├── icon.png # App favicon
│ ├── Jhol.mp3 # Alarm audio file
│ ├── pages/
│ │ ├── user.html # Login / Sign Up page
│ │ ├── reset.html # Password reset page
│ │ ├── configure-audio.html # Audio settings page
│ │ └── tutorial.html # Tutorial / help page
│ ├── scripts/
│ │ ├── assets/ # Core components & utilities
│ │ │ ├── hash.js # SHA-256 hashing & session management
│ │ │ ├── item.js # List item DOM component
│ │ │ ├── elemets.js # HTML templates
│ │ │ ├── functions.js # UI helper functions
│ │ │ └── audioFunctions.js # Audio control logic
│ │ ├── auth/ # Authentication
│ │ │ ├── auth.js # Login / Sign Up handlers
│ │ │ ├── user.js # User class definition
│ │ │ └── reset.js # Password reset logic
│ │ ├── src/ # Page initialization
│ │ │ ├── main.js # Main app setup
│ │ │ └── configAudio.js # Audio config page setup
│ │ └── utils/ # Utilities
│ │ ├── data.js # LocalStorage data management
│ │ ├── checkAuth.js # Auth state verification
│ │ ├── tracking.js # Reminder / alarm system
│ │ ├── location.js # Geolocation functions
│ │ └── controls.js # Location tracking controls
│ ├── styles/
│ │ ├── main/ # Global & tutorial styles
│ │ ├── auth/ # Auth page styles
│ │ └── components/ # Component-specific styles
│ └── tutorial/ # Tutorial screenshots (1-10.png)
└── Readme/
└── TripTally.jpg # Banner image
- Node.js (v14 or later)
- npm (comes with Node.js)
-
Clone the repository
git clone https://github.com/harshit391/TripTally.git
-
Navigate to the project directory
cd TripTally -
Install dependencies
npm install
-
Start the server
npm start
-
Open in your browser
http://localhost:3000
Sign Up --> Hash password (SHA-256) --> Store user in localStorage
--> Generate random session token --> Set cookie --> Redirect to dashboard
Login --> Hash entered password --> Compare against stored hash
--> On match: create session token --> Set cookie --> Redirect to dashboard
Logout --> Clear session from localStorage --> Clear cookie --> Redirect to login
User adds item --> Item saved to localStorage (per-user) --> DOM updated
Page loads --> Session token validated --> User data loaded --> Lists rendered
- User enables tracking on the dashboard
- A periodic check runs at the configured reminder interval
- If any unchecked items exist on the active list, the alarm audio plays
- The alarm stops after the configured duration
- The cycle repeats until all items are checked or tracking is disabled
- Password Hashing -- All passwords are hashed using SHA-256 via the Web Crypto API before being stored. Plain-text passwords are never persisted.
- Secure Session Tokens -- Sessions use 256-bit cryptographically random tokens generated with
crypto.getRandomValues(), replacing the previous predictable user ID approach. - Session Management -- Each login generates a unique session token stored in both a cookie and localStorage. Logout invalidates the token on both sides.
- Legacy Migration -- Existing accounts with plain-text passwords are automatically upgraded to hashed passwords on next login.
- Password Strength -- Minimum 6-character password requirement enforced on sign up and password reset.
Note: This is a client-side application. All data (including hashed passwords and session tokens) is stored in the browser's localStorage. For production use, a server-side backend with a proper database would be recommended.
Click to view screenshots
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
- Cloud Database -- Sync data across devices so users can manage lists on desktop and access them on mobile
- Location Tracking -- Detect when a user arrives at or leaves a location and trigger reminders automatically
- List Suggestions -- Recommend packing items based on the trip destination and weather
- Interactive Map -- Show places left to visit on a GPS map
- Collaborative Lists -- Share packing lists with travel companions
Contributions are welcome! If you'd like to improve TripTally:
- Fork the repository
- Create a feature branch (
git checkout -b feature/your-feature) - Commit your changes (
git commit -m "Add your feature") - Push to the branch (
git push origin feature/your-feature) - Open a Pull Request
This project is licensed under the ISC License.
Harshit Singla -- LinkedIn
Feel free to reach out for feedback, questions, or collaboration.