andrew-bierman / packrat Goto Github PK

PackRat is a versatile adventure planner tailored for outdoor enthusiasts. It simplifies the process of organizing trips from a simple day hike to cross-country journeys.

Home Page: https://packrat.world/

License: Other

JavaScript 4.11% Java 0.74% Objective-C 0.03% Objective-C++ 0.22% Swift 0.01% Dockerfile 0.10% TypeScript 94.52% Shell 0.07% C 0.01% Rust 0.03% HTML 0.03% CSS 0.16%

adventure hiking maps nodejs organization outdoors planning react-native skiing social

packrat's Introduction

PackRat 🎒

PackRat is the ultimate adventure planner designed for those who love to explore the great outdoors. Our app helps users plan and organize their trips with ease, whether it's a weekend camping trip, a day hike, or a cross-country road trip.

With PackRat, you can create and manage trips, discover new destinations, and stay informed with up-to-date weather forecasts. Our app integrates with Mapbox to provide you with accurate maps and directions to your destinations, as well as suggestions for popular outdoor activities based on the location and season of your trip.

So pack your bags, grab your friends, and get ready for your next adventure with PackRat!

Note

This project is currently in alpha. Please report any issues or bugs you encounter. Thank you for your patience and support!

Important

This project is still in development and may contain bugs or issues. Please use the app with caution and report any problems you encounter. Thank you for your understanding and cooperation.

Build & CI:

Repository Info:

PackRat 🎒

Overview 🌐

With PackRat, you can:

Create and manage trips.
Discover new destinations.
Stay informed with up-to-date weather forecasts.
Access accurate maps and directions with our integration to Mapbox.
Get suggestions for popular outdoor activities based on your trip's location and season.

So pack your bags, grab your friends, and get ready for your next adventure with PackRat!

Documentation 📚

Warning

While the app is in alpha, please be aware that there may be bugs or issues. We appreciate your patience and support as we work to improve the app. Data may be lost or corrupted during this time, so please use the app with caution. Thank you for your understanding and cooperation.

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

Environment Setup

Clone the repository: HTTPS:

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

SSH:

git clone [email protected]:andrew-bierman/PackRat.git

Navigate to the PackRat directory:

cd PackRat

Set up the environment variables for the client and server.
- If you have access to the development env files, use those. Otherwise, replace the values with your own.
- See the .env.example files in the apps/expo and server directories for the necessary environment variables.

Automated Setup (Unix) 🛠️

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.

Navigate to the PackRat directory if you are not already there.
Navigate to the apps/expo directory.

cd apps/expo

Note that for the client to run, you need to also make the following changes:
- Copy the app.example.json file and rename it to app.json. Open the file and replace the MAPBOX_DOWNLOADS_TOKEN_FROM_ENV value with your own Mapbox API key.
- Navigate to the ios directory. Copy the Podfile.example file and rename it to Podfile. Open the file and replace the MAPBOX_DOWNLOADS_TOKEN_FROM_ENV value with your own Mapbox access token.
- Navigate to the android directory. Copy the gradle.properties.example file and rename it to gradle.properties. Open the file and replace the MAPBOX_DOWNLOADS_TOKEN_FROM_ENV value with your own Mapbox downloads token.
- See the Mapbox documentation for more information on how to obtain Mapbox API keys and access tokens.

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

cp .env.example .env

Duplicate the app.example.json file and rename it to app.json. Open the file and replace the MAPBOX_DOWNLOADS_TOKEN_FROM_ENV value with your own Mapbox API key.

cp app.example.json app.json

Navigate to the ios directory.

cd ios

Duplicate the Podfile.example file and rename it to Podfile. Open the file and replace the MAPBOX_DOWNLOADS_TOKEN_FROM_ENV value with your own Mapbox access token.

cp Podfile.example Podfile

Navigate to the android directory.

cd ../android

Duplicate the gradle.properties.example file and rename it to gradle.properties. Open the file and replace the MAPBOX_DOWNLOADS_TOKEN_FROM_ENV value with your own Mapbox downloads token.

