juliankrzysiak / roam

A website for assisting in planning day trips and road trips.

roam

A web app for planning out your roadtrips.

View Demo · Report Bug · Request Feature

About The Project

Desktop	Mobile

Built With

• 
• 
• 

How It's Made

I developed this web app because while planning roadtrips for myself, I felt that everything on the market didn't have features I wanted, and they were also too complicated / busy in their design.

With the trend of server components, I felt it was time to push the envelope and implement them into my project using Next.js.

The data for each trip, day, and place is fetched using server components from a Supabase Postgres database. This proved to be a very efficient system for storing and updating user information - auth for each user was also implemented using Supabase.

Being able to mutate via server actions, which utilize form actions for asynchronous POST requests, along with the ease in fetching data is a great improvement in the React DX and is something I will defintely stick with in the future.

I used the Google Map API to display a map for the user to pick locations, along with many other associated APIs for general functionality of the app.

And everything is designed using Tailwind, which just allows me to style everything faster with inline classes and a design system from the start.

This being my first Next.js project, I certainly struggled in the beginning, but I was able to learn so much through the several months of creating this app.

Optimizations

Replacing data fetching libraries with async functions in server components allowed me to delete unnecessary dependencies and get user data faster. It's also nice not having to expose environment variables on the client.

I replaced one of the Google Map APIs with a Mapbox API, because Google APIs are expensive and their policy against caching is quite extreme, so I wasn't able to cache as much data as I would have liked.

I had accidentally created several server actions that retreived data, which is not recommneded as they are supposed to only be fore POST requests. So I replaced them with route handlers or even refactored them all out together for a more efficient codebase.

Several times while creating my project I would reorganize the project structure so that everything was easier to follow and develop.

Learning Outcomes

The Good	The Bad	The Ugly
Server components are awesome	Cookie-based Auth was complicated at first
Learning a new framework was fun	Database design could have been better from the start
I realize the strength of relational databases
Strengthening React skills
TypeScript, TypeScript, Typescript

Getting Started

If you want to get a local copy running, here ya go.

Prerequisites

• pnpm

  npm install -g pnpm
  

Installation

1. Clone the repo

   git clone https://github.com/juliankrzysiak/roam.git
   

2. Install NPM packages

   pnpm install 
   

3. Run local development server

   pnpm dev
   

4. Switch out my info for yours

   You need create a .env.local file that includes

• NEXT_PUBLIC_GOOGLE_MAPS_API_KEY

• NEXT_PUBLIC_MAPBOX_API_KEY

• NEXT_PUBLIC_MAP_ID

• NEXT_PUBLIC_SUPABASE_URL

• NEXT_PUBLIC_SUPABASE_ANON_KEY

• GOOGLE_MAPS_API_KEY

• SUPABASE_URL

• SUPABASE_ANON_KEY

• SUPABASE_SERVICE_KEY

• DATABASE_URL

  So you need to make your own google maps API keys, your own database, and a mapbox key for calculating the distances between places.

5. Change git remote url to avoid accidental pushes to base project

   git remote set-url origin juliankrzysiak/roam
   git remote -v # confirm the changes

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Julian Krzysiak - [email protected]

Acknowledgments

(back to top)

roam's Issues

Add moving car on front page

Friends thought it would be a good idea to make a car that follows your cursor.

Add order to places

The places are returned in random order, I will probably just add an array that will save the order of the places, instead of implementing complicated ordering paradigms, such as lexiograph ordering.

Restyle landing page

Actually designed before hand in figma

Add backend

In this case, I will most likely just use what is provided by Supabase, so I don't have to create another project.
This is just to test if I can add things to a list.

Create new map page

Create a new page that allows mobile to largely plan out a route independently of a list.

Also part of a redesign.

Fix optimistic update with calendar

Create readme

Create Map page

Learning Google Maps API

Fix error messages in prod

Create wireframe for MVP

Fix password being too long on login

Add dates to each day

Show the date of the day, perhaps even add a calendar, although I could add that to another page honestly.

Add planner

• The current day that shows what places have been added so far.
• Updates when place added
• Shows various information regarding the trip
  • Mileage
  • Duration
  • Cost
• Click on location to get more info
• Show information between each location
• Drag to reorder

Add Auth and DB using Supabase

This way I can eliminate the need for needing to create API routes.

Add ability to change name of place

Add select multiple places

This is so that I can select any number of places and move the place or delete at once so that it is a simpler operation.

Add sharing link

Create a shareable link so anyone who has the link can view, but not edit the information.

Create markers for days with places

Add visual indicator on calendar if that day has any places

Add backend

Create Connect with database to store locations

Change name editing

Create landing page

Fix time issues

Add place to position in list

Be able to insert a new place in any place in the list.

Add toggle button for search

Change max columns for trips

Add ability to add places to list

Add custom map marker

• Show more info about location when clicked
• Click on button to add to the day

Add ability to add new days and trips

This can also include the ability to delete the days/trips.

Fix dropdown not closing

Shadcn component does not close after making an input with the date picker.

Add reordering of places

Drag and drop would be cool

Redesign app

Calculate time between places

The time between each place should be provided when updating the itinerary. This information should be cached somewhere, but I'll probably put that in a separate issue.

Add editable place and travel duration

Make it possible for the user to change these. It should automatically update everything.

Integrate planner with map

Clicking on a place on the planner pans to the location. May need to implement a big context here.

Add auth and DB

Use supabase to implement the auth and associated data that will be stored needing the uid.