🌟 SkillSphere - Personal Learning Management Platform

A comprehensive learning management platform built with Next.js 14

🚀 Live Demo • 📖 Documentation • 🛠️ Installation • 💡 Features

📋 Table of Contents

🎯 Overview
✨ Features
🛠️ Technology Stack
🚀 Live Demo
💻 Installation
🔧 Configuration
📱 Usage
🗄️ Database Schema
🔐 Authentication
📊 API Documentation
🎨 UI Components
🚢 Deployment
🤝 Contributing
📄 License

🎯 Overview

SkillSphere is a modern, full-stack personal learning management platform designed to help users organize, track, and enhance their learning journey. Built with Next.js 14 and the latest web technologies, it provides a comprehensive suite of tools for goal setting, note-taking, content creation, and progress analytics.

🌟 Why SkillSphere?

🎯 Goal-Oriented Learning - Set, track, and achieve learning objectives with milestone management
📝 Smart Note-Taking - Organize knowledge with categories, tags, and powerful search
✍️ Content Creation - Write and publish educational blog articles with markdown support
📊 Analytics Dashboard - Visual insights into learning progress and achievements
🔍 Universal Search - Find content across all modules with advanced filtering
⚙️ Profile Management - Complete account control with data export capabilities

✨ Features

🎯 Goal Management

✅ Create and track learning goals with priorities
✅ Milestone system for breaking down large objectives
✅ Progress tracking with visual indicators
✅ Due date management and status updates
✅ Goal categorization and filtering

📝 Note-Taking System

✅ Rich text note creation and editing
✅ Category and tag organization
✅ Pin important notes for quick access
✅ Markdown support for formatted content
✅ Advanced search and filtering

✍️ Blog Platform

✅ Write and publish educational articles
✅ Draft and publish workflow
✅ Comment system for engagement
✅ SEO-friendly URLs and metadata
✅ View and like tracking

📊 Analytics Dashboard

✅ Learning progress visualization
✅ Achievement badge system
✅ Activity timeline and statistics
✅ Goal completion analytics
✅ Quick action shortcuts

🔍 Universal Search

✅ Cross-content search algorithm
✅ Advanced filtering by type, date, category
✅ Search history and suggestions
✅ Relevance-based result ranking
✅ Real-time search results

⚙️ Profile & Settings

✅ User profile management
✅ Security and privacy controls
✅ Data export functionality
✅ Account settings and preferences
✅ Password management

🛠️ Technology Stack

Frontend

Next.js 14 - React framework with App Router
React 18 - Component library with hooks
Tailwind CSS - Utility-first CSS framework
Lucide React - Beautiful icon library
Recharts - Data visualization library

Backend

Next.js API Routes - Serverless API endpoints
NextAuth.js - Authentication solution
Prisma - Modern ORM for database management
bcryptjs - Password hashing

Database

SQLite - Development database
PostgreSQL - Production database (recommended)

Deployment

Vercel - Hosting platform (recommended)
Netlify - Alternative hosting
Railway - Full-stack deployment

🚀 Live Demo

🔗 Try SkillSphere Live

Demo Credentials:

Email: [email protected]
Password: demo123

Feel free to explore all features! Demo data is reset daily.

💻 Installation

Prerequisites

Node.js 18.x or higher
npm or yarn package manager
Git for version control

Quick Start

Clone the repository

git clone https://github.com/yourusername/skillsphere.git
cd skillsphere

Install dependencies
```
npm install
# or
yarn install
```
Set up environment variables
```
cp .env.example .env.local
```

Configure your .env.local file

DATABASE_URL="file:./dev.db"
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key-here"

Set up the database
```
npx prisma generate
npx prisma db push
```
Start the development server
```
npm run dev
# or
yarn dev
```
Open your browser
```
http://localhost:3000
```

🔧 Configuration

Environment Variables

Variable	Description	Required	Default
`DATABASE_URL`	Database connection string	✅	`file:./dev.db`
`NEXTAUTH_URL`	Application URL	✅	`http://localhost:3000`
`NEXTAUTH_SECRET`	Authentication secret key	✅	-

Database Setup

For Development (SQLite):

npx prisma generate
npx prisma db push

For Production (PostgreSQL):

# Update DATABASE_URL to PostgreSQL connection string
npx prisma generate
npx prisma db push

📱 Usage

Getting Started

Create an Account
- Visit /register to create your account
- Or use the demo credentials above
Set Your First Goal
- Navigate to the Goals section
- Click "Create New Goal"
- Add milestones to track progress
Take Notes
- Go to the Notes section
- Create your first note with categories and tags
- Use markdown for rich formatting
Write Articles
- Visit the Blog section
- Create and publish educational content
- Engage with the comment system
Track Progress
- Check your Dashboard for analytics
- View your learning statistics
- Celebrate achievements with badges

Key Workflows

📝 Creating a Goal with Milestones

Goals → New Goal → Add Details → Create Milestones → Save

🔍 Finding Content Quickly

Search → Enter Query → Apply Filters → Select Result

📊 Viewing Analytics

Dashboard → View Charts → Check Stats → Quick Actions

🗄️ Database Schema

Core Models

