Trip Planner Application

A full-stack web application for exploring destinations, booking trips, and viewing activities. The front-end is built with React and styled-components, while the back-end is powered by Django REST Framework with token-based authentication.

Users can browse popular destinations, search for trips, view destination details, explore activities, and make bookings.

---

Table of Contents

• Features
• Tech Stack
• Screenshots
• Installation
  • Backend
  • Frontend
• Seeding Data & Production Deployment
• Example API Calls
• Usage
• Environment Variables
• Folder Structure
• Contributing
• License

---

Features

• User authentication with JWT tokens
• Explore destinations and activities
• Search for trips by keyword
• Book trips and manage trip members
• Responsive UI for desktop and mobile
• Weather and cost info for destinations

---

Tech Stack

Frontend:

• React
• styled-components
• React Router DOM
• React Icons

Backend:

• Django
• Django REST Framework
• JWT Authentication

Other Tools:

• Fetch API for HTTP requests
• dotenv or python-decouple for environment variables

---

Screenshots

To Be Done (TBD) Alternatively, check the deployed website: https://alx-trip-planner.vercel.app/

---

Installation

Backend

1. Clone the repository:

git clone https://github.com/yourusername/trip-planner.git
cd trip-planner/backend

2. Create a virtual environment and activate it:

python3 -m venv venv
source venv/bin/activate   # macOS/Linux
venv\Scripts\activate      # Windows

3. Install dependencies:

pip install -r requirements.txt

4. Set up environment variables:

Create a .env file in backend/

VITE_API_USERNAME=your_api_username
VITE_API_PASSWORD=your_api_password
SECRET_KEY=your_django_secret_key
DEBUG=True
DATABASE_URL=postgres://user:password@localhost:5432/dbname

5. Run migrations:

python manage.py migrate

6. Start the backend server:

python manage.py runserver

Frontend

1. Navigate to the frontend folder:

cd ../frontend

2. Install dependencies:

npm install

3. Create a .env file in frontend/:

   VITE_API_BASE_URL=http://127.0.0.1:8000/api
   VITE_API_USERNAME=your_api_username
   VITE_API_PASSWORD=your_api_password

4. Start the React development server:

npm run dev

5. Open the app in your browser: http://localhost:5173

Seeding Data & Production Deployment

Seeding Data

1. Prepare a JSON or CSV file containing initial destinations, trips, and activities data.

2. Use Django management commands or loaddata to seed the database:

python manage.py loaddata initial_data.json

3. Verify that data appears correctly in the admin panel or API endpoints.

Production Deployment

1. Configure a production database (e.g., PostgreSQL).

2. Update .env for production settings:

DEBUG=False
DATABASE_URL=postgres://user:password@host:port/dbname

3. Collect static files:

 python manage.py collectstatic

4. Use a WSGI server like Gunicorn and a reverse proxy like Nginx. Example Gunicorn command:

gunicorn backend.wsgi:application --bind 0.0.0.0:8000

5. Frontend can be built and served via Vite:

npm run build

6. Upload the dist folder to your web server or configure with services like Netlify or Vercel.

Example API Calls

1. Obtain JWT Token

POST /api/token/

curl -X POST http://127.0.0.1:8000/api/token/ \
  -H "Content-Type: application/json" \
  -d '{"username":"your_username","password":"your_password"}'

Response:

{
  "access": "<access_token>",
  "refresh": "<refresh_token>"
}

2. Refresh Token

POST /api/token/refresh/

curl -X POST http://127.0.0.1:8000/api/token/refresh/ \
  -H "Content-Type: application/json" \
  -d '{"refresh":"<refresh_token>"}'

Response:

{
  "access": "<new_access_token>"
}

3. Fetch All Destinations

GET /api/destinations/

curl -X GET http://127.0.0.1:8000/api/destinations/ \
  -H "Authorization: Bearer <access_token>"

4. Search Trips

GET /api/destinations/?search=

curl -X GET "http://127.0.0.1:8000/api/destinations/?search=beach" \
  -H "Authorization: Bearer <access_token>"

5. Fetch Activities for a Destination

GET /api/activity/?destination=<destination_id>

curl -X GET "http://127.0.0.1:8000/api/activity/?destination=1" \
  -H "Authorization: Bearer <access_token>"

Usage

• Visit the home page to see popular destinations.

• Use the search bar or explore links to find trips.

• Click on a destination to view details and activities.

• Select a date and reserve your trip.

• Manage trip members using the “Add Trip Members” button.

• On mobile, the navigation menu collapses into a hamburger menu.

Variable	Description
VITE_API_BASE_URL	URL of the backend API
VITE_API_USERNAME	Username for API authentication
VITE_API_PASSWORD	Password for API authentication
SECRET_KEY	Django secret key for backend
DEBUG	Set True for development, False for production
DATABASE_URL	Connection string for PostgreSQL

Folder Structure

trip-planner/ ├── backend/ │ ├── trip/ # Django app │ ├── manage.py │ └── requirements.txt ├── frontend/ │ ├── src/ │ │ ├── components/ # React components │ │ ├── pages/ # React pages │ │ └── App.jsx │ └── package.json └── README.md

Contributing

• Fork the repository.

• Create a feature branch: git checkout -b feature/my-feature

• Commit your changes: git commit -m "Add my feature"

• Push to your branch: git push origin feature/my-feature

• Create a Pull Request.

License

This project is licensed under the MIT License.