🌍 This Car Rental Application, built with React and TypeScript, provides a platform for users to browse and rent cars. The application features an intuitive interface where users can view available cars, filter choices, and process rental transactions.
- 🌟 Main Component (App.tsx): The main entry point that manages routing and application state.
- 🔑 Authentication Page (AuthPage.tsx): Handles user signup and login functionalities via Firebase authentication.
- 🏠 Feed Page (FeedPage.tsx): Displays a list of available cars for users to select from.
- 🏷️ Car Detail Modal (DetailModal.tsx): Shows detailed information about a selected car, including rental options.
- 📝 Form Component (Form.tsx): Collects user inputs for various actions like rentals and bookings.
- 🔌 API Integration: Connects to external APIs to fetch and display car data.
- 🌍 Main Page Routing: The application uses React Router for seamless navigation. The main page is displayed at the root route (
/). - 📦 TypeScript Support: Ensures better type safety and code quality throughout the application.
- 🎨 Styled with Tailwind CSS: Utilizes Tailwind CSS for rapid UI development and a consistent design system.
- 🚀 Dynamic Car Catalogue: Allows users to search and filter through a dynamic list of cars based on various criteria.
- 🔍 Search Functionality: Users can search cars by make and model, leveraging URL parameters to handle queries.
- 🖼️ Image Generation: Generates unique images for cars using the external API based on specific attributes.
- 🗑️ Detail View Modal: Displays car details in a modal popup when clicked, enhancing user interaction.
- 🚧 Custom Button Components: Implements reusable button components to maintain uniformity across the application.
- ⚛️ React: Used for building dynamic user interfaces.
- 📦 React Router DOM: To handle routing and navigation within the app.
- 📦 TypeScript: Provides optional static typing, enhancing code reliability.
- 🎨 Tailwind CSS: A utility-first CSS framework for rapid UI design and custom styling.
- 🔄 Framer Motion: Used for animations and a smooth user experience.
- 🌐 Vite: A build tool for faster development and optimized production builds.
- 📡 Fetch API: Utilized to make requests to external APIs for car data.
- 🚀 React Select: For enhanced dropdown components, improving user experience in selecting options.
- 🚫 ESLint: Linting tool for maintaining code quality and adherence to coding standards.
- 📚 Type Definitions: Includes TypeScript type definitions for React and other libraries for improved type-checking.
- ⚡ PostCSS & Autoprefixer: For processing CSS and ensuring cross-browser compatibility.