This is a React-based web application that demonstrates the use of routing, authentication, and protected routes. The project includes several pages, a sidebar menu, and a login system that restricts access to certain pages.
- Home Page: A welcome page for users after login.
- About Page: Information about the application or the organization.
- Services Page: Details about the services offered.
- Contact Page: A page to get in touch with the organization.
- Login Page: A page to authenticate users and gain access to protected routes.
- Landing Page: A public page shown before login.
- React: JavaScript library for building user interfaces.
- React Router DOM: Routing library for React.
- Material-UI: UI component library for React.
- TypeScript: Type-safe language for JavaScript.
-
Clone the repository:
git clone <repository-url> -
Navigate to the project directory:
cd <project-directory> -
Install dependencies:
npm install -
Run the application:
npm run dev
src/components/: Contains reusable components likeDrawerMenu.pages/: Includes page components such asHome,About,Services,Contact,Login, andLandingPage.contexts/: Manages user authentication state and provides context for login throughAuthContext.logic/: Contains business logic and route protection mechanisms likePrivateRoute.App.tsx: The main application component that handles routing.index.tsx: The entry point of the application.App.css: Application-wide styles.
- Auth Context: Manages user authentication state and provides login and logout functionality.
- Private Routes: Protects routes to ensure that only authenticated users can access them.
-
Login: Navigate to the
/loginpage and use the credentials:- Email:
[email protected] - Password:
password
- Email:
-
Access Protected Pages: After logging in, you can access the following pages:
/home/about/services/contact
-
Logout: Click the "Logout" button to return to the landing page.
Feel free to fork the repository and submit pull requests with improvements or bug fixes.