Apex Learning is a modern, high-performance web application built with Next.js 16 and React 19. It serves as the frontend for the Apex Learning platform, providing a seamless and interactive experience for tutors and students.
- Frontend Live URL: https://apexlearning-edu.vercel.app/
- Backend Live URL: https://apexlearning-server.vercel.app/
- Frontend GitHub: https://github.com/Rafiul29/apexlearning-client.git
- Backend GitHub: https://github.com/Rafiul29/apexlearning-server.git
- Tutor Management: Discover and book top-rated tutors.
- Availability Scheduling: Dynamic availability management for tutors.
- Category Browsing: Explore courses and tutors by category.
- Responsive Dashboard: Specialized dashboards for users and admins.
- Real-time Notifications: Instant feedback using Sonner.
- Modern UI/UX: Built with Radix UI and Tailwind CSS 4 for a premium feel.
- Role-Based Access: Specialized interfaces for Admin, Tutor, and Student.
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS 4
- Components: Radix UI & Lucide React
- Forms & Validation: React Hook Form, TanStack Form & Zod
- Tables: TanStack Table
- Auth: Better Auth
- State Management: React Hook Form & [SWR/Fetch]
This project leverages the latest Next.js features for optimal performance:
- Server Components: Used by default for data fetching to reduce client-side JavaScript.
- Client Components: Used for interactive elements (forms, buttons, charts).
- Server Actions: Located in the
@/actionsdirectory, handling mutations, data synchronization, and validation without manual API calls.
We implement a sophisticated caching strategy using Next.js Data Cache and Tag-based Revalidation:
- Predictable Fetching: Data fetching is handled in
@/servicesusing the nativefetchAPI. - Cache Tags: Every fetch request is tagged (e.g.,
tags: ["Categories"]). - On-demand Revalidation: When data is modified via Server Actions, we use
revalidateTag("TagName")to purge the specific cache and ensure users see the latest data instantly.
// Example: Revalidating after an update
revalidateTag("Categories");- Node.js 20+
- npm / yarn / pnpm
- Clone the repository:
git clone [repository-url]
- Install dependencies:
npm install
- Set up environment variables:
Create a
.envfile based on.env.example.
Run the development server:
npm run devOpen http://localhost:3000 with your browser to see the result.
- Atomic Design: Components are kept small and reusable.
- Type Safety: Full TypeScript integration across the entire codebase.
- Performance: Optimized images and fonts using Next.js built-in components.
Built with ❤️ by Apex Learning Team
- Review: Student feedback for tutor sessions.
This project is ISC licensed.