This repository contains the frontend code for a ridesharing application. The frontend is built using React.js and communicates with the backend API to fetch and display data related to rides and user authentication.
Please note that this repository only includes the frontend code. The backend code (React) can be found in the following repository: Link to Backend Repository
Before running the frontend application, make sure you have the following prerequisites installed:
- Node.js
- npm (Node package manager)
A deployed version of the project can be accessed at the following link:
https://letscommute.netlify.app
You can use the deployed app to test the functionality of the API.
To get started with the frontend application, follow these steps:
- Clone the repository:
git clone <https://github.com/calicocode/letscommute-client> - Navigate to the frontend directory:
cd frontend - Install dependencies:
npm install - Start the development server:
This will start the React development server and the application will be accessible at
npm starthttp://localhost:3000.
The frontend code uses environment variables to configure the API URL and other settings. The configuration file is located in the root directory of the frontend codebase and is named .env. You can modify the values in this file according to your backend API URL.
Example .env file:
REACT_APP_SERVER_URL=http://localhost:5005
Make sure to update the REACT_APP_SERVER_URL with the correct backend API URL.
The frontend code includes authentication functionality using JSON Web Tokens (JWT). When a user logs in or signs up, a JWT token is obtained from the backend API and stored in the browser's local storage. This token is sent in the request headers for authenticated API calls.
The authentication logic is implemented in the AuthProviderWrapper component, which sets up the authentication context and provides authentication-related functions and state variables to other components.
To protect private routes, the IsPrivate component is used. This component checks if the user is authenticated and redirects to the login page if not.
The frontend code consists of several pages and components. Here is an overview of each:
HomePage: Displays the homepage of the application.ExplorePage: Shows a list of available rides retrieved from the backend API.RideDetailsPage: Displays detailed information about a specific ride.EditRidePage: Allows the user to edit the details of a ride.SignupPage: Provides a signup form for new users to create an account.LoginPage: Provides a login form for existing users to authenticate.AddRidePage: Allows the user to add a new ride.MyRidesPage: Shows a list of rides added by the authenticated user.AddVehiclePage: Allows the user to add a new vehicle to their profile.
In addition to these pages, there are also various components used for navigation, forms, and ride cards.
The frontend code uses Axios, a popular HTTP client, to make API requests to the backend server. The requests are sent to the API endpoints using the configured base URL (REACT_APP_SERVER_URL from the .env file) along with the appropriate route.
The API requests include authentication headers with the JWT token to authorize the user and access protected routes.
The frontend code uses CSS for styling. The CSS files are located in the src directory and are imported into the respective components. The HomePage.css file contains the styling for the homepage component.
To deploy the frontend application, you can follow the standard process for deploying React applications. The code can be built using the npm run build command, which generates a production-ready build in the build directory. You can then deploy this build to a static file hosting service or serve it using a web server.
Remember to set the correct API URL in the .env file for the production environment.
This README provides an overview of the frontend code for the ridesharing application. It explains the setup, configuration, authentication, pages, components, API requests, and deployment process. Refer to the code comments and component documentation for further details on the implementation.