Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juliankrzysiak/roam
A website for assisting in planning day trips and road trips.
https://github.com/juliankrzysiak/roam
Last synced: about 1 month ago
JSON representation
A website for assisting in planning day trips and road trips.
- Host: GitHub
- URL: https://github.com/juliankrzysiak/roam
- Owner: juliankrzysiak
- Created: 2023-08-03T06:46:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-20T04:01:38.000Z (about 1 month ago)
- Last Synced: 2024-12-20T04:34:07.644Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://roam-gamma.vercel.app
- Size: 1.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## About The Project
Desktop | Mobile
-------------------------|-------------------------
![Desktop Screenshot][desktop-url] | ![Mobile Screenshot][mobile-url]
### Built With
* [![Next][Next.js]][Next-url]
* [![Tailwind][Tailwind]][Tailwind-url]
* [![Supabase][Supabase]][Supabase-url]
### 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
```sh
git remote set-url origin juliankrzysiak/roam
git remote -v # confirm the changes
```
## License
Distributed under the MIT License. See `LICENSE.txt` for more information.
## Contact
Julian Krzysiak - [email protected]
## Acknowledgments
[desktop-url]: https://i.imgur.com/zOaQA5Z.png
[mobile-url]: https://i.imgur.com/fxR0bZx.png
[Next.js]: https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white
[Next-url]: https://nextjs.org/
[Tailwind]: https://img.shields.io/badge/tailwind-0b1121?style=for-the-badge&logo=tailwindcss&logoColor=3abcf7
[Tailwind-url]: https://tailwindcss.com/
[Supabase]: https://img.shields.io/badge/supabase-121212?style=for-the-badge&logo=supabase&logoColor=3ecf8e
[Supabase-url]: https://supabase.com/
