goodsandguides

Overview

What problem are you trying to solve? Traveling can be an exhilarating yet overwhelming experience, especially when it comes to choosing the right travel guides and products. Our solution aims to streamline this process, offering a centralized location where travelers can find guides and goods that best fit their travel needs. Whether it's finding a knowledgeable local guide or the perfect travel gear, our platform helps make these choices easy and stress-free.

Who would use it?

This service targets travelers, adventurers, and anyone in need of guide or goods recommendations for their trips. Tour operators and travel gear providers could also be interested as potential partners for listing their services or products.

What is your prototype?

The prototype is a React-based web component called GuidesComponent. This component offers a rich interface where users can:

• Browse through a selection of guides and goods.
• Filter guides and goods based on their preferences (e.g., by country).
• View detailed information about each guide, including their services, ratings, and social media links.
• Access a dialog box with additional details about each guide.

How does your prototype work?

Filtering Options:

• By Category: Users can filter options between "Guides," "Goods," and "Goods and Guides" by clicking buttons on the right corner of the UI.
• By Country: Users can also filter by the country of origin or preference.

Data Presentation:

• Each guide/good displayed offers an image, name, star rating, services, role, and social media links.
• A detailed dialog box appears when users click on an image, offering more information about the guide.

Additional Features:

• Ratings are displayed using the MUI Rating component.

How did you implement your prototype?

Technologies:

• React: The frontend is implemented using React.
• MUI (Material-UI): Used for the Rating component.
• CSS: Styling is done using Tailwind CSS for utility-first CSS styling.

State Management:

• useState and useEffect hooks for managing state and side effects.

Data:

• The data for people (guides and goods) is imported from an external data file.

Functionality:

• filterPeople function filters the list of people based on selected options.
• handleSelectOptionGG and handleSelectOptionCountry handle the selection of filter options.

Styling:

• Styling is mainly done using Tailwind CSS classes with additional custom CSS where needed.

Dev Notes

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

cd goodandguides-frontend
npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Built With

• next.js
• react
• tailwindcss