cp gradle.properties.example gradle.properties

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..."

Navigate back to the PackRat directory.

cd ../..

Navigate to one of the client directories such as next, expo, vite.

cd apps/next

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

cp .env.example .env

Navigate back to the PackRat directory.

cd ..

Navigate to the server directory.

cd server

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

Navigate back to the PackRat directory.

cd ..

Yarn Setup

Recommended to open two terminal windows.

Root

From the mainPackRat directory.

yarn install

Server

Navigate to the server directory.

cd server

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.

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

Navigate to the next directory.

cd apps/next

Navigate to the vite directory.

cd apps/vite

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

Installation

Run the following command to start the app

docker-compose build
docker-compose up

Navigate to http://localhost:8081/ to view the app. The server will be running on http://localhost:3000/.
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

To stop the app, run the following command:

docker-compose down

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

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:

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

User Stories:

User Stories 📖 (Click to expand)

User Features:

Registration and Authentication:

Users can create an account by accessing the menu and selecting the 'Register' option. Additionally, they have the option to sign up directly from the login page.

Main Dashboard:

On the main page, users have several options to choose from:
Quick actions
Search for new trails
Access other menu options
View their feed, which displays previously created packs.
Users can search for a destination directly on the main dashboard, which will then redirect them to the maps interface.

Destination Search:

Users have the capability to search for a destination directly on the main dashboard.
Upon initiating a search, users are redirected to the maps interface for further exploration and planning.

Accessing Profile Information:

Users can conveniently access their profile information from the menu under the Profile feature.

Profile User Overview:

The dashboard provides users with a comprehensive overview of their profile.
It prominently displays the user's username and account photo for quick identification.

Favorite Trips and Packs:

Users have immediate access to their favorite trips and packs directly from the dashboard.
By selecting the "View details" option, users can delve into more details about their favorite trips and packs.

Profile Management:

Users can effortlessly manage their profile information from the dashboard.
By clicking on the settings button icon, users are directed to the profile settings section where they can make necessary updates seamlessly.

Appearance Theme Customization:

Users have the option to personalize their experience by changing the theme.
They can choose between light mode or dark mode based on their preference.
Additionally, users have the option to purchase additional themes for further customization. (Note: This feature may require updates.)

Profile Editing:

Users can easily edit their profile settings by clicking the "show dialog" option.
This allows them to update their name and “food preferences”, with a wide range of options to choose from. (Note: This feature may require updates.)

Pack Features:

Pack Creation and Access Settings:

Users are prompted to input a name for their pack when creating it.
Users have the option to choose the accessibility setting for their pack, deciding whether it will be public or private.

Adding Items to Packs:

When users add an item to the pack, they are required to provide:
The name of the item.
The weight of the item.
The quantity of the item.
The category the item belongs to (food, water, essentials).
After providing the necessary details, users click "Add Item" to include it in the pack dashboard.

Pack Scoring System:

Users can view their pack score, which is generated based on several criteria:
The total weight of the pack.
The presence of essential items.
The degree of redundancy in items.
The versatility of the items included.

Navigating to the Dashboard:

Users can easily return to the dashboard by following these steps:

Access the menu.
Select the "Home" option.

Trip Features:

Trip Creation and Management:

Users have two methods for creating a trip:
Directly from the main page dashboard using the quick actions feature.
By navigating to the 'Trips' option in the menu.

Setting up a Trip:

Users initiate trip setup by selecting their backpacking destination.
Nearby trails and parks are displayed for exploration.
Users can:
Choose gear from their saved packs.
Create a new pack and add items directly on the page.
Select the target date for their trip using a calendar to specify the duration.
A map showcasing the trip destination is provided for reference.
Once all details are confirmed, users:
Save their trip.
Input a name and description.
Choose the trip's accessibility setting (public or private).
A weather forecast and summary of the destination, trails, dates, and trip duration are displayed for easy reference.

Accessing Saved Trips:

Users can easily access their saved trips from the menu by selecting the 'Trips' option.
Within the 'Trips' section, users can:
Organize their trips by sorting them from favorites to most recent.
Utilize a search bar to quickly locate a specific trip by name.

