Hankers Frontend is a production‑ready social networking UI built with Next.js (App Router) and TypeScript, designed using a feature‑based modular architecture. The project prioritizes scalability, maintainability, performance, and developer experience, making it suitable for large‑scale frontend teams and long‑term growth.
The codebase mirrors real‑world frontend engineering practices: isolated features, strict typing, predictable state, testability, and modern UI patterns.
- 🔐 Authentication UI — login, signup, OTP, captcha, password reset
- 🧑🎨 User Profiles — avatars, bios, cover images, profile editing
- 📰 Timeline Feed — infinite scrolling, posts, replies, likes, reposts
- 🔍 Explore & Search — trends, hashtags, interests, real‑time search
- 💬 Messaging UI — real‑time chat, group conversations, indicators
- 🔔 Notifications — live badges, unread states, Firebase integration
- ⚙️ Settings — privacy, security, notification preferences
- 📱 Responsive Design — mobile‑first, desktop‑ready, PWA‑friendly
- ♿ Accessibility — keyboard navigation, ARIA, contrast support
Hankers follows a Feature‑First Architecture, where each feature is:
- Fully self‑contained
- Independently testable
- Easy to scale and refactor
This avoids monolithic components/ or hooks/ folders and instead groups logic by business domain.
✅ This structure is ideal for large frontend codebases and multi‑developer teams.
- Framework: Next.js (App Router)
- Language: TypeScript
- UI: React, Tailwind CSS
- Server State: React Query
- Client State: Context API + feature stores
- API Layer: RESTful services (feature‑scoped)
- Unit & Integration: Vitest
- UI Testing: React Testing Library
- Mocking: MSW (Mock Service Worker)
- CI/CD: GitHub Actions
- Hosting: AWS
- Linting & Formatting: ESLint, Prettier
npm install
# or
yarn install
# or
pnpm install
# or
bun installnpm run devOpen:
http://localhost:3000
You can start editing the app from:
src/app/page.tsx
frontend/
├── public/ # Static assets
├── src/
│ ├── app/ # Next.js App Router
│ ├── assets/ # Shared static assets
│ ├── components/ # Global reusable UI components
│ ├── constants/ # Global constants
│ ├── features/ # Feature‑based modules (core of the app)
│ ├── hooks/ # Global reusable hooks
│ ├── lib/ # Providers & app configuration
│ ├── mocks/ # MSW setup & mock handlers
│ ├── services/ # Global API services
│ ├── test/ # Test utilities & setup
│ ├── types/ # Shared TypeScript types
│ └── utils/ # Helper utilities
└── config files
Each feature inside src/features/ follows a consistent internal structure:
feature-name/
├── components/
├── hooks/
├── services/
├── store/
├── constants/
├── types/
├── tests/
└── utils/
This ensures:
- Clear ownership of logic
- Easy deletion or refactor of features
- Minimal cross‑feature coupling
- Unit tests for hooks, utilities, and services
- Component tests for UI behavior
- Integration tests for feature flows
- MSW used to mock APIs consistently across tests
Testing lives inside each feature, close to the code it validates.
- Production: https://hankers.tech
- Feature‑first folder structure
- Strict TypeScript typing
- API abstraction via services
- Separation of UI, logic, and state
- Optimistic UI updates
- Accessibility‑aware components
- Test‑driven mindset
Abdelrahman Adel |
Ahmed Fathy |
Yousef Adel |
Ammar Yasser |
Mohamed Emad |
This project is for educational and portfolio purposes.
⭐ If you find this frontend architecture useful, consider starring the repository!