Crewmates

Inspiration

Crewmates is inspired by the spirit of roadtripping and the excitement of adventure. There's something special about hitting the road with friends, and we wanted to amplify that experience by giving users the ability to plan their journeys collaboratively. Whether it's picking scenic routes, planning pitstops, or simply traveling together, Crewmates turns roadtripping into a shared, dynamic experience.

What it does

Crewmates is a web app that allows users to collaboratively plan road trips. It enables users to create routes, add stops, and see live cursor movements from the rest of the crew in real-time. The app enhances group travel by reinforcing cooperation and communication during the planning phase and throughout the trip. Each member can contribute their own ideas, ensuring a personalized journey for the entire crew.

How we built it

We built Crewmates using a combination of frontend and backend technologies. For the frontend, we used React, TypeScript, and Tailwind. This allowed us to organize the website into manageable sections. TypeScript improved the developer experience, helping to reduce errors. Tailwind made it easy to style components. The backend was implemented using Express.js for the API, Prisma as our ORM, PostgreSQL as our database, and Socket.io for live communcation allowing for live collaboration. The backend handles the logic for real-time collaboration and storing user inputs, while Mapbox’s API was integrated to provide interactive and accurate map routing for users.

Challenges we ran into

Given the time constraints, one of the main challenges was balancing the scope of the project. We had to prioritize core functionalities that would define the app, such as route creation, live collaboration, and a smooth user interface. This meant some features we envisioned, like trip expense tracking and chat integration, weren't as prioritized. Additionally, integrating live cursors from multiple users into the map in real-time was more complex than initially anticipated, but with persistence, we were able to make it work.

Accomplishments that we're proud of

We're proud of building a web app that allows users to connect, collaborate, and craft their trip together. Also, we're proud of working as team and helping each other out. The fact that people can work together to create a personalized road trip with live updates and interactive features is something we’re especially excited about. We think real-time cursor feature is significant as it brings the map to life and enables interaction between users.

What we learned

We learned how to interact with Mapbox's API, enabling us to create dynamic and interactive maps with live cursors. Additionally, we’ve developed our collaboration skills, learning how to communicate better and divide tasks more effectively.

What's next for Crewmates

We plan to continue developing Crewmates by adding key features to make the platform more comprehensive for our users. Here are the next steps in our roadmap:

Tracking Expenses: We will implement an expense tracking feature that allows users to easily record and categorize costs associated with their travels. This could include transportation, food, accommodation, and other trip-related expenses. We are also considering adding an option for users to set budgets for each category.

Providing Route Details: In addition to showing users their current route, we aim to add detailed route information that includes rest stops, points of interest along the way, and even weather forecasts. This feature will not only make navigation easier but also more insightful and enjoyable.

Chat Box Feature: We plan to implement a real-time chat box that enables users to communicate with their travel group while on the go. This feature will support the ability to share locations, updates, and relevant details about their journey. We’re also exploring integrations that would allow users to communicate in a way that’s optimized for traveling, such as voice messages.

Built With

• express.js
• postgresql
• prisma
• react
• socket.io
• tailwind
• typescript