Bio-Sketch-App/README.md

# UC Biosketch React Native App

## Project Overview
This React Native application displays a professional biosketch for University of the Cumberlands students. The app features a modern, responsive design with UC branding colors and follows atomic design principles with TypeScript for enhanced type safety.

## Features
- Professional profile picture display
- Welcome message with course information
- Detailed biosketch section with modular components
- Responsive design for Web, Android, and iOS
- UC branding with red color scheme (#e60026)
- TypeScript implementation for better development experience
- Atomic design architecture for maintainable code

## Technical Stack
- **React Native** with Expo SDK 49
- **TypeScript** for type safety and better development experience
- **Atomic Design** principles with organized component structure
- **CSS Modules** for scoped styling
- **Expo Snack** for live editing and simulation

## Project Structure
```
reactNativeProfile/
├── App.js                 # Main application entry point
├── app.json              # Expo configuration
├── package.json          # Dependencies and scripts
├── tsconfig.json         # TypeScript configuration
├── babel.config.js       # Babel configuration
├── .gitignore           # Git ignore rules
├── components/
│   ├── BioSketch.tsx     # Main biosketch component
│   ├── molecules/
│   │   └── Image.tsx     # Reusable image component
│   └── organisms/
│       ├── Content.tsx   # Content section component
│       ├── Footer.tsx    # Footer component
│       └── Title.tsx     # Title component
├── styles/
│   └── bioSketch.module.ts # CSS modules for styling
├── utils/
│   └── constants.ts      # Application constants
└── assets/
    └── profile-picture.jpg # Professional profile photo
```

## Atomic Design Architecture

### Molecules
- **Image.tsx**: Reusable image component with proper styling and accessibility

### Organisms
- **Title.tsx**: Welcome message and course information display
- **Content.tsx**: Main biosketch content section
- **Footer.tsx**: Footer component with additional information

### Templates
- **BioSketch.tsx**: Main template that composes all organisms and molecules

## Setup Instructions

### Prerequisites
- Node.js (v16 or higher)
- Expo CLI (`npm install -g @expo/cli`)
- Expo Go app for mobile testing

### Local Development
1. Clone the repository
2. Install dependencies:
   ```bash
   npm install
   ```
3. Start the development server:
   ```bash
   npm start
   ```
4. Use Expo Go app to scan the QR code or run on web/emulator

### Expo Snack Setup

#### 1. Launch Snack Player
- Go to https://snack.expo.dev/
- Create a new project or open existing one

#### 2. Add Your Profile Picture
- Drag and drop your professional picture into the Snack editor
- The image will be automatically placed in the assets folder
- Update the import path in `components/BioSketch.tsx` if needed

#### 3. Customize Your Biosketch
- Edit the bio text in `components/BioSketch.tsx`
- Update course information in `components/organisms/Title.tsx`
- Modify styling in `styles/bioSketch.module.ts`
- Update constants in `utils/constants.ts`

#### 4. Save and Share
- Save the project to your Expo profile as "Hands-On Assignment 2 _Lastname"
- Add description: "My BioSketch @ UC"
- Copy the shareable project link

## Key Code Features

### Welcome Message (Title Component)
```typescript
<Text style={styles.welcomeText}>
  WELCOME TO THE UNIVERSITY of the CUMBERLANDS{'\n'}
  Course ID: MSCS 533
</Text>
```

### BioSketch Section (Content Component)
The app includes a comprehensive biosketch with:
- Professional introduction
- Academic focus areas
- Personal interests and goals
- Current course information

### Styling (CSS Modules)
- UC red background (#e60026)
- White text for contrast
- Semi-transparent sections for visual hierarchy
- Responsive design for all screen sizes
- Modular CSS for better maintainability

### Constants Management
```typescript
// utils/constants.ts
export const UC_COLORS = {
  primary: '#e60026',
  white: '#ffffff',
  // ... other color constants
};
```

## Testing Instructions

### Web Simulation
1. Click the "Web" tab in Snack or run `npm run web`
2. The app will load in your browser
3. Test responsive design and interactions

### Android Simulation
1. Click the "Android" tab in Snack or run `npm run android`
2. Use the Android emulator or scan QR code with Expo Go
3. Test touch interactions and performance

### iOS Simulation
1. Click the "iOS" tab in Snack or run `npm run ios`
2. Use the iOS simulator or scan QR code with Expo Go
3. Test iOS-specific features and gestures

## Development Scripts
- `npm start`: Start Expo development server
- `npm run android`: Start Android development build
- `npm run ios`: Start iOS development build
- `npm run web`: Start web development build

## Deliverables Checklist
- [ ] Profile picture added to assets
- [ ] Welcome message updated with course ID
- [ ] Biosketch content personalized
- [ ] Code comment added: "The code below will display my BioSketch @ UC, and it's amazing!!!!!"
- [ ] Background color set to #e60026
- [ ] Project saved to Expo profile
- [ ] Shareable link copied
- [ ] Screenshots taken for Web, Android, and iOS
- [ ] Project zip file downloaded

## Code Quality Features
- **TypeScript**: Full type safety throughout the application
- **Atomic Design**: Organized component hierarchy for maintainability
- **CSS Modules**: Scoped styling to prevent conflicts
- **Constants**: Centralized configuration management
- **Modular Architecture**: Reusable components following best practices

## Notes
- The app uses TypeScript for better development experience and type safety
- Follows atomic design principles for maintainable and scalable code
- Responsive design works across all platforms (Web, Android, iOS)
- UC branding colors are consistently applied throughout
- CSS Modules provide scoped styling to prevent style conflicts
- Constants are centralized for easy maintenance and updates

## Support
For technical issues or questions about the implementation:
- Refer to the [Expo documentation](https://docs.expo.dev/)
- Check [React Native guides](https://reactnative.dev/docs/getting-started)
- Review [TypeScript documentation](https://www.typescriptlang.org/docs/)
- Consult atomic design principles for component organization