🚀 Hack The Haze – React Native Starter Template

Welcome to the official starter repository for Hack The Haze – Theme 1
📱 Cross-Platform Mobile App using React Native

Hosted by brainfogdev

---

🧩 Problem Statement

Build a mobile application that fetches and displays user data from a remote API with a clean, responsive, and user-friendly interface.

🔗 API Endpoint

[https://my-json-server.typicode.com/easygautam/data/users](https://my-json-server.typicode.com/easygautam/data/users)

---

✅ Requirements

• Fetch user data from the provided API.
• Display the list using FlatList.
• Each user card must show:
  • 🖼 Profile Image (lazy-loaded or placeholder)
  • 👤 Name
  • 🎓 Qualification
  • 📚 Subjects
• Responsive UI for both Android and iOS.
• Use React Navigation (minimum one additional screen).
• Handle edge cases:
  • Loading state
  • Error state
  • Empty/no data state
• Follow best practices:
  • Modular component structure
  • Reusable styles via StyleSheet
  • No hardcoded values

---

🧰 Tech Stack

• ⚛️ React Native (with Expo)
• 📡 Axios / Fetch API
• 🧭 React Navigation
• 🧱 Component-based architecture

---

📁 Folder Structure

src/
├── components/      # Reusable UI components
├── screens/         # App screens (e.g., HomeScreen, DetailScreen)
├── navigation/      # Navigation setup
├── utils/           # API logic
└── constants/       # Colors, spacing, fonts
App.js               # Entry point

---

🏁 Getting Started

1. 📦 Install dependencies

npm install

2. 🚀 Start the development server

npx expo start

Use Expo Go on your mobile device or emulator to test.

---

📝 Submission Guidelines

Ready to show off your work? Follow these steps to make your submission shine:

1️⃣ Fork This Repo

Click the Fork button on the top-right of this page to create your own copy. Then clone it locally and start building!

---

2️⃣ Build Your Solution

Use this starter as a base. Create a fully working app with a clean, responsive design and solid code structure.

---

3️⃣ Include the Following Files

📄 README.md

• Overview of your app
• Setup instructions
• Tech stack
• 📸 Screenshots or screen recordings (optional but recommended!)

🧠 THOUGHTS.md

• Your thought process
• Challenges faced
• Design & tech decisions
• Unfinished ideas you'd implement with more time

---

4️⃣ (Optional) Publish with Expo

Want to stand out? Publish your app online for live preview:

npx expo publish

Paste the public Expo link into your README.md.

---

5️⃣ Submit on Unstop

Head over to the Unstop Hackathon Portal and submit:

• 🔗 Your GitHub repository URL
• 🔗 Your Expo live app link (if deployed)

---

💡 Pro Tips for Winning

• Keep your UI clean and intuitive
• Handle all edge cases gracefully
• Use modular, reusable code
• Think like a product designer AND a developer
• Add polish like transitions, empty state placeholders, or even dark mode

---

🤝 Support

Need help? Contact the organizing team or create an Issue in this repo.

---

🏆 Build Bold. Build Smart. Build to Win.

Hackathons aren't just about code — they're about ideas, execution, and presentation. Make your project count, and hack the haze! 🔥💻✨