Viewing Trip Details:

When users select a trip from the dashboard, they are presented with detailed information including:
The trip's description.
Destination.
Start and end dates.
Additionally, users can:
Conveniently view the weather forecast for the selected dates directly on the same page.
Access the maps interface for further exploration.
At the bottom of the page, users can find the Trip Score, providing an overall assessment of the trip's suitability and preparedness.

Items Feature:

Dashboard:

Users are able to view their items used in their saved packs.
They can sort how many items will show up on screen. They can choose from 10, 20, and 50.
Users have the option to add new items.

Adding Items:

User needs to fill out the following fields:
Item Name
Weight – they can choose the unit of measurement. Includes lb, kg, oz, and g.
Quantity
Category

Feed Feature:

Exploring Backpackers:

Users can browse through a list of other backpackers.
Navigate the page using the search and sort options.

Pack List Interaction:

Upon opening a pack list, users have several options available:
They can view the profile of the backpacker associated with the pack.
Users also have the ability to copy the pack list for their own use.
The pack list includes detailed information such as item name, weight, quantity, and category.

Item Management:

Users can interact with items on the pack list by:
Editing, deleting, or ignoring items as needed.
The total weight of the pack is dynamically calculated and displayed at the bottom of the page.
Users can easily add new items to the pack list as well.
At the bottom of the page, users can view the Pack Score.

Returning to Feed Dashboard:

Users can navigate back to the feed dashboard by accessing the menu and selecting the "feed" option.

👏 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.

packrat's People

Contributors

Stargazers

Watchers

packrat's Issues

search page

Add Field Descriptions to 'Register Account' Option & Resolve New Account Signup Issue

Describe the bug
When setting up an account, users are required to fill out specific fields with their information. However, the fields lack clear guidance on what information is needed for each field. And The signup option fails to register an account.

To Reproduce
Steps to reproduce the behavior:

Visit URL - https://packrat.world/
Click on the the upper right menu
Select Register
Fill out fields with the correct information
Name
Email address
Username
Password
Click “Sign up”

Expected behavior
Clear field descriptions should be visible during the registration process and successful registration prompt with email verification request.

Screenshots

Additional context
Browser:

Windows 11
Microsoft Edge
Version: 122.0.2365.92

Smartphone

Device: iPhone15
OS: iOs17.4
Browser: safari
Version: 17.4

StatusBar Customization: Customize the status bar style and visibility to match the look and feel. `expo-status-bar` package.

test the app for crud operations

Feeds screen crash on android (expo app)

Describe the bug
When I move to feed screen, app crashes

To Reproduce
Steps to reproduce the behavior:

move to expo directory and run with tunnel "npx expo start --tunnel"
Go to 'Feed' screen by clicking on its item in the bottom menu
You'll see, that app crashes

Expected behavior
It shouldn't happen

Screenshots

@rnmapbox/maps native code not available. Make sure you have linked the library and rebuild your app

Describe the bug
@rnmapbox/maps native code not available. Make sure you have linked the library and rebuild your app is showing on landing page (might break application later)

To Reproduce
Steps to reproduce the behavior:

Go to 'Landing Page' / Just after first page of application
See error

Expected behavior
Uncaught Error should not appear as it can break application later

Screenshots

Smartphone (please complete the following information):

Device: iPhone 15 Pro Max
OS: iOS 17.0

Additional context
@rnmapbox/maps native code not available. Make sure you have linked the library and rebuild your app

Phase 1: Initial Migration to Drizzle ORM

Haptic Feedback Implement haptic feedback for certain actions. Use `expo-haptics`.

Bug - RNMapbox Integration Broken

Describe the bug
Our rnmapbox integration is completely broken on native iOS and Android. This was working in the past, but I believe a recent change may have broken it. We should go back through the set up process based on the library docs and see if we did something wrong.

To Reproduce
Steps to reproduce the behavior:

Go to andrew_testing branch, and run the simulator on iOS or Android. Navigate to the create a trip page.
iOS - map component is either empty or the entire page does not load.

