SkillSphere
The Vision Behind SkillSphere
SkillSphere is a unified online learning platform engineered to address the fragmented nature of digital skill acquisition through a curated catalog of expert led courses. Built with Next.js 15 App Router architecture, the system implements modern authentication patterns, protected server side routing, dynamic course exploration, and user profile management while maintaining optimized server side rendering and high performance.
Building a Secure Multi-Auth Gateway
One of the most critical aspects of any learning platform is ensuring that user data remains protected while providing frictionless access. SkillSphere implements a dual-authentication strategy that balances security with convenience.
Traditional credential-based authentication with proper hashing and salting. The system validates email formats, enforces password strength requirements, and implements rate limiting to prevent brute force attempts.
OAuth 2.0 integration allowing users to authenticate with their Google credentials. This reduces friction for new users while maintaining the same level of security through BetterAuth's token management.
All authentication flows are powered by BetterAuth, a modern authentication library that handles session management, token validation, and secure cookie storage. The system automatically refreshes tokens and manages session timeouts.
Protecting Premium Content
The true value of SkillSphere lies in its curated course content. To ensure that only authenticated users can access the curriculum, the platform implements a sophisticated route protection strategy.
Every course detail page is wrapped in a middleware layer that checks for valid authentication tokens. Unauthenticated users are seamlessly redirected to the login page with a return URL parameter.
Course curriculum is stored in MongoDB with access controls at the database level. Even if someone tries to access the API directly, they'll receive a 401 Unauthorized response.
Dynamic Skill Discovery & Search
Finding the right course shouldn't feel like finding a needle in a haystack. SkillSphere implements a powerful search and discovery system that makes exploration intuitive.
As users type in the search bar, courses are filtered by title in real-time. This instant feedback creates a responsive, engaging experience that encourages exploration.
The platform automatically highlights popular and trending courses based on enrollment data and user ratings, helping learners discover what others are finding valuable.
Crafting Delightful User Experiences
Beyond functionality, SkillSphere prioritizes user delight through thoughtful interactions and smooth animations powered by Framer Motion.
Smooth fade and slide transitions between pages create a native-app feel. This reduces perceived load time and makes navigation feel fluid.
Course cards feature subtle lift and glow effects on hover, providing visual feedback that improves clickability and engagement.
Skeleton loaders and animated spinners appear during data fetching, keeping users informed and reducing abandonment during wait times.
Personalized Learning Journeys
Every learner's journey is unique. SkillSphere's profile management system provides a dedicated space for users to track their progress and customize their experience.
A dedicated /my-profile route displays the logged-in user's data including Name, Email, and Avatar. A "Member Since" badge adds a personalized touch.
Users can update their Name and Image URL through a specialized form using the authClient.updateUser method. Changes reflect immediately across the platform.
The Technology Stack: Building for Scale
SkillSphere was built with scalability and performance in mind. The technology stack was carefully chosen to handle growing user bases while maintaining developer productivity.
| Technology | Why It Was Chosen |
|---|---|
| Next.js 15 | App Router for server-side rendering, API routes, and optimal SEO |
| BetterAuth | Modern authentication with built-in session management and OAuth support |
| Tailwind CSS | Utility-first styling for rapid UI development and consistency |
| MongoDB | Flexible document-based database for course data and user profiles |
| Framer Motion | Production-ready animations that enhance user experience |
| DaisyUI | Component library built on Tailwind for consistent UI patterns |
Inside the Repository: Clean Architecture
The project follows Next.js App Router conventions with a clean separation of concerns, making it easy to maintain and extend.
kawsarcodes-skill-sphere/
├── README.md
├── eslint.config.mjs
├── jsconfig.json
├── next.config.mjs
├── package.json
├── postcss.config.mjs
├── data/
│ └── courses.js
├── public/
│ └── img/
│ └── default-avatar.webp
└── src/
├── app/
│ ├── globals.css
│ ├── layout.jsx
│ ├── not-found.jsx
│ ├── page.jsx
│ ├── api/
│ │ └── auth/
│ │ └── [...all]/
│ │ └── route.js
│ ├── courses/
│ │ ├── page.jsx
│ │ └── [id]/
│ │ └── page.jsx
│ ├── login/
│ │ └── page.jsx
│ ├── my-profile/
│ │ ├── page.jsx
│ │ └── update/
│ │ └── page.jsx
│ └── register/
│ └── page.jsx
├── components/
│ ├── CourseCard.jsx
│ ├── Footer.jsx
│ ├── Hero.jsx
│ └── Navbar.jsx
├── data/
│ └── courses.json
└── lib/
├── auth-client.js
└── auth.jsDeployment & Environment Configuration
SkillSphere is deployed on Vercel with secure environment variable management. The deployment pipeline ensures that environment-specific configurations are handled safely.
# Next.js Environment Variables NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=your_secret_key_here # BetterAuth Configuration BETTER_AUTH_SECRET=your_better_auth_secret BETTER_AUTH_URL=http://localhost:3000 # MongoDB Database MONGODB_URI=mongodb://localhost:27017/skillsphere # Google OAuth (Optional) GOOGLE_CLIENT_ID=your_google_client_id GOOGLE_CLIENT_SECRET=your_google_client_secret
Challenges Faced While Developing the Project
Building a modern learning management system presented authentication synchronization and layout persistence complexities.
Synchronizing asynchronous Firebase authentication states with Next.js server components required custom route guarding logic to prevent hydration mismatch flashes.
Ensuring embedded course video players scaled responsively across diverse viewport widths without causing cumulative layout shifts took extensive container adjustments.
Potential Improvements and Future Plans for the Project
Future milestones focus on interactive progress tracking features and real time student collaboration modules.
Developing an automated quiz module at the end of each course module to test student comprehension and award digital certificates.
Adding dedicated course discussion boards allowing students to post technical questions and exchange code snippet solutions directly under lessons.