🔐 Auth Flow with Next.js + TypeScript + SCSS
This project demonstrates a lightweight and scalable authentication flow built using Next.js (App Router), TypeScript, and SCSS Modules. It features a clean, responsive interface and solid architectural practices suitable for production-ready applications.
✅ Key Features
🔑 Authentication System:
- Simulated login using randomuser.me API
- Validates Iranian mobile numbers (09xxxxxxxxx) via Zod schema validation
- Persists user sessions using Context API and localStorage
🔐 Protected Routes:
- /dashboard is secured via client-side authentication logic
- Unauthenticated users are automatically redirected to /auth
🧩 Reusable Components:
- Custom <Input /> with forwardRef and dynamic error display
- Custom <Button /> component with modular SCSS styling
- Separation of concerns through clean component structure
🎨 Styling:
- Modular SCSS with BEM-style nesting
- Mobile-first responsive layout and consistent design system
🧠 Code Quality:
- Full TypeScript safety with well-defined types and interfaces
- Scalable folder structure with proper naming conventions
- React Hooks used for state and side-effect management
🛠️ Languages & Technologies Used:
- TypeScript
- Next.js (App Router)
- React
- SCSS Modules
- Zod (Schema Validation)
- React Hook Form
- Context API
- localStorage
- ESLint + Prettier (recommended for code consistency)