erDiagram
    User ||--o{ Goal : has
    User ||--o{ Note : creates
    User ||--o{ Blog : writes
    User ||--o{ Comment : posts
    Goal ||--o{ Milestone : contains
    Blog ||--o{ Comment : receives
    
    User {
        string id PK
        string name
        string email UK
        string password
        string bio
        datetime createdAt
        datetime updatedAt
    }
    
    Goal {
        string id PK
        string title
        string description
        enum status
        enum priority
        datetime dueDate
        int progress
        string userId FK
    }
    
    Note {
        string id PK
        string title
        string content
        string tags
        string category
        boolean pinned
        string userId FK
    }
    
    Blog {
        string id PK
        string title
        string slug UK
        string content
        boolean published
        boolean featured
        int views
        int likes
        string userId FK
    }

Relationships

User → Goals (One-to-Many)
User → Notes (One-to-Many)
User → Blogs (One-to-Many)
User → Comments (One-to-Many)
Goal → Milestones (One-to-Many)
Blog → Comments (One-to-Many)

🔐 Authentication

SkillSphere uses NextAuth.js for secure authentication:

Features

🔐 Credentials Authentication - Email and password
🛡️ Session Management - Secure server-side sessions
🔒 Password Hashing - bcryptjs with salt rounds
🚪 Route Protection - Middleware-based auth guards
👤 User Management - Complete profile control

API Endpoints

POST /api/auth/signin     - User login
POST /api/auth/signout    - User logout
GET  /api/auth/session    - Get current session
POST /api/auth/signup     - User registration

📊 API Documentation

Goals API

GET    /api/goals         - List user goals
POST   /api/goals         - Create new goal
PUT    /api/goals/[id]    - Update goal
DELETE /api/goals/[id]    - Delete goal

Notes API

GET    /api/notes         - List user notes
POST   /api/notes         - Create new note
PUT    /api/notes/[id]    - Update note
DELETE /api/notes/[id]    - Delete note

Blog API

GET    /api/blogs         - List blogs
POST   /api/blogs         - Create new blog
PUT    /api/blogs/[id]    - Update blog
DELETE /api/blogs/[id]    - Delete blog

Search API

GET    /api/search        - Universal search
GET    /api/search/history - Search history
POST   /api/search/history - Save search

Analytics API

GET    /api/dashboard/analytics - Dashboard data
GET    /api/dashboard/stats     - Quick statistics

🎨 UI Components

Component Library

src/components/
├── ui/                   # Basic UI components
│   ├── Button           # Reusable button component
│   ├── Input            # Form input component
│   ├── Modal            # Modal dialog component
│   └── LoadingSpinner   # Loading state component
├── shared/              # Shared components
│   ├── Navigation       # Main navigation bar
│   └── Layout           # Page layout wrapper
└── feature/             # Feature-specific components
    ├── GoalCard         # Goal display component
    ├── NoteEditor       # Note editing interface
    ├── BlogPost         # Blog article display
    └── SearchResults    # Search results display

Design System

🎨 Color Palette - Consistent color scheme
📏 Typography - Responsive font scaling
🔲 Spacing - Uniform spacing system
📱 Responsive - Mobile-first design
♿ Accessibility - ARIA labels and keyboard navigation

🚢 Deployment

Vercel (Recommended)

Connect GitHub Repository
```
# Push to GitHub
git push origin main
```
Deploy to Vercel
- Visit vercel.com
- Import your repository
- Add environment variables
- Deploy automatically

Set Environment Variables

DATABASE_URL=your_postgres_url
NEXTAUTH_URL=https://your-app.vercel.app
NEXTAUTH_SECRET=your_production_secret

Alternative Platforms

Netlify:

npm run build
npm run export
# Deploy 'out' folder to Netlify

Railway:

railway login
railway init
railway add postgresql
railway deploy

Production Checklist

🤝 Contributing

We welcome contributions to SkillSphere! Here's how you can help:

Development Setup

Fork the repository
Create a feature branch
```
git checkout -b feature/amazing-feature
```
Make your changes
Run tests
```
npm run test
npm run lint
```
Commit your changes
```
git commit -m 'Add amazing feature'
```
Push to your branch
```
git push origin feature/amazing-feature
```
Open a Pull Request

Contribution Guidelines

📝 Clear commit messages - Describe what and why
🧪 Test your changes - Ensure nothing breaks
📖 Update documentation - Keep docs current
🎨 Follow code style - Use existing patterns
🔍 Code review - All PRs need review

Areas for Contribution

🐛 Bug fixes - Help improve stability
✨ New features - Add exciting capabilities
📖 Documentation - Improve guides and docs
🎨 UI/UX improvements - Enhance user experience
🔧 Performance optimization - Make it faster
🧪 Testing - Add test coverage

📈 Roadmap

🚀 Version 2.0 (Coming Soon)

Real-time collaboration features
Mobile app (React Native)
AI-powered learning suggestions
Advanced analytics and reporting
Team collaboration tools
Integration with external learning platforms

🔮 Future Ideas

📄 License

This project is licensed under the MIT License - see the LICENSE.md file for details.

MIT License

MIT License

Copyright (c) 2025 Dumindu Thushan

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

🙏 Acknowledgments

Next.js Team - For the amazing React framework
Vercel - For the incredible deployment platform
Prisma Team - For the excellent ORM
Tailwind CSS - For the utility-first CSS framework
NextAuth.js - For the authentication solution
Open Source Community - For the endless inspiration

📞 Support

🐛 Found a Bug?

Create an issue
Include steps to reproduce
Add screenshots if helpful

💡 Have a Feature Request?

Open a feature request
Describe the feature and use case
Explain why it would be valuable

📧 Need Help?

Check the documentation
Search existing issues
Contact: [email protected]

⭐ Star this repository if you found it helpful!

🚀 Live Demo • 📖 Documentation • 🐛 Report Bug • 💡 Request Feature

Built with ❤️ by codedbydumi , using Next.js 14

Name		Name	Last commit message	Last commit date
Latest commit History 60 Commits
notes		notes
prisma		prisma
public		public
src		src
.gitignore		.gitignore
LICENSE.md		LICENSE.md
README.md		README.md
eslint.config.mjs		eslint.config.mjs
jsconfig.json		jsconfig.json
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
vercel.json		vercel.json

License

codedbydumi/skillsphere

Folders and files

Latest commit

History

Repository files navigation