Hands-on Practice I

UserProfile Card Challenge and Solution

Our Goal : User Profile App

UserProfile Card App

A step-by-step guide to implementing a React User Profile App

Step 1. Setup the React App

1. Open a terminal and create a new React app:

   npx create-react-app user-profile-app
   cd user-profile-app

2. Install the Bootstrap package:

   npm install bootstrap

3. Import Bootstrap into the index.js file:

   import 'bootstrap/dist/css/bootstrap.min.css';
   import './index.css'; // Optionally include your custom CSS

---

Step 2. Create the Parent App.jsx Component

// Layout Design for App.jsx
----------------------------------------
|                                      |<---- card container
|          User Profile App            |
|                                      |
|   -------------------------------    |<---- UserProfile container
|   |                             |    |
|   |       [ User Profile ]      |    |<----- UserProfile component
|   |                             |    |
|   -------------------------------    |
|                                      |
----------------------------------------

1. Open src/App.jsx and set it up to include the child UserProfile component.

2. Here is the updated App.jsx:

   
   import React from 'react'
   import UserCardProfile from './components/UserCardProfile'
   import './App.css'
   
   const UserCard = () => {
     const user = {
       userImage: 'src/assets/hnu-mypic.JPG', // Replace with a real image URL
       name: 'John Doe',
       email: '[email protected]',
       bio: 'Software developer with a passion for building great web applications.',
     }
   
     return (
       <>
         <h1 >User Profile App</h1>
         <div className="profile-container user-profile mt-5">
           <UserCardProfile {...user} />
         </div>
       </>
     )
   }
   
   export default UserCard
   

---

Step 3. Create the Child UserProfile.jsx Component

// Some code
------------------------------------------------------------
|                                                          |
|  ----------------------------------------------------    |<--- User Profile card container
|  | User Profile Card                                |    |
|  |--------------------------------------------------|    |<---- User Profile Layout
|  |  [ Profile Image ]    |  [ User Details Card ]   |    |      flex -row direction
|  |                       |                          |    |      Profile Image + User Details
|  |                       |  Name: [ John Doe ]      |    |
|  |                       |  Email: [email protected] |    |
|  |                       |  Bio: Software Developer |    |
|  ----------------------------------------------------    |
|                                                          |
------------------------------------------------------------

1. Create a components folder in the src directory and add a file named UserProfile.jsx.

2. Implement the UserProfile component:

   import React from 'react'
   import PropTypes from 'prop-types'
   
   const UserCardProfile = ({ userImage, name, email, bio }) => {
     console.log({userImage})
       return (
       <>
         {/* Left Item: User Image */}
         <div className="me-3">
           <img
             src={userImage}
             alt={`${name}'s profile`}
             className="img-fluid rounded-4"
             style={{ width: '250px', height: '200px', objectFit: 'cover' }}
           />
         </div>
   
         {/* Right Item: User Details */}
         <div >
           <h3 className="text-primary mb-2">{name}</h3>
           <p className="mb-1 text-muted">
             <strong>Email:</strong> {email}
           </p>
           <p className="mb-0 text-secondary">
             <strong>Bio:</strong> {bio}
           </p>
         </div>
       </>
     )
   }
   
   UserCardProfile.propTypes = {
     userImage: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
     email: PropTypes.string.isRequired,
     bio: PropTypes.string.isRequired,
   }
   
   export default UserCardProfile
   

---

Step 4. Add Custom Styles (Optional)

1. Create a src/App.css file to add custom styles :

---

// App.css
.card-container {
  display: flex;
  justify-content: center;
  /* Centers horizontally */
  align-items: center;
  /* Centers vertically */
  flex-direction: column;
  /* Optional: if you want the cards to stack vertically */
 /*  height: 100vh; */
  /* Optional: full viewport height */
  
}
.profile-container {
  max-width: 600px;
}

.user-profile {
  border: 1px solid #cc7979;
  border-radius: 15px;
  padding: 20px;
  max-width: 600px;
  margin: 20px auto;
  text-align: center;
}

Step 5. Test the Application

1. Run the app:

   npm run dev

2. Open the browser and navigate to http://localhost:5173. You should see the user profile displayed with the image on the left and name, email, and bio on the right.

---

6. Folder Structure Overview

After implementation, your folder structure should look like this:

user-profile-app/
├── src/
│   ├── components/
│   │   └── UserProfile.jsx
│   ├── index.css
│   ├── App.jsx
│   └── index.js
├── public/
├── package.json
└── node_modules/

---

This app now uses Bootstrap CSS for styling and follows the structure you described. You can customize further as needed!