Open Source Ecosystems

Topics

Stacks
About
How to Use
License

About

Stacks

React
TypeScript
Tailwind
Zod
React Hook Form

Features

Create a trip
Add guests
Add activities to the trip
Add important links to the trip
Add more guests to the trip
Update trip destination and date

Getting Started

To run the Planner application locally, follow these steps.

Prerequisites

To run the application, you need to clone the backend repository as well. You can find the backend repository at the following link:

  git clone https://github.com/ssoaresleo/nlw-journey-rocketseat

Installation

Before running the application, you need to set up both the frontend and backend environments:

Frontend

Download the frontend source code.

Clone the repo

git clone https://github.com/ssoaresleo/nlw-plann-er-web

Install NPM packages
```
npm install
```
Start the development server to run the application in development mode.
```
npm run dev
```

Backend

Assuming you have already cloned the backend repository, follow these steps to set it up.

Install NPM packages
```
npm install
```
Start the backend using Docker
```
docker-compose up
```

Usage

Here are some examples of how to use the application after configuration

Creating a Trip

Step 1

To create a trip, the first step is to choose the destination, start date, and end date of the trip. This information helps in organizing and planning the itinerary effectively.

Step 2

In this step, you can enter multiple email addresses of people you want to invite to join the trip. They will receive invitations to collaborate and plan together.

Step 3

Confirm the trip details by providing the owner's name and email address for final confirmation. The owner will receive an email to confirm the creation of the trip. After confirmation, they will be redirected to a screen displaying trip details. Confirmation emails will also be sent to participants, informing them about the trip.

Note: Confirmation emails for participants will appear in the terminal of the backend.

Trip Details

Here is an example of the Trip Details screen, where users can view all the information related to a specific trip. This screen typically includes details such as destination, dates, invited guests, activities planned, and important links.

Participant Confirmation

Here is an example of the Participant Confirmation screen. When invited to join a trip, participants receive an email with a link to confirm their participation.

This section demonstrates how participants interact with the invitation confirmation process in your application.