Travel Trucks

The Travel Trucks Website is a multi-page application built to showcase a unique collection of travel trucks available for viewing. The website provides a clean, user-friendly interface to explore and learn about each truck. Designed with React and Redux, the project uses efficient state management to handle data and interactions within the app. Although currently optimized for desktop users, future improvements may include responsive design.

Travel Trucks Website

Technologies Used

1. React: used for creating a modular and interactive user interface.

2. Redux: manages the global application state, making it efficient to handle data flow across components.

3. Vite: speeds up the development and build process, offering Hot Module Replacement (HMR) for a seamless developer experience.

4. Vercel: The project is deployed on Vercel and can be viewed live at https://travel-trucks-website.vercel.app

5. JavaScript (ES6+): main programming language of the project, utilizing modern JavaScript features for concise and efficient code.

6. HTML5 & CSS3: provides the structure and styles for the project.

Library & Tools Used

• React: JavaScript library for building user interfaces.
• Redux & Redux Toolkit: State management for handling application state.
• React Router: Declarative routing for React apps.
• ReactDatePicker: Date picker component for React.
• React Hot Toast: Notifications and toast messages.
• React Loader Spinner: Preloader spinner component for loading states.
• React Icons: Icons for project.
• Axios: Promise-based HTTP client for making API requests.
• Formik: Form handling library for managing forms and validations.
• Yup: Schema builder for validation and error handling.
• Redux Persist: Middleware to save and rehydrate Redux state.
• clsx: Utility for conditionally joining classNames.
• Modern Normalize: CSS reset for consistent styling across browsers.
• ESLint: Linting tool to maintain code quality.
• web3forms: Sending a form by email.

Features

• Browse Available Campers: view a complete list of campers, with key information displayed for easy browsing.
• Filter by Location: narrow down camper listings based on the location where they're available.
• Filter by Equipment: select campers based on specific equipment options, making it easy to find one that fits your needs.
• Filter by Camper Type: choose between various camper types for more tailored browsing.
• Detailed Camper Profiles: view detailed pages for each camper with full descriptions, images, available equipment, and more.
• Custom 404 Page: automatically redirects users to a custom 404 page if they enter an invalid URL.
• Loading and Error States: provides feedback when data is loading or if an error occurs, improving the user experience.
• Dynamic Routing: uses React Router for smooth navigation and direct linking to individual camper profiles.
• Desktop-Optimized Design: tailored for desktop users, ensuring a smooth experience on larger screens.

Getting Started

To run the application locally, follow these steps:

1. Clone the repository: git clone https://github.com/YNazymko12/travel-trucks-website.git
2. Install dependencies: npm install
3. Run the app: npm run dev
4. Open http://localhost:5173 in your browser.