This project demonstrates the implementation of a Profile Card component in a React TypeScript application. The component displays a user's name, profile picture, and bio.
There are two versions of the app, each with a different implementation of the Profile Card component.
In the master
branch, the Profile Card component is a regular React component that includes the Profile Name, Profile Picture, and Profile Bio components directly inside it. The parent App
component imports the ProfileCard
component and uses it without passing any children to it.
In the with-compound
branch, the Profile Card component follows the compound components design pattern. This pattern allows the component to accept children components, providing greater flexibility in terms of composition. In this version, the App
component imports the Profile
component, which in turn imports the ProfileCard
, ProfileName
, ProfilePicture
, and ProfileBio
components. These components are then used as children of the ProfileCard
component.
To switch between the two versions, you can check out the corresponding branch in your Git repository.
Experience the Profile Card Component in action by visiting the live demo:
Profile Card Component Live Demo
To run the app locally, follow these steps:
- Clone the repository and navigate to the project folder.
- Run
npm install
to install the required dependencies. - Run
npm run dev
to start the development server. - Open your browser and visit http://localhost:5173 to view the app.
For any questions, concerns, or support, feel free to reach me out via email: [email protected].