TRAVEL-LOG APP (TRIP TRACKER)

A Travel Web-App for uploading, managing, and sharing trip documents and media using Next.js and REST APIs

DESCRIPTION

This product is intended to be a user-friendly application that allows users to access and manage all documents and media associated with their individual trips. They should be able to view and manage their data all in one location with minimal need to navigate between pages. Each individual trip will display maps, itinerary, journal entries, and media based on date and location.

PRODUCT FEATURES

PRIO 1

- Login/ Registration page for authentication and authorization
- A page with a list of users’ trips
- An individual trip ‘dashboard’ allowing users to view that trips’ maps, itinerary, journal entries, and media
- A restricted admin page allowing the trip creator to upload media and documents
- A maps page that will display a map with locations pinned based on the date and location of users’ media and documents

PRIO 2

- Role system allowing users to share their private trips with others

PRIO 3

- Allow users to comment on and like other users’ trips

TECHNOLOGIES USED

- REST API
- Next.js
- Node.js
- TypeScript

SERVICES USED

- Cloudinary (media upload)
- Leaflet (map integration)

DESIGNS

- Wire Frame - https://www.figma.com/file/vcxDDb0EsUKCSnjOQERhng/Final-Project-2?type=design&node-id=1%3A338&mode=design&t=xmssnOhmhYaGYld1-1

- Database Design –

https://drawsql.app/teams/doug-andrews-team/diagrams/trip-tracker

API DESIGN

/
 - GET => endpoints[]

/user
 - GET =>       user[]
 - POST =>      user   | error

/user/:id
 - PUT =>       user   | error
 - DELETE =>    user   | error
 - GET =>       user   | error

//////////////////////////////

/register
 - POST => user | error

/login
 - POST => user | error

//////////////////////////////

/trips
 - GET =>       trips[]
 - POST =>      trips   | error

/trips/:id
 - PUT =>       trip    | error
 - DELETE =>    trip    | error
 - GET =>       trip    | error

//////////////////////////////

/trips/:tripId/journals
 - GET =>       journals[]
 - POST =>      journals   | error

/trips/:tripId/journals/:id
 - PUT =>       journal    | error
 - DELETE =>    journal    | error
 - GET =>       journal    | error

 //////////////////////////////

/trips/:tripId/journals/:journalId/maps
 - GET =>       maps[]
 - POST =>      maps   | error

/trips/:tripId/journals/:journalId/maps:id
 - PUT =>       map    | error
 - DELETE =>    map    | error
 - GET =>       map    | error

 //////////////////////////////

/trips/:tripId/journals/:journalId/media-files
 - GET =>       media-file    | error
 - POST =>      media-files   | error

/trips/:tripId/journals/:journalId/media-files:id
 - PUT =>       media-file    | error
 - DELETE =>    media-file    | error
 - GET =>       media-file    | error

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.