Android - on my end, builds fail with this error:

"FAILURE: Build failed with an exception.

* What went wrong:
Could not determine the dependencies of task ':rnmapbox_maps:compileDebugAidl'.
> Could not resolve all task dependencies for configuration ':rnmapbox_maps:debugCompileClasspath'.
   > Could not resolve com.mapbox.maps:android:10.13.0.
     Required by:
         project :rnmapbox_maps
      > Could not resolve com.mapbox.maps:android:10.13.0.
         > Could not get resource 'https://api.mapbox.com/downloads/v2/releases/maven/com/mapbox/maps/android/10.13.0/android-10.13.0.pom'.
            > Could not GET 'https://api.mapbox.com/downloads/v2/releases/maven/com/mapbox/maps/android/10.13.0/android-10.13.0.pom'. Received status code 401 from server: Unauthorized
   > Could not resolve com.mapbox.mapboxsdk:mapbox-sdk-turf:6.11.0.
     Required by:
         project :rnmapbox_maps
      > Could not resolve com.mapbox.mapboxsdk:mapbox-sdk-turf:6.11.0.
         > Could not get resource 'https://api.mapbox.com/downloads/v2/releases/maven/com/mapbox/mapboxsdk/mapbox-sdk-turf/6.11.0/mapbox-sdk-turf-6.11.0.pom'.
            > Could not GET 'https://api.mapbox.com/downloads/v2/releases/maven/com/mapbox/mapboxsdk/mapbox-sdk-turf/6.11.0/mapbox-sdk-turf-6.11.0.pom'. Received status code 401 from server: Unauthorized"

Expected behavior
We should see our map preview from the maps/NativeMap.native.js file.

Screenshots

Desktop (please complete the following information):
N/A

Smartphone (please complete the following information):

Device: iPhone 14
OS: iOS 16.2

Loading state is updating even when one pack is made public using togler in profile page

Whenever a pack is made public. a network call is sent to backend. for it to be processed. we need a loading state to show, but the problem is that there is only one loading state that is representing all of the packs, so if one of the pack is made public. the loading state pops up on each pack.

To Reproduce
Steps to reproduce the behavior:

Go to profile page from top menu
Click on the toggler on any pack
You will see loading state on each pack

Expected behavior
Only a single loading text should be displayed and only on that pack which is made public

Screenshots

Desktop (please complete the following information):

OS: Ubuntu 20.22 lts
Browser Chrome
Version latest

Testing Discord Notification

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Breaking Change

example:
tripController.js - GET request should not have body as validations of celebrate do not work on it.

https://www.npmjs.com/package/celebrate mentions :-
Additional Info
According the the HTTP spec, GET requests should not include a body in the request payload. For that reason, celebrate does not validate the body on GET requests.

Implement floating navbar like tamagui site utilizes - https://github.com/tamagui/tamagui/blob/dc0ae147c157fa1f41fd8c7f29ff9fa7a75108c8/apps/site/components/Header.tsx

Frontend - Separate Business Logic from UI

Our frontend code has grown to be quite messy. Let's fix this.

Some of this will be fixed with the tamagui PR, which implements a ui package to handle our primitives.

The next step is to refactor our components and screens folders to remove all business logic, and place that logic within custom hooks.

Here is a great example of how to do this: https://x.com/_georgemoller/status/1739644203867464091?s=46&t=BIQs8xeH5ZAzltdKl3PARg

Also https://stackoverflow.com/questions/69332889/reactjs-separation-of-ui-and-business-logic

https://javascript.plainenglish.io/use-custom-hook-to-separate-logic-ui-in-react-efbe3b4b423a

Next Steps

Phases:

Moving current component logic to custom hooks
Improving current component logic, removing unnecessary redux logic in favor of standard use state or jotai - I'm thinking for things like search, weather, createTrip etc. not everything needs to move out of redux immediately.

State Management Improvements

Known Areas That Need Improvement (WIP)

