mirror of
https://github.com/CarGDev/Bio-Sketch-App.git
synced 2025-09-18 13:48:31 +00:00
initial commit
This commit is contained in:
Carlos Gutierrez
189
README.md
Normal file
189
README.md
Normal file
@@ -0,0 +1,189 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user