DevAura
A free, ad-free developer education platform for the Arabic-speaking tech community, offering structured learning tracks, a curated resource library, and interactive quizzes, built full-stack with Next.js and Laravel.
Tech Stack :
1 / 3
Project Overview
DevAura is a free, ad-free developer education platform built for the Arabic-speaking tech community, where fragmented and often paywalled learning resources make it hard to find a clear path. It brings structured learning tracks, a curated resource library, an AI tools directory, and interactive quizzes together in one place.
I built DevAura as a full-stack graduation project (a Next.js frontend paired with a Laravel REST API), covering everything from the user experience and authentication to the admin dashboard and deployment.
Key Features
- Structured learning tracks: guided paths through curated topics
- Curated resource library: vetted learning materials in one place
- AI tools directory: a catalog of useful AI tools
- Interactive quizzes: randomized question order, per-question explanations, a countdown timer, progress tracking, a review screen, and localStorage persistence
- Full authentication: email/password with 6-digit email verification, JWT with automatic refresh, Google OAuth, and password reset
- Favorites: save resources for quick access
- Admin dashboard: content management with an analytics summary
- Polished UI: mobile-first responsive layout, dark/light themes, and Framer Motion + Lottie animations
Technical Highlights
- Dual-guard JWT authentication: separate api and website guards isolate admin and website users without session collisions
- Role-based access control: Spatie Laravel Permission with a JSON-first permission middleware (CheckPermissionApi)
- OTP email verification: 6-digit codes with a 15-minute TTL, delivered via Laravel Mail and Notifications
- Google OAuth: social sign-in through Laravel Socialite, isolated from password accounts
- Session-based view deduplication: views tracked per session id to avoid inflated counts
- Toggle likes: a composite unique index guarantees one like per user per item
- Portfolio mode: the backend can be disabled to run the frontend on mock data
- Hardened API: bcrypt hashing, rate limiting, token invalidation on logout, and user-enumeration prevention
My Contributions
- Built the entire platform full-stack: Next.js 16 frontend and Laravel 10 REST API
- Designed and implemented the dual-guard JWT authentication system with Google OAuth and OTP email verification
- Implemented role-based access control with Spatie Permission and a JSON-first permission middleware
- Developed the interactive quiz engine with randomized order, timers, explanations, and progress persistence
- Built the public website API and the admin dashboard API, including analytics, suggestions, and view/like tracking
- Designed the responsive UI with dark/light theming and motion using Framer Motion and Lottie
- Handled design, development, and deployment end to end
Challenges & Solutions
Challenge: Admin users and website users needed completely separate authentication without their sessions colliding.
Solution: Two dedicated JWT guards (api and website), each with its own user provider, keeping the two audiences fully isolated.
Result: Admins and learners authenticate independently against the same API with no risk of cross-contamination.
Challenge: Resource and content view counts were easily inflated by repeat requests from the same visitor.
Solution: Session-based deduplication that records a view once per session id before incrementing the counter.
Result: View metrics reflect genuine engagement rather than raw request volume.
Tech Stack
Frontend: Next.js 16, React 19, TypeScript, Tailwind CSS 4, Framer Motion, Lottie React, Radix UI, React Hook Form
Backend: Laravel 10 (PHP 8.1+), JWT Auth, Spatie Laravel Permission, Laravel Socialite, GuzzleHTTP
Database: MySQL 8
Tools: pnpm, ESLint, PostCSS, Vercel
Need something like this?Tell me about your project