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

Clone the repository
Install dependencies:
```
npm install
```
Start the development server:
```
npm start
```
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

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)

<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

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

Testing Instructions

Web Simulation

Click the "Web" tab in Snack or run npm run web
The app will load in your browser
Test responsive design and interactions

Android Simulation

Click the "Android" tab in Snack or run npm run android
Use the Android emulator or scan QR code with Expo Go
Test touch interactions and performance

iOS Simulation

Click the "iOS" tab in Snack or run npm run ios
Use the iOS simulator or scan QR code with Expo Go
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
Check React Native guides
Review TypeScript documentation
Consult atomic design principles for component organization

README.md

UC Biosketch React Native App

Project Overview