PackRat 🎒

Features 🚀

• Create and manage trips: users can create new trips and manage existing ones by adding details such as dates, locations, and activities.
• Map integration: PackRat integrates with Mapbox to provide users with accurate maps and directions to their destinations.
• Activity suggestions: the app suggests popular outdoor activities based on the location and season of the trip.
• Packing list: users can create and manage packing lists for their trips to ensure they have everything they need.
• Weather forecast: PackRat provides up-to-date weather forecasts for the trip location to help users prepare accordingly.
• User authentication: the app uses user authentication to ensure privacy and data security.

Technologies used 💻

PackRat is built using the following technologies:

• React Native: a JavaScript library for building user interfaces.
• Expo: a set of tools and services for building and deploying React Native applications.
• MongoDB: a document-oriented database program.
• Express.js: a web application framework for Node.js.
• Node.js: an open-source, cross-platform, back-end JavaScript runtime environment.
• Redux: a predictable state container for JavaScript apps.
• Mapbox: a location data platform for mobile and web applications.

🗂 Folder layout

The main folders are:

• apps

  • expo (native)
  • next (web) -- ssr not yet implemented
  • vite (web)
  • tauri (desktop) -- not yet implemented

• packages shared packages across apps

  • ui includes your custom UI kit that will be optimized by Tamagui
  • app you'll be importing most files from app/
  • features (don't use a screens folder. organize by feature.) [pending]
  • provider (all the providers that wrap the app, and some no-ops for Web.)
  • api - intended to be our services, but tRPC eliminated a lot of this need due to custom hooks. [mostly deprecated]
  • assets - images and branding
  • auth - auth provider and hook, currently set up for expo router auth. Once we have next js config done, will refactor to support next js auth somehow
  • components - built components from our primitive ui elements (root/packages/ui), and custom logic hooks (/hooks)
  • config - axios config, we have almost no axios needs with trpc. Once fully migrated away this will be removed.
  • constants - strings and arrays that don’t change
  • context - all react context stuff
  • hooks - custom hooks for logic and data fetching with trpc
  • media - media query in react native config
  • public - web only assets like favicon
  • atoms - jotai atoms for global state
  • theme - tracks dark and light mode theming logic and tamagui config
  • utils - utility functions that can be reused

UI Kit

Note we're following the design systems guide and creating our own package for components.

See packages/ui named @packrat/ui for how this works.

🆕 Add new dependencies

Pure JS dependencies

If you're installing a JavaScript-only dependency that will be used across platforms, install it in packages/app:

cd packages/app
yarn add date-fns
cd ../..
yarn

Native dependencies

If you're installing a library with any native code, you must install it in expo:

cd apps/expo
yarn add react-native-reanimated
cd ..
yarn

Update new dependencies

Pure JS dependencies

yarn upgrade-interactive

You can also install the native library inside of packages/app if you want to get autoimport for that package inside of the app folder. However, you need to be careful and install the exact same version in both packages. If the versions mismatch at all, you'll potentially get terrible bugs. This is a classic monorepo issue. I use lerna-update-wizard to help with this (you don't need to use Lerna to use that lib).

You may potentially want to have the native module transpiled for the next app. If you get error messages with Cannot use import statement outside a module, you may need to use transpilePackages in your next.config.js and add the module to the array there.

Local installation 📲

PackRat consists of two main components: a client and a server. Follow the steps below to install and run both components.

Dependencies

• Node.js
• Yarn
• Expo CLI
• React Native CLI

Environment Setup

1. Clone the repository: HTTPS:

git clone https://github.com/andrew-bierman/PackRat.git

SSH:

git clone git@github.com:andrew-bierman/PackRat.git

2. Navigate to the PackRat directory:

cd PackRat

3. Set up the environment variables for the client and server.
   • If you have access to the development env values, use those. Otherwise, replace the values with your own.
   • See the .env.example file in the root directory for the required environment variables. You can duplicate this file and rename it to .env.local to set up your environment variables.
   • Note, for the replacement steps, these replaced values should now be strings with the mapbox secret key for download token, in the following format:

     "sk..."

Automated Setup (Unix) 🛠️

1. Run the setup script from the PackRat directory.

   yarn setup

Manual Setup 📝

• Note, if automated set up works the following manual config is taken care of already.

1. Navigate to the PackRat directory if you are not already there.

2. Copy the .env.example file and rename it to .env.local.

   • Open the file and replace the values with your own or use the development env values.
   • Note, there is a postinstall script that will copy the .env.local file to the client directories, adding the necessary environment variables with prefixes.

cp .env.example .env.local

3. Navigate to the server directory.

cd server

4. Duplicate the .wrangler.toml.example file and rename it to wrangler.toml. Open the file and replace the values with your own.
   • If you have access to the development wrangler file, skip this step. Otherwise, replace the values with your own.

cp .wrangler.toml.example wrangler.toml

5. Navigate back to the PackRat directory.

cd ..

Yarn Setup

Recommended to open two terminal windows.

Root

1. From the mainPackRat directory.

yarn install

Server

1. Navigate to the server directory.

cd server

2. Start the server.

yarn start

Client

• Note, we have a few options for running the client.
  • For native we support both iOS and Android. You can run the app on either platform. Additionally, we support MacOS, Linux, and Windows for the desktop app with Tauri.
  • For web, we are using Next.js for server-side rendering. (This is not yet implemented.) We also have a Vite build that provides a faster development experience.

1. Navigate to the expo directory.

cd apps/expo

• Here you will be able to run the app on an iOS or Android simulator (or on your own device). See the Expo documentation for more information on how to set up your development environment.
• If it is your first time running the app, you may need to build the app using the following command.

yarn run ios

yarn run android

2. Navigate to the next directory.

cd apps/next

3. Navigate to the vite directory.

cd apps/vite

4. Start the Expo/Next/Vite server.

yarn start

Note that the client and server are designed to run concurrently in development mode.

Debugging 🐛

Debugging Yarn Environment Setup - Windows

Check yarn and node version:

yarn -v

node -v

If node version < 18.0.0:

• Update to latest: https://nodejs.org/en/download

If yarn version >= 4.0.0:

• Skip this process

If you don't have yarn installed:

• Run command prompt as an administrator
• Run (corepack comes along with node js 18+)

  corepack enable

• Run

  yarn set version stable

• Run

  yarn install

• Check yarn version(yarn -v): version >= 4.0.2
• Restart your code editor if opened

If yarn version < 4.0.0:

• Make sure you're using Node 18+
• Go to your windows root path (C:\Users\HP)
• Delete any .yarnrc.yml file and .yarn folder
• Delete yarn folder from C:\Program Files (x86)
• Run command prompt as an administrator
• Run (corepack comes along with node js 18+)

  corepack enable

• Go into the project directory cd \PackRat
• Run

  yarn set version stable

• Run

  yarn install

• Restart your code editor if opened
• If you any encounter errors, try restarting your system.

Debugging Client Environment Setup 🐛

Expo

• If you encounter any issues with the Expo client, try running the following commands:

• npx expo-doctor

• npx expo install --fix

• npx expo prebuild --clean

• 
  npx expo run:ios --no-build-cache

• npx expo start --clear

Debugging Dependencies

• If you encounter issues with dependencies, try running the following commands from root directory:

• yarn regen

• yarn clean

Additionally, if the error is occurring in nextjs that you check the transpilePackages in next.config.js and check if the problematic package is there.

Debugging Cloudflare Wrangler and D1

• Some helpful tips for debugging Cloudflare Wrangler and D1:
• If you encounter issues with Wrangler or D1, make sure you can see the sqlite database in the .wrangler directory.
• You can open the database with a sqlite browser to see if the data is being stored correctly.

Docker Installation 🐳 [Experimental]

PackRat can also be installed using Docker. After setting up the development environment, follow the steps below to install and run the app using Docker.

Dependencies

• Docker
• Docker Compose

Installation

1. Run the following command to start the app

docker-compose build
docker-compose up

2. Navigate to http://localhost:8081/ to view the app. The server will be running on http://localhost:3000/.
3. If you encounter errors with edits to files not automatically applying, try running the following commands:

docker-compose down
docker-compose build
docker-compose up

3. To stop the app, run the following command:

docker-compose down

4. If you encounter issues with docker-compose, you can build the images manually by running the following commands from the root folder:

docker build -t packrat-client client/Dockerfile
docker build -t packrat-server server/Dockerfile

5. To run the images, run the following commands:

docker run -p 8081:8081 packrat-client
docker run -p 3000:3000 packrat-server

How backend API's are setup

Please refer to README.md inside server folder.

Contributing 🤝

[!TIP] We have an active community of contributors and users who are happy to help. Join us on Discord to get involved!

Contributions to PackRat are welcome! To contribute, follow these steps:

1. Clone this repository.
2. Create a new branch.
3. Make your changes and commit them.
4. Push your changes to the remote branch.
5. Open a pull request.
6. Wait for your pull request to be reviewed and merged.
7. Celebrate! 🎉

User Stories:

👏 Special Thanks

• React Native Developers
• OpenStreetMap Developers
• RN MapBox Developers
• Cloudflare Developers
• Yusuke Wada - Creator of Hono.js
• Nate Birdman - Creator of Tamagui
• Fernando Rojo - Creator of Zeego
• Tanner Linsley - Creator of TanStack
• Expo Developers - Office hours
• Shopify Developers

License 📝

PackRat is licensed under the terms of the GNU General Public License v3.0. See LICENSE for more information.