Search - does not need to be global, can handle with useState in custom hook i think
Weather - does not need to be global, can handle with useState in custom hook i think
Create Trip - does not need to be global, can handle with useState OR Jotai in custom hook i think

Components

Click to expand the checklist

Note, all of these should be in folders. The files in root of components should be moved to their own folders while we do this. All primitive ui elements should be coming from our packages/ui folder.

Screens

Click to expand the checklist

Note, all of these should be in folders. The files in root of components should be moved to their own folders while we do this. All primitive ui elements should be coming from our packages/ui folder.

Please keep track of components in progress below, so that we do not overlap work.

Implement Context Menus for Feed Cards: Utilize context menus to offer additional options or actions on long press. Zeego also provides support for this.

Alerts that Reflect Standards: Ensure the use of the Alert component aligns with expected standards, with appropriate titles, messages, and button configurations. See tamagui Alert with native set to true.

Cannot update a component (`ToastProvider`) while rendering a different component (`Login`).

Describe the bug
ToastProvider state cannot be updated during rendering.

Expected behavior
Error log in native devices, if any error occurs during signin

Screenshots

Smartphone (please complete the following information):

Device: Pixel 7 Pro
OS: Android 13
Version: API 33

use proper icons as styles of text and icons are overlapping in the packs -> single pack

Segmented Control for Toggling Views: Integrate segmented controls for switching between different views or filtering content. A custom implementation or third-party library may be required as Expo lacks a specific library.

trip

Create Trip Component seems to have a problem.

The attached Error shows up when clicking create trip from inside trip page:

Packrat UI - Enhance Reusable Components - Utilize Tamagui

My vision is we will have a ui folder with all our styled components, that can be easily reused throughout our app. this will make it much easier if we ever need to ditch tamagui, as our app will be relying on our 'own' components.

These should be highly reusable.

We can pull a lot of tamagui components into our packrat-ui folder, and just add basic wrappers.

Also https://tamagui-extras.vercel.app/

Our UI is really not that complex, i do not see a reason why all our screens are not utilizing basic layout and card components for most of their UI.

Progress being made here: #487

When complete:

We should have a packrat-ui folder that has subdirectories with all the components needed to create our screens, using tamagui. These will mostly be wrapper components, but will enable our app to be much easier to update going forward.
The components will enhance our design consistency, as we can now make styling updates to these reusables and cascade changes

We can make a checklist of components here to keep track (please add to this)

Additional info:
This ticket is primarily to convert our reusable components (card, dropdown, modal etc) to tamagui, and add in some additional ones for things like page layouts and such. The goal of this ticket is to be able to have our own component wrappers we can use across all our screens, so that we do not need to duplicate as much code and our project will be easier to update in the future.

I'm less worried about changing ALL components to tamagui at this moment, but we should probably swap a few of the screens to use the new reusable components to demonstrate it is working properly.

Trip details screen (viewing a single trip)

          - [ ] Trip details screen (viewing a single trip)

Originally posted by @andrew-bierman in #685 (comment)

Fix Broken UI throughout Native App: Ensure all UI components render correctly and are fully functional across different devices and screen sizes.

let's keep track of who is doing what to minimize overlap

user does not have a reference to what he is editing

add labels so user may know about the fields e.g. quantity, name

Logout button is crashing native application

Describe the bug
Native iOS application is crashing when clicked on Logout Button

To Reproduce
Steps to reproduce the behavior:

Go to 'Home'
Click on 'Side Menu'
Click on Logout Button
See error

Expected behavior

Logout button is crashing application on native side

Screenshots

Smartphone (please complete the following information):

Device: iPhone 15 Pro Max
OS: iOS 17

virtual lists + refresh on scroll. also infinite queries would be nice here

Safe Area Handling with react-native-safe-area-context: Properly handle safe areas, especially on newer models with notches and home indicators. This is crucial for UI elements' visibility.

Exploring Alternatives for ORM, Moving Backend to the Edge for Improved Performance and Scalability

