https://github.com/parthshah04/destinotion
A Next.js and Tailwind CSS web app to help decide future travel destinations. Features file-based storage, authentication, and a vibrant UI inspired by adventurous themes.
https://github.com/parthshah04/destinotion
file-based-storage nextjs tailwindcss travel
Last synced: about 2 months ago
JSON representation
A Next.js and Tailwind CSS web app to help decide future travel destinations. Features file-based storage, authentication, and a vibrant UI inspired by adventurous themes.
- Host: GitHub
- URL: https://github.com/parthshah04/destinotion
- Owner: parthshah04
- License: mit
- Created: 2025-04-07T03:40:37.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-08T05:52:14.000Z (about 1 year ago)
- Last Synced: 2025-04-10T03:45:14.966Z (about 1 year ago)
- Topics: file-based-storage, nextjs, tailwindcss, travel
- Language: JavaScript
- Homepage: https://destinotion.parthshah.co.in/
- Size: 2.11 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Destinotion 🌎✈️
[**Destinotion**](https://destinotion.parthshah.co.in) is a sleek web application that helps you discover and organize your next travel adventures. Built with [Next.js](https://nextjs.org/) and [Tailwind CSS](https://tailwindcss.com/), the app offers a modern, responsive design with file-based storage to efficiently manage your travel ideas.
## Table of Contents
- [Features](#features)
- [Installation & Setup](#installation--setup)
- [Available Scripts](#available-scripts)
- [Design & Customization](#design--customization)
- [Usage Guide](#usage-guide)
- [Tech Stack](#tech-stack)
- [Performance Optimizations](#performance-optimizations)
- [Contributing](#contributing)
- [License](#license)
## Features
- **Intuitive UI:** Clean and modern design inspired by travel and adventure
- **Responsive Layout:** Mobile-friendly interface that adjusts seamlessly to different screen sizes
- **File-Based Storage:** Lightweight data management using a simple file-based database
- **Interactive Components:** Easily add, edit, and delete places with real-time updates
- **Tag Filtering:** Categorize and filter destinations by custom tags
- **Search Functionality:** Quickly find destinations by name, location, or description
- **Beautiful Animations:** Smooth transitions and micro-interactions throughout the app
## Installation & Setup
1. **Clone the Repository:**
```bash
git clone https://github.com/parthshah04/Destinotion.git
cd Destinotion
```
2. **Install Dependencies:**
Using Yarn:
```bash
yarn install
```
Or with NPM:
```bash
npm install
```
3. **Run the Development Server:**
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the app.
## Available Scripts
| Command | Description |
|---------|-------------|
| `npm run dev` | Starts the development server at [http://localhost:3000](http://localhost:3000) with hot-reloading |
| `npm run build` | Creates an optimized production build in the `.next` folder |
| `npm run start` | Runs the built app in production mode |
## Design & Customization
The project's design is inspired by travel and adventure. Customize the design in the following ways:
### Tailwind CSS Configuration
Update `tailwind.config.js` with custom colors, fonts, and animations:
```js
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
destinationBlue: "#1E3A8A", // a deep blue
destinationOrange: "#F97316", // vibrant sunset orange
destinationSand: "#F9A826", // warm, sandy tone
destinationGray: "#E5E7EB", // light gray for contrast
},
fontFamily: {
sans: ['Roboto', 'sans-serif'],
display: ['Montserrat', 'sans-serif'], // strong display font for headers
},
// Custom animations & keyframes
animation: {
fadeIn: "fadeIn 0.5s ease-in-out",
slideUp: "slideUp 0.5s ease-in-out",
},
keyframes: {
fadeIn: {
"0%": { opacity: 0 },
"100%": { opacity: 1 },
},
slideUp: {
"0%": { transform: "translateY(20px)", opacity: 0 },
"100%": { transform: "translateY(0)", opacity: 1 },
},
},
},
},
plugins: [],
};
```
## Usage Guide
### Managing Destinations
1. **Add a New Destination:**
- Click the "Add Place" button in the navigation
- Fill in the place details including name, location, description, and tags
- Upload an image (optional)
- Click "Save" to add the destination to your list
2. **Edit a Destination:**
- Click on the destination card to view details
- Click the "Edit" button
- Update the information as needed
- Click "Save" to confirm changes
3. **Delete a Destination:**
- Navigate to the destination's detail page
- Click the "Delete" button
- Confirm deletion in the dialog
### Filtering and Searching
- Use the tag checkboxes at the top of the destinations list to filter by category
- Use the search bar to find destinations by name, location, or description
- Combine filters and search for more specific results
## Tech Stack
- **Frontend:** React, Next.js, Tailwind CSS
- **State Management:** React Context API
- **Storage:** File-based JSON storage (easily replaceable with a database)
- **Deployment:** Vercel (recommended)
## Performance Optimizations
- **Image Optimization:** Using Next.js Image component for optimized loading
- **Code Splitting:** Automatic code splitting for faster page loads
- **Static Generation:** Pre-rendered pages where possible for SEO and performance
- **Lazy Loading:** Components and images load only when needed
- **Memoization:** Performance-critical components use React.memo and useMemo
## Contributing
Contributions are welcome and appreciated! Here's how you can contribute:
1. **Fork the Repository:** Create your own copy of the project
2. **Create a Branch:** `git checkout -b feature/your-amazing-feature`
3. **Make Changes:** Implement your feature or bug fix
4. **Run Tests:** Ensure your changes pass all tests
5. **Commit Changes:** `git commit -m 'Add some amazing feature'`
6. **Push to Branch:** `git push origin feature/your-amazing-feature`
7. **Submit a Pull Request:** Open a PR from your fork to the main repository
Please follow the project's code style and include appropriate tests for new features.
## License
This project is licensed under the [MIT License](LICENSE).
---
Made with ❤️ by [Parth Shah]