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:

   npm install
   

3. Start the development server:

   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)

<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

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
• Check React Native guides
• Review TypeScript documentation
• Consult atomic design principles for component organization