We have been working on transitioning our backend infrastructure to the edge via Cloudflare Workers. The initial migration from a Node.js environment with MongoDB and Mongoose to Hono + Prisma with MongoDB was aimed at leveraging the benefits of serverless architecture. For the most part, this was a success. However, after thorough testing and evaluation, it has become evident that Prisma's performance is suboptimal for handling queries on the edge. Additionally, as our project data has evolved to be more relational, MongoDB's limitations have become more apparent.

Issue:

The primary concern is the significant performance bottleneck we are experiencing with Prisma, especially for complex queries. This not only affects the efficiency of our backend operations but also could potentially impact the user experience.

Proposed Solution:

To address these challenges, I am considering migrating our backend to use Drizzle and D1. Drizzle, as a lightweight ORM, and D1, as a SQLite database, could provide the necessary performance improvements and better support for relational data models.

Action Items:

Research and Evaluation: We need to thoroughly research Drizzle and D1, assessing their compatibility with our current stack, performance benefits, and how they handle relational data compared to MongoDB.

Team Feedback: I encourage the team to provide feedback on this proposed migration, especially concerning potential challenges and experiences with Drizzle and D1.

References and Resources:

Link to the Prisma branch: #483
https://medium.com/drizzle-stories/how-i-migrated-from-prisma-to-drizzleorm-with-absolutely-no-hassle-and-zero-downtime-9f5f0881fc04
drizzle-team/drizzle-orm#1434
https://github.com/subhendupsingh/prisma-to-drizzle-schema
Example api that uses Hono, Drizzle + Drizzle Kit, and D1: https://github.com/timothymiller/t4-app
For find many queries https://orm.drizzle.team/docs/rqb/

Seeking Input:

I would appreciate any insights or experiences the team has with Drizzle and D1, especially regarding large-scale, relational data handling in a serverless environment.

#574
Phase 2: Testing and ensuring all trpc routes are working

Issue: Unable to Add Items to Pack

Describe the bug
Adding items to a pack does not function properly. Items fail to save after a brief loading period.

To Reproduce
Steps to reproduce the behavior:

Visit the URL: https://packrat.world
same issue here: https://packrat-dev-qj5h.onrender.com
Log in to your account with the following credentials:
Email: [email protected]
Password: 12345678
Navigate to the main page.
Click on the "Create a pack" option, under quick actions.
Provide a name and set public visibility to No.
Select “Add Item”.
Enter the following:
Item Name: Chips
Weight: 0.1
Quantity: 2
Category: Food
Click on “Add Item”

Expected behavior
Added items should be saved within the pack.

Screenshots

Desktop (please complete the following information):

Windows 11
Microsoft Edge
Version: 122.0.2365.92

Smartphone (please complete the following information):

Device: iPhone15
OS: iOs17.4
Browser: safari
Version: 17.4

Add trpc integration to single trip

packDetails broken

fix broken Pack Details

relates to : #685

Add trpc Integration to globalItems

trpc React Query integration (migrating server state out of redux)

Initially, we used redux toolkit to manage all our async calls and state. But, we can make our code much more efficient by using the trpc query (which is just a wrapper around react query) to handle this.

All our thunks already use trpc. We need to move these to custom trpc query hooks, to take advantage of the react query wrapper.

This works easily for all our basic fetching requests. But the cache is where we can do some cool stuff. If we utilize the useContext and optimistic updates, we can eliminate the need for MOST of our global store state.

See progress being made here https://github.com/andrew-bierman/PackRat/tree/feat/experimenting-with-trpc-query

#392

And build upon this.

Keep track of slices in progress with the task list on that PR!

The goal is to have a lot less in our redux store, as we can sync server state directly with proper trpc query usage.

Phases

#513
#514
Add optimistic updates to query cache

DISREGARD - leaving for context
I want all requests to go through redux. But We have some API requests that do not need to be stored in our global store, I think RTK Query could help us to implement these while still following redux best practices.

I'm not sure if things like our photon searches, weather, and a few others need to be kept in global store? It might make more sense to use RTK Query for these types of requests. Or create queries for them, but then use the query in different slices (ie trip, destination, etc).

