Travel Buddy 🧳✈️

Index 📝

• Description
• Installation
• Prerequisites
• Project Installation
• Use
• Project Structure
• Technologies
• Contribution
• Project Conventions
• Developers
• Screenshots

Description 💡

Travel Buddy is a travel planner app that provides recommendations of tourist attractions to its registered users. The goal of this development is to enable users to find uselful information about weather and tourist attractions before travelling to a certain destination. Take a look at our app here Travel Buddy

Installation 💾

Prerequisites

• Visual Studio Code, Git Bash, Vite, Node.js (14 or superior), npm (version 6 or superior), React, TailwindCSS

Project Installation

1. Fork our frontend repository

   Open the repository TravelBuddy and click the "Fork" button located in the upper right corner of the page. It creates a copy of our repository in your own Github account.

2. Clone your forked repository

   Open a Git Bash terminal and clone your forked repository. You can chose a new name for your project:

# Clone this repository 
git clone https://github.com/your-github-profile/your-project-name.git

3. In VSCode, enter the project's directory you've just cloned

  cd your-project-name

4. **Install the dependencies:

  npm i
  npm run dev

4. Go to our backend repository TravelBuddyBack and follow its README's instructions:

Use ⌨️

In order to visualize the project:

1. Run the development server:

   npm install 
   npm run dev

2. Open the local host in your browser to view the application.

Project Structure 📐

/
├── public
├── src
│   ├── components/
│   │   ├── ui
│   │         ├── 
│   │         └── 
│   ├── config
│   ├── hooks
│   ├── layout
│   ├── pages
│   ├── router
│   ├── services
│   ├── utils
│   ├── index.css
│   └── main.jsx
│   └── setupTests.js
├── components.json
├── eslint.config.js
├── index.html
├── jsconfig.json
├── package-lock.json
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.js
└── vite.config.js

• public/: Contains the project's static resources such as images, icons, and fonts.
• src/: Contains the source files of the application.
  • components/: Contains React's reusable components.
    • ui/: Contains the components imported from the shadcn library.
  • config/: Contains the urls.js file, which helps us streamline the API call.
  • layout: Folder containing the paths to the application's dynamic pages.
  • pages: Contains all the pages that make up the different views of the app.
  • router: Contains the file index.jsx with the application's routing logic.
  • services: Contains the file useApi.jsx with the API call reused in all sections of the application.

Technologies 🔬

• HTML5
• CSS3
• JavaScript
• React.js
• Vite
• TailwindCSS
• Shadcn // ui

Contribution 💻

1. Fork the repository
2. Create a new branch: git checkout -b feature-name.
3. Make your changes and commit.
4. Push your branch to your fork: git push origin feature-name.
5. Open a pull request.

Project Conventions

Use of GitFlow.

We work from and to the dev branch.

CSS styles with Tailwind CSS.

Use of shadcn library for certain components.

Naming of directories and files following the scheme below:

 components
    iamAComponent 📂
        IamAComponent.jsx

Developers 👩‍💻

**Jess Arroyo**

**Pili Muiño**

**Carla Sánchez**

**Evelyn Quevedo**

**Lorena**

Screenshots 📸