MyClasses React Native App

A modern React Native educational app built with Expo, featuring a clean architecture, optimized performance, and beautiful UI design for online education.

What the project includes

Core workflows

Course Management: Browse and view detailed course information
User Profile: Manage user information and preferences
Contact Form: Get in touch with support using a modern contact form
About Section: Learn about the developer with a professional profile
Responsive Design: Optimized for all screen sizes and orientations

Design Features

Modern UI: Clean, professional design with shadows and gradients
Stock Images: High-quality images from reliable CDNs
Consistent Styling: Unified color system and typography
Smooth Animations: 60fps animations and transitions
Accessibility: Proper contrast ratios and touch targets

How files are organized

MyClasses-React-Native/
├── 📱 App.js                    # Main app component with navigation
├── 📦 package.json              # Dependencies and scripts
├── 📖 README.md                 # Project documentation
└── src/
    ├── 🧩 components/           # Reusable UI components
    │   └── Menu.js             # Navigation menu component
    ├── ⚙️ config/              # Configuration files
    │   ├── constants.js        # App constants and URLs
    │   ├── fonts.js           # Font configuration
    │   └── styles.js          # Centralized styles and colors
    ├── 📱 screens/             # Screen components
    │   ├── About.js           # About page
    │   ├── Contact.js         # Contact form
    │   ├── Course.js          # Course listing
    │   ├── CourseDetails.js   # Course details view
    │   └── UserData.js        # User profile management
    ├── 🔌 api/                # API and data files
    │   └── Courseapi.js       # Course data and API calls
    └── 🏠 Home.js             # Home screen

Technical Stack

Technology	Version	Purpose
React Native	0.71.14	Mobile app framework
Expo	~48.0.18	Development platform
React Navigation	^6.1.9	Navigation system
Google Fonts	Latest	Typography (Josefin Sans, Nunito, Work Sans)
Expo Checkbox	~2.3.0	Form components

Screens Overview

Screen	Description	Key Features
Home	Welcome screen	Feature highlights, navigation menu
Courses	Course listing	Card layout, pricing, subject badges
Course Details	Individual course view	Detailed info, enrollment options
Contact	Contact form	Validation, modern design
About	Developer profile	Skills, social links, bio
Profile	User management	Settings, preferences

Getting Started

Prerequisites

Node.js (v14 or higher)
npm or yarn
Expo CLI (npm install -g @expo/cli)
iOS Simulator (for iOS) or Android Studio (for Android)

Installation

Clone the repository

git clone https://github.com/Tuhin-SnapD/MyClasses-React-Native.git
cd MyClasses-React-Native

Install Dependencies
```
npm install
# or
yarn install
```
Start Development Server
```
npm start
# or
yarn start
```

Run on Device/Simulator

# Android
npm run android

# iOS
npm run ios

# Web
npm run web

Design System

Colors

Primary: #4c5dab      // Professional blue
Secondary: #809fff    // Light blue accent
Text Primary: #2c3e50 // Dark text
Text Secondary: #7f8c8d // Medium text
Text Light: #95a5a6   // Light text
White: #ffffff        // Pure white
Light Gray: #f8f9fa   // Background
Success: #27ae60      // Green
Warning: #f39c12      // Orange
Error: #e74c3c        // Red

Typography

Josefin Sans: Regular, Medium (Body text)
Nunito: SemiBold, Bold (Headers and emphasis)
Work Sans: Alternative font option

Configuration

All app configuration is centralized in src/config/:

constants.js: App constants, URLs, and social links
fonts.js: Font loading and font family constants
styles.js: Modern colors, common styles, and component configurations

Key Optimizations

1. Centralized Configuration

Single font loading hook (useAppFonts)
Centralized color and style system
All app constants in one place
Consistent navigation headers

2. Code Organization

Clean component structure in src/components/
Configuration files in src/config/
Centralized constants and data
Better separation of concerns

3. Performance Improvements

Single font loading instead of multiple
CDN-based images for faster loading
Optimized component rendering
Memory-efficient data structures

4. Modern UI/UX Design

Card-based layouts with shadows
Professional color palette
Consistent spacing and typography
Smooth animations and transitions

Contributing

We welcome contributions! Please follow these steps:

Fork the repository

Create a feature branch

git checkout -b feature/amazing-feature

Make your changes
Test thoroughly
Commit your changes
```
git commit -m 'Add amazing feature'
```

Push to the branch

git push origin feature/amazing-feature

Submit a pull request

Development Guidelines

Follow the existing code style
Add comments for complex logic
Test on both iOS and Android
Update documentation as needed

Known Issues

None currently reported
Please report issues in the GitHub repository

License

This project is developed by Tuhin Chakrabarty as a React Native learning application.

Framework: React Native with Expo
Version: 1.0.0
Last Updated: January 2025

⭐ Star this repository if you found it helpful! ⭐