It looks like we can also utilize RTK Query in our thunks, providing the best of both worlds with easy to use hooks for async tasks, and a traditional global store.

Google Sign-In not working: Access Blocked

Describe the bug
When trying to sign in with Google, I receive an error: 'Access blocked: This app’s request is invalid"
When looking at the Google error more in-depth, it says this:

"Error 400: redirect_uri_mismatch

You can't sign in to this app because it doesn't comply with Google's OAuth 2.0 policy.

If you're the app developer, register the redirect URI in the Google Cloud Console.
Request details: redirect_uri=https://packrat.world"

To Reproduce
Steps to reproduce the behavior:

Go to homepage
Click on 'Sign in with Google'
See error

Expected behavior
Expected to be able to sign in with my Google Account

Screenshots

Desktop (please complete the following information):

OS: Any
Browser Any
Version Any

Smartphone (please complete the following information):

Device: Any
OS: Any
Browser Any
Version Any

Large Titles with react-navigation: Incorporate large titles in stack navigators, especially for top-level views.

Next Js Integration for web ✨

Objective: 💡
This PR introduces a robust integration of Next.js with Expo to streamline the development of our web application, ensuring a seamless and efficient development experience across various platforms and devices.

Benefits: 🎉
Unified Codebase: Streamline development by using a single codebase for both web and mobile platforms.
Performance & SEO: Leverage Next.js for improved performance and SEO capabilities.
Rapid Development: Utilize Tailwind CSS and Tamagui for fast and responsive design iterations.
Cross-Platform Consistency: Ensure a consistent look and feel across all platforms with React Native and Tamagui.
TODO: 🌱
Move folders from packrat to this pr
@andrew-bierman's comment
We need to replicate the config to support next.js like the solito/tamagui starters to allow for code sharing with react native and next web.

Essentially, we need to split our client directory into app and an expo folders, and then create a next folder to merge together the configs from the starters below. The packages/app will have mostly everything. apps/expo and apps/next will have just routing and native configs. Native Dependencies need to be installed in both packages/app and apps/next or apps/expo.

Then we can copy over the next folder and reconfigure it with minimal work.

Here is how I believe we need to restructure our code:

/client
app, ios, android, all native configs --> /apps/expo

/client
...everything else --> /packages/app

/apps/next
all the necessary config from t4, tamagui, solito, native base starters.

We just need to get the config done, and render a basic screen like landing_page from /app and then we will be good.

Routing can easily be migrated over just by copying it from packages/app, and updating to next syntax and imports.

My goal is to restructure our frontend files so that we can take advantage of next.js rendering benefits on web, while enabling a high level of code re-use with this monorepo set up.

good references

T4 Stack - https://github.com/timothymiller/t4-app
Tamagui starter - https://github.com/tamagui/tamagui/tree/master/starters/next-expo-solito
Solito starter - https://github.com/nandorojo/solito/tree/master/example-monorepos/with-expo-router/apps/next
native base starter - https://docs.nativebase.io/next-adapter

Phases

Split /client folder into the structure above. I think we should do this in its own PR to start just to minimize breaking changes for others working on the project. I have been trying to stay on top of recent pull requests to minimize rebasing. If it's helpful for you, I'm happy to drop a message in the discord and execute this initial restructuring PR tomorrow night.
Initial set up of next js to display some component from packages/app
Implement proper file based routing in next js, replacing expo-router with solito. At this point, web should be fully functional.
Explore benefits of next js, server side props where applicable, enhance trpc config. Take advantage of having a better web environment to work in, landing page that @raghavyuva is working on is perfect example of how we can take advantage of better styling options on web to make it more impressive.

Pull to Refresh with RefreshControl: Adopt the pull-to-refresh pattern for lists or scrollable areas.

weather integration completion with trpc query

Deep Linking with Universal Links: Enable deep linking to support direct navigation from web links to specific app screens. Expo supports Universal Links through its Linking API.

Roadmap to a Native Feel on Mobile Devices

Our app started off with a strong focus on web development, which has been great for rapid prototyping and cross-platform compatibility. However, we've noticed that in the shift to native platforms, especially iOS, our app still carries a bit of that web feel. We want our users on mobile devices to enjoy an experience that feels proper on their device.

To make this happen, we're planning to dial up our focus on native features and components that really bring out the best in our app on these platforms. Here's a casual rundown of what we're looking to tackle next. This isn't just about fixing what's broken; it's about elevating the entire user experience to match the expectations of our iOS and Android users, while keeping the cross-platform magic alive with React Native and Expo.

This involves adopting specific components and practices that improve navigation, interactivity, and overall app usability. Here's our roadmap for the next phase of development, aiming to address UI inconsistencies, enhance user interaction, and integrate platform-specific functionalities leveraging both React Native capabilities and Expo modules where applicable.

The list below is just for brainstorming, we should split this into subtasks as we begin work.

This lineup is all about making our app not just function well, but feel right at home on iOS and Android.

convert the javascript files to typescript

Convert all the js files to ts , .tsx respectively
add the corresponding types respectively

Properly invalidate queries on success

pack table needs to be fixed (lets decrease number columns with zeego DropdownPopover)

Move TRPC thunks into custom hooks

Bug - On trips page, "Uncaught ReferenceError: _wrapNativeSuper is not defined"

The WebMap component is causing this bug.

We use mapbox-gl for webmap and rnmapbox for native. Seems to possibly be an issue with how babel is compiling our mapbox. I added some ignore statements to our babel config, but that did not resolve it. Throws error on dev environment, but totally crashes app on deployment.

Fix form validations

Describe the bug
Implement/Fix form validations using react-hook-form

Next.js Feature Implementation Tracking

Track and manage the implementation of key features for Next.js app.

Feature List

Cloudflare nextjs support - https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/
SSR - need to come up with a solution for redux issue. Current version is all client side rendered, just routed via next js. Need to resolve. With trpc query, we really have minimal need for global state management. Could move a lot of the logic out of here and into our custom hooks.
Implement new web specific features - raghavyuva's landing page (need to pull page onto clean branch to fix conflicts). Better responsive, floating navbar.
#764
tRPC Pre-Fetching data - Need to implement solution that allows for pre-fetch on next, but still support client fetch on native https://trpc.io/docs/client/nextjs/server-side-helpers

andrew-bierman / packrat Goto Github PK

packrat's Introduction

PackRat 🎒

Table of Contents

Overview 🌐

Documentation 📚

Features 🚀

Technologies used 💻

🗂 Folder layout

UI Kit

🆕 Add new dependencies

Pure JS dependencies

Native dependencies

Update new dependencies

Pure JS dependencies

Local installation 📲

Dependencies

Environment Setup

Automated Setup (Unix) 🛠️

Manual Setup 📝

Yarn Setup

Root

Server

Client

Debugging 🐛

Debugging Yarn Environment Setup - Windows

Debugging Client Environment Setup 🐛

Expo

Debugging Dependencies

Debugging Cloudflare Wrangler and D1

Docker Installation 🐳 [Experimental]

Dependencies

Installation

How backend API's are setup

Contributing 🤝

User Stories:

User Features:

Registration and Authentication:

Main Dashboard:

Destination Search:

Accessing Profile Information:

Profile User Overview:

Favorite Trips and Packs:

Profile Management:

Appearance Theme Customization:

Profile Editing:

Pack Features:

Pack Creation and Access Settings:

Adding Items to Packs:

Pack Scoring System:

Navigating to the Dashboard:

Trip Features:

Trip Creation and Management:

Setting up a Trip:

Accessing Saved Trips:

Viewing Trip Details:

Items Feature:

Dashboard:

Adding Items:

Feed Feature:

Exploring Backpackers:

Pack List Interaction:

Item Management:

Returning to Feed Dashboard:

👏 Special Thanks

License 📝

packrat's People

Contributors

Stargazers

Watchers

Forkers

packrat's Issues

Next Steps

State Management Improvements

Components

Screens

Issue:

Proposed Solution:

Action Items:

References and Resources: