ShurutechRNBoilerplate

Ready-to-use React Native boilerplate for technical interviews at Shurutech

This boilerplate is pre-configured with TypeScript, Navigation, Redux, and everything you need to start building features immediately.

---

⚡ Quick Start

1. Install Dependencies

npm install

2. Setup iOS (Mac only)

cd ios && pod install && cd ..

3. Run the App

# For Android
npm run android

# For iOS
npm run ios

✅ If you see "Shurutech RN Boilerplate" and can navigate to Details, you're ready!

---

📋 What You Need

Before starting, make sure you have:

• ✅ Node.js 18 or higher
• ✅ Android Studio (for Android) OR Xcode (for iOS, Mac only)
• ✅ CocoaPods installed (for iOS: sudo gem install cocoapods)

Need help setting up? Follow the React Native Environment Setup

---

📦 What's Included

✅ React Native 0.80.2
✅ TypeScript (strict mode)
✅ React Navigation (Stack & Tabs ready)
✅ Redux Toolkit + Redux Persist
✅ Axios (API client)
✅ Path aliases (@components, @screens, etc.)
✅ Environment variables (.env support)
✅ ESLint + Prettier
✅ Sample screens & components

---

📁 Folder Structure

src/
├── components/          # Reusable UI components
├── screens/            # App screens (Home, Details)
├── navigation/         # Navigation setup
├── services/           # API services
├── store/              # Redux store & slices
├── types/              # TypeScript definitions
├── constants/          # Colors, configs
├── utils/              # Helper functions
├── hooks/              # Custom hooks
└── assets/             # Images, fonts

---

🚀 Quick Commands

Development

npm start               # Start Metro bundler
npm run android         # Run on Android
npm run ios            # Run on iOS

Code Quality

npm run typecheck      # TypeScript type checking
npm run lint           # Check code quality
npm run lint:fix       # Auto-fix issues
npm run format         # Format with Prettier

Cleaning

npm start -- --reset-cache    # Clear Metro cache
npm run android:clean         # Clean Android build
npm run ios:clean            # Clean iOS build

---

💡 How to Use

Path Aliases (Clean Imports)

// ✅ Use this
import HomeScreen from '@screens/Home/HomeScreen';
import { api } from '@services/api';
import { colors } from '@constants/colors';

// ❌ Instead of this
import HomeScreen from '../../../screens/Home/HomeScreen';

Change API URL: Edit .env file → API_BASE_URL=your-url

Navigation

import { useNavigation } from '@react-navigation/native';

const MyComponent = () => {
  const navigation = useNavigation();

  const goToDetails = () => {
    navigation.navigate('Details', { id: '123' });
  };

  return <Button onPress={goToDetails} title="Go" />;
};

Redux State

import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  const data = useSelector(state => state.yourSlice);
  const dispatch = useDispatch();

  dispatch(yourAction());
};

---

🎯 Adding Features

Add a New Screen

1. Create the file:

mkdir -p src/screens/Profile

2. Add to navigation types:

// src/types/navigation.ts
export type RootStackParamList = {
  Home: undefined;
  Details: { id: string };
  Profile: undefined; // Add this
};

3. Register in navigator:

// src/navigation/AppNavigator.tsx
<Stack.Screen name="Profile" component={ProfileScreen} />

Add a Redux Slice

1. Create slice:

touch src/store/slices/yourSlice.ts

2. Add to store:

// src/store/index.ts
import yourReducer from './slices/yourSlice';

const rootReducer = combineReducers({
  your: yourReducer,
});

---

🎓 Interview Tips

Before Interview

1. ✅ Verify app runs: npm run android or npm run ios
2. ✅ Check no errors: npm run typecheck && npm run lint
3. ✅ Test navigation works
4. ✅ Familiarize yourself with folder structure

During Interview

• 🤔 Think before coding - Plan your approach
• 📝 Write clean code - Use TypeScript, handle errors
• 💬 Communicate - Explain your thinking
• ❓ Ask questions - When stuck or unclear

---

🐛 Troubleshooting

"Module not found" errors

npm start -- --reset-cache

"Cannot find '@screens/...'"

# Restart TypeScript server in VS Code
Cmd+Shift+P → "TypeScript: Restart TS Server"

Android build fails

cd android && ./gradlew clean && cd ..
npm run android

iOS build fails

cd ios && rm -rf Pods Podfile.lock && pod install && cd ..
npm run ios

Still stuck?

1. Read the error message carefully
2. Google the exact error
3. Check React Native Docs
4. Ask your interviewer!

---

✅ Pre-Interview Checklist

Run this before your interview:

# 1. Update dependencies
npm install

# 2. Update iOS pods (Mac only)
cd ios && pod install && cd ..

# 3. Verify no TypeScript errors
npm run typecheck

# 4. Verify no linting errors
npm run lint

# 5. Test the app
npm run android  # or npm run ios

# 6. Test navigation
# Click "Go to Details" → Should work
# Click "Go Back" → Should work

# All ✅ ? You're ready! 🎉

---

📚 Quick Reference

Common Imports

import { View, Text, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { useSelector, useDispatch } from 'react-redux';
import { api } from '@services/api';
import { colors } from '@constants/colors';

Component Template

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { colors } from '@constants/colors';

const MyScreen: React.FC = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.background,
  },
  text: {
    color: colors.text,
  },
});

export default MyScreen;

---

📖 Documentation

• 📱 React Native
• 🧭 React Navigation
• 🗄️ Redux Toolkit
• 📘 TypeScript

---

🌐 About Shurutech

Learn more at https://shurutech.com/

---

📞 Need Help?

• Before interview: Contact your interview coordinator
• During interview: Ask your interviewer
• Technical setup: Check troubleshooting section above

---

Good luck! 🚀

This boilerplate is designed to help you focus on solving problems, not fighting configuration.