Welcome to the Filo Travel Website! Become part of our mission to explore and celebrate the wonders of the Philippines. Whether you're a seasoned traveler or a curious local, there's a place for you in our community.
Filo Travel is a platform designed to help you discover the beauty of the Philippines. Our website provides detailed travel guides, stunning visuals, and a vibrant community of travelers and locals who share their experiences and tips.
- Explore top 10 travel destinations across the Philippines.
- Responsive design for a great user experience.
Before installing the Filo Travel Website, ensure you have Node.js and npm installed on your system. Follow these steps to install Node.js and npm:
-
Download Node.js:
- Visit nodejs.org and download the latest version of Node.js for your operating system.
-
Install Node.js:
- Follow the installation instructions provided by the Node.js website to install Node.js on your system.
-
Verify Installation:
- Open a terminal or command prompt.
- Run the following commands to verify that Node.js and npm are installed:
node -v npm -v
- If you see version numbers printed for both commands, Node.js and npm are successfully installed.
To set up the Filo Travel Website locally, follow these steps:
-
Clone the repository:
git clone https://github.com/Java-rice/filo-travel.git cd filo-travel -
Install dependencies:
- First, navigate to the project directory (
filo-travel). - Run the following command to install React and other necessary packages:
npm install react npm install react-dom
- If you're starting a new React project from scratch, you can use
create-react-appto scaffold the project and automatically install React. Run the following command:npx create-react-app filo-travel cd filo-travel - This will create a new React project in the
filo-traveldirectory and automatically install React and its dependencies.
- First, navigate to the project directory (
To set up the Filo Travel Website locally, follow these steps:
-
Clone the repository:
git clone https://github.com/Java-rice/filo-travel.git cd filo-travel -
Install dependencies:
- First, ensure you have Node.js and npm installed. Then, install React and other necessary packages:
npx create-react-app filo-travel cd filo-travel npm install react-player npm install react-transition-group npm install react-router-dom npm install react-slick slick-carousel npm install --save @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core
- First, ensure you have Node.js and npm installed. Then, install React and other necessary packages:
-
Import Font Awesome and Google Fonts:
- Add the following lines to the
<head>section of yourpublic/index.htmlfile:<!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
- Add the following lines to the
To start the development server, run:
npm run dev
This will start the React app, and you can view it in your browser at http://localhost:3000.
Technologies Used
HTML: For the structure of the website.
CSS: For styling and layout.
JavaScript: For functionality and interactivity.
React: For building the user interface.
React Player: For embedding and controlling video players.
React Transition Group: For animations and transitions.
React Router DOM: For routing and navigation.
React Slick & Slick Carousel: For creating responsive carousels.
Font Awesome: For scalable vector icons.
Google Fonts: For beautiful typography.
Contributing
We welcome contributions from the community. To contribute, please fork the repository and create a pull request with your changes. Ensure your code adheres to our coding standards and includes proper documentation.
Thank you for being part of the Filo Travel community! Happy travels!
Challenges
-We need to learn how to declare and use new components, which involves researching and understanding each one.
-The framework offers numerous libraries, making it challenging to select the most suitable one for our needs.
-As beginners in this framework, we sometimes overlook necessary code that isn’t typically used outside of this framework.