Collage_assgn_React-Native

KO | EN

gitlite — search

#hacktoberfest #typescript #llm #golang #machine-learning #rust #deep-learning #nodejs #windows #vue #security #mcp #openai #open-source

Collage_assgn_React-Native

(★ 107)

Food Delivery App

Collage_assgn_React-Native 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# FoodOrder - Full-Stack Food Ordering App

A complete Zomato-like food ordering application built with React + Vite for web and React Native for mobile, demonstrating modern React concepts and best practices.
<img width="1918" height="1021" alt="Home Page output" src="https://github.com/user-attachments/assets/72db096a-e66e-447a-938d-cdcfc46f8b62" />

## 📁 Project Structure

```
otamoz/
├── web/              # React + Vite web application
├── mobile/           # React Native mobile application
└── api/              # Mock JSON server API
```
<img width="1919" height="1032" alt="add to card Page" src="https://github.com/user-attachments/assets/685d2c48-acb3-4efa-b6b3-b1c5c0ca01b1" />

## 🚀 Features

### Web Application (React + Vite)
- ✅ **Login Page** - Form validation, controlled inputs, error handling
- ✅ **Home Page** - Food item listing with search and filters
- ✅ **Item Details** - Product details with add-to-cart functionality
- ✅ **Cart Page** - Shopping cart with quantity management
- ✅ **Order Tracking** - Real-time order status updates
- ✅ **Profile Page** - User information and preferences

### Mobile Application (React Native)
- ✅ **Login Screen** - Native mobile login experience
- ✅ **Home Screen** - Food item browsing
- ✅ **Cart Screen** - Shopping cart management
- ✅ **Profile Screen** - User profile and settings
- <img width="1919" height="1028" alt="Profile page" src="https://github.com/user-attachments/assets/2ab042d7-a950-4c77-814c-6f65bddce5c9" />

## 🛠️ Tech Stack

### Web
- React 18.2.0
- Vite 5.0.8
- React Router DOM 6.20.0
- React Hooks (useState, useEffect, useMemo, useCallback)

### Mobile
- React Native 0.72.6
- Expo ~49.0.0
- React Navigation 6.x
- AsyncStorage for persistence

### API
- JSON Server for mock API
- CORS enabled
<img width="1919" height="1021" alt="Server" src="https://github.com/user-attachments/assets/d9453085-d290-4559-b595-698a4f1838a2" />

## 📦 Installation & Setup

### Prerequisites
- Node.js (v16 or higher)
- npm or yarn
- For mobile: Expo CLI (`npm install -g expo-cli`)

### 1. Install Web Dependencies

```bash
cd web
npm install
```

### 2. Install API Dependencies

```bash
cd api
npm install
```

### 3. Install Mobile Dependencies

```bash
cd mobile
npm install
```

## 🎯 Running the Application

### Start the Mock API Server

```bash
cd api
npm start
```

The API server will run on `http://localhost:3001`

### Start the Web Application

```bash
cd web
npm run dev
```

The web app will be available at `http://localhost:3000`

### Start the Mobile Application

```bash
cd mobile
npm start
```

Then:
- Press `i` for iOS simulator
- Press `a` for Android emulator
- Scan QR code with Expo Go app on your phone

## 🎨 Key React Concepts Demonstrated

### 1. **Component Architecture**
- Reusable components (ItemCard, InfoCard, etc.)
- Separation of concerns
- Props passing and composition

### 2. **State Management**
- Context API for global state (Auth, Cart)
- Local state with useState
- Derived state with useMemo

### 3. **Side Effects**
- useEffect for data fetching
- Cleanup functions for intervals/timeouts
- Dependency arrays for optimization

### 4. **Performance Optimization**
- Lazy loading with React.lazy()
- Code splitting with dynamic imports
- useMemo for expensive calculations
- useCallback for function memoization
- Suspense for loading states

### 5. **Routing**
- React Router for web navigation
- React Navigation for mobile
- Protected routes
- Lazy-loaded routes

### 6. **Form Handling**
- Controlled components
- Form validation
- Error state management
- Event handling (onChange, onSubmit)

### 7. **Conditional Rendering**
- Dynamic UI based on state
- Error messages
- Loading states
- Empty states

## 📱 Mobile App Features

- Bottom tab navigation
- Native mobile UI components
- AsyncStorage for data persistence
- Shared business logic with web app

## 🔧 Advanced Features

### Lazy Loading
Pages are lazy-loaded using `React.lazy()` and `Suspense`:
- Login
- Home
- ItemDetails
- Cart
- OrderTracking
- Profile

### State Batching
React 18 automatically batches state updates for better performance.

### Side Effect Cleanup
Order tracking page properly cleans up intervals when unmounting.

### Performance Optimizations
- Memoized calculations (total, itemCount)
- Memoized callbacks (addToCart, updateQuantity)
- Filtered items memoization
<img width="1919" height="1032" alt="add to card Page" src="https://github.com/user-attachments/assets/cb063b3a-86f3-4f32-a4af-9161ab976bd2" />

## 📝 API Endpoints

The mock API provides:

- `GET /api/items` - Get all food items
- `GET /api/items/:id` - Get single item details

## 🎓 Learning Points

1. **When to use lazy loading**: Top-level routes that are code-split
2. **When NOT to lazy load**: Small components, frequently used components
3. **State management**: Context API for global state, useState for local
4. **Performance**: useMemo for expensive calculations, useCallback for functions passed as props
5. **Cleanup**: Always cleanup side effects in useEffect return function

## 🚧 Future Enhancements

- Real backend API integration
- Payment gateway integration
- Push notifications
- Real-time order tracking
- Restaurant selection
- User reviews and ratings
- Order history

## 📄 License

This project is for educational purposes.

## 👨‍💻 Development Notes

- All components are well-commented
- Code follows React best practices
- Responsive design for web
- Native mobile UI patterns
- Clean folder structure
- Reusable component architecture

---

**Happy Coding! 🍔🍕🍟**

Chanu

Collage_assgn_React-Native

Collage_assgn_React-Native 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Collage_assgn_React-Native

Collage_assgn_React-Native 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README