This is the repository for the WebCars project, a web application developed in React through Matheus Fraga's React with TypeScript course, designed to find new and used cars throughout Brazil. In this project, you can list cars for sale, search for cars by name, view details of a specific car, and contact the seller via WhatsApp.
- React: The JavaScript library for building the user interface.
- Firebase: For real-time data storage and authentication.
- React Router: For managing application routes.
- React Hook Form: For efficient form handling.
- Swiper: For creating an interactive image gallery.
- Zod: For form validation.
- Tailwind CSS: A utility-first CSS framework for styling the application.
- Toast: For displaying notification messages.
The project is organized into various pages and components. Here's a brief description of each file:
- Home page that displays the list of cars.
- Cars are loaded from Firebase Firestore.
- Cars can be searched by name.
- Each car displays its image, name, year, mileage, city, and price.
- Login page to authenticate users.
- Uses Firebase Authentication for email and password login.
- Redirects to the dashboard page after successful login.
- Registration page to create new user accounts.
- Uses Firebase Authentication to create a new account with email and password.
- Redirects to the dashboard page after successful registration.
- Dashboard page for authenticated users.
- Displays the list of cars added by the authenticated user.
- Allows the user to delete cars from the list.
- Page for adding new cars.
- Allows the user to add car details, images, and a description.
- Images are uploaded and stored in Firebase Storage.
- Car detail page.
- Displays detailed information about a specific car, including images.
- Allows the user to contact the seller via WhatsApp.
It seems like you've provided code related to a web application using React and Firebase for authentication and route management. I'll continue the README with information about how these components and services are being used in the application.
In this section, you'll find images that showcase the layout and appearance of the WebCars project. This can help you visualize how the application looks and how the components are organized. Below are some representative screenshots:
Here's the directory structure of your project:
-
components
: Contains reusable components.container
: A container component to wrap page content. It's used to ensure content is displayed within a specific layout.header
: The website header that displays the logo and login/logout buttons.input
: A form input component that can display errors. It's used to collect user information such as name and password.layout
: Layout component that wraps the header and page content. This is used to maintain consistent layout throughout the application.panelHeader
: The header of the panel page, which has links to the dashboard and a logout button.
-
context
: Contains the authentication context.AuthContext
: A context that provides authentication information such as whether the user is authenticated, user information, etc.AuthProvider
: A context provider that wraps the app and manages the authentication state.
-
routes
: Contains components related to routes.Private
: A component that protects private routes, redirecting the user to the login page if not authenticated.
-
services
: Contains Firebase configurations and utilities.firebaseConnection
: Firebase settings, including app initialization, authentication, Firestore, and storage.
-
pages
: Contains the application pages.Home
: The site's home page.Login
: Login page.Register
: Registration page.Dashboard
: Dashboard page.New
: Page for adding a new car.CarDetail
: Car detail page.
-
assets
: Contains assets such as images. -
App
: The main application file where routes are configured and the router is rendered.
Reusable components are stored in the components
folder and include:
-
Container
: A component that wraps page content. It is used to ensure that content is displayed within a specific layout. -
Header
: The website header that displays the logo and login/logout buttons, depending on the authentication state. -
Input
: A form input component that can display errors. It is used to collect user information, such as name and password. -
Layout
: A component that wraps the header and page content. This is used to maintain a consistent layout throughout the application. -
DashboardHeader
: The header of the panel page, which contains links to different parts of the panel and a logout button.
The authentication context is managed in the context
folder and includes:
-
AuthContext
: A context that provides authentication information, such as whether the user is authenticated, user information, and loading status. -
AuthProvider
: A context provider that wraps the app and manages the authentication state. It uses Firebase to authenticate users and updates the context with authentication information.
Routing is configured in the App
file using react-router-dom
. The router is set up with various routes, including public and protected routes. The Private
component is used to protect routes that require authentication, redirecting the user to the login page if not authenticated.
Firebase configuration and initialization are done in the services/firebaseConnection
file. It initializes Firebase with the provided settings and provides instances for authentication, Firestore, and storage.
This is a summary of your application's structure and components. If you have any specific questions or need more information about any aspect of the code, please let me know!
To run the project locally, follow these steps:
- Clone the repository to your development environment.
- Make sure you have Node.js installed.
- In the project's root directory, run
npm install
to install dependencies. - Configure Firebase credentials in a
.env
file in the project's root directory. Refer to the Firebase documentation for details on how to set up credentials. - Run
npm start
to start the application. - Open your browser and access
http://localhost/5173
to view the project.
Remember that you should also set up a Firebase project and enable email and password authentication, as well as Firestore and Storage, for the application to work correctly.
Enjoy exploring and developing the WebCars project!