Amrella is a comprehensive social learning platform built with Next.js 15, Supabase, and modern web technologies. It provides a complete ecosystem for users to connect, learn, and grow together through groups, courses, forums, and social interactions.
- ✅ User registration and login (email verification optional)
- ✅ User profiles with customizable bio, location, website
- ✅ Cover image uploads (stored as blobs in database)
- ✅ User verification system with badges (Individual, Business, Creator, Organization)
- ✅ Follow/unfollow system
- ✅ Admin role management (admin, super_admin)
- ✅ Activity feed with posts, likes, comments
- ✅ Real-time post creation and interaction
- ✅ User profiles with posts, groups, and about sections
- ✅ Content reporting system
- ✅ Media uploads (images, videos) stored as blobs
- ✅ Group creation and management
- ✅ Join/leave groups functionality
- ✅ Group categories and privacy settings
- ✅ Group member management
- ✅ Group cover images
- ✅ Forum creation and categorization
- ✅ Topic creation and management
- ✅ Threaded replies system
- ✅ Forum moderation tools
- ✅ Course creation and management
- ✅ Course enrollment system
- ✅ Progress tracking
- ✅ Course categories and levels
- ✅ Instructor profiles
- ✅ Event creation and management
- ✅ Event attendance tracking
- ✅ Virtual and physical events
- ✅ Event categories
- ✅ Comprehensive admin panel
- ✅ User management and role assignment
- ✅ Content moderation
- ✅ Platform statistics
- ✅ Admin activity logging
- ✅ Support ticket creation
- ✅ Ticket management by admins
- ✅ Real-time messaging within tickets
- ✅ Priority and category system
- ✅ Basic messaging interface
⚠️ Real-time messaging (needs WebSocket implementation)⚠️ File attachments in messages
- ✅ Basic notification structure
⚠️ Real-time notifications⚠️ Email notifications
- ❌ Video lessons with progress tracking
- ❌ Quizzes and assessments
- ❌ Course certificates
- ❌ Course reviews and ratings
- ❌ Stories/temporary posts
- ❌ Live streaming
- ❌ Voice/video calls
- ❌ Group video calls
- ❌ Payment integration for courses
- ❌ Subscription management
- ❌ Marketplace for digital products
- ❌ Push notifications
- ❌ Mobile app (React Native)
- ❌ Offline functionality
- Frontend: Next.js 15, React 18, TypeScript
- Backend: Next.js API Routes, Supabase
- Database: PostgreSQL (via Supabase)
- Authentication: Supabase Auth
- Styling: Tailwind CSS, shadcn/ui
- State Management: TanStack Query (React Query)
- File Storage: Database BLOBs (no external services)
profiles
- User profiles and settingsposts
- User posts and contentcomments
- Post commentspost_likes
- Post likes tracking
follows
- User follow relationshipsfriendships
- Friend requests and connectionsnotifications
- User notifications
groups
- Group informationgroup_members
- Group membership
courses
- Course informationcourse_lessons
- Individual lessonscourse_enrollments
- User enrollmentslesson_progress
- Learning progress
events
- Event informationevent_attendees
- Event attendance
forums
- Forum categoriesforum_topics
- Discussion topicsforum_replies
- Topic replies
support_tickets
- Support requestssupport_ticket_messages
- Ticket conversationsreports
- Content reportsadmin_activity_log
- Admin actions
``` amrella/ ├── app/ │ ├── api/ # API routes │ │ ├── admin/ # Admin management APIs │ │ ├── courses/ # Course management APIs │ │ ├── forums/ # Forum APIs │ │ ├── groups/ # Group management APIs │ │ ├── reports/ # Content reporting APIs │ │ ├── support/ # Support ticket APIs │ │ ├── upload/ # File upload API │ │ └── users/ # User management APIs │ ├── admin/ # Admin dashboard pages │ ├── auth/ # Authentication pages │ ├── courses/ # Course pages │ ├── events/ # Event pages │ ├── forums/ # Forum pages │ ├── groups/ # Group pages │ ├── messages/ # Messaging pages │ ├── profile/ # User profile pages │ └── support/ # Support pages ├── components/ │ ├── ui/ # shadcn/ui components │ ├── activity-feed.tsx # Main activity feed │ ├── navigation.tsx # Main navigation │ ├── report-dialog.tsx # Content reporting │ └── verified-badge.tsx # Verification badges └── scripts/ ├── database-setup.sql # Initial database setup ├── admin-and-features-setup.sql # Admin features └── complete-features-setup.sql # Complete feature set ```
- Node.js 18+
- Supabase account
- Git
-
Clone the repository ```bash git clone cd amrella ```
-
Install dependencies ```bash npm install ```
-
Set up Supabase
- Create a new Supabase project
- Get your project URL and anon key
- Run the SQL scripts in order:
scripts/database-setup.sql
scripts/admin-and-features-setup.sql
scripts/complete-features-setup.sql
-
Configure environment variables ```bash
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key ```
-
Configure Supabase Auth
- In Supabase Dashboard → Authentication → Settings
- Set "Site URL" to
http://localhost:3000
- Add
http://localhost:3000/api/auth/callback
to redirect URLs - Optionally disable email confirmation for immediate login
-
Run the development server ```bash npm run dev ```
-
Create your first admin user
- Register a new account
- In Supabase SQL Editor, run: ```sql UPDATE profiles SET role = 'super_admin' WHERE email = '[email protected]'; ```
GET /api/auth/callback
- Auth callback handler
GET /api/users/[id]
- Get user profilePATCH /api/users/[id]
- Update user profilePOST /api/users/[id]/follow
- Follow userDELETE /api/users/[id]/follow
- Unfollow user
GET /api/groups
- List groupsPOST /api/groups
- Create groupPOST /api/groups/[id]/join
- Join groupDELETE /api/groups/[id]/join
- Leave group
GET /api/courses
- List coursesPOST /api/courses
- Create coursePOST /api/courses/[id]/enroll
- Enroll in course
GET /api/forums
- List forumsPOST /api/forums
- Create forumGET /api/forums/[id]/topics
- Get forum topicsPOST /api/forums/[id]/topics
- Create forum topic
GET /api/admin/users
- List users (admin only)PATCH /api/admin/users
- Update user (admin only)
GET /api/support/tickets
- List support ticketsPOST /api/support/tickets
- Create support ticketGET /api/support/tickets/[id]/messages
- Get ticket messagesPOST /api/support/tickets/[id]/messages
- Send ticket message
GET /api/reports
- List reports (admin only)POST /api/reports
- Submit content report
POST /api/upload
- Upload files (stored as database blobs)
-
Row Level Security (RLS)
- All tables have RLS enabled
- Policies ensure users can only access their own data
- Admins have elevated permissions
-
Database Functions
handle_new_user()
- Creates profile on user registrationlog_admin_activity()
- Logs admin actions- Various trigger functions for maintaining counts
-
Storage
- All media files stored as BYTEA in database
- No external storage dependencies
- Base64 encoding for transport
- Email verification: Optional (can be disabled)
- Password requirements: Standard Supabase defaults
- Session management: Automatic with Supabase Auth
VerifiedBadge
- User verification indicatorsReportDialog
- Content reporting interfaceActivityFeed
- Main social feedNavigation
- Platform navigation
- Button, Card, Input, Textarea
- Dialog, Dropdown, Tabs, Badge
- Avatar, Progress, ScrollArea
- Select, Label, Separator
- JWT-based authentication via Supabase
- Role-based access control (user, admin, super_admin)
- Protected API routes with middleware
- Row-level security on all database tables
- User reporting system for inappropriate content
- Admin moderation tools
- Content filtering capabilities
- User blocking and suspension
- All user data encrypted at rest
- Secure file upload handling
- Input validation and sanitization
- CORS protection
- Connect your GitHub repository to Vercel
- Add environment variables in Vercel dashboard
- Deploy automatically on push to main branch
```bash NEXT_PUBLIC_SUPABASE_URL=your_production_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_production_supabase_anon_key ```
- Run all SQL scripts in your production Supabase instance
- Update any hardcoded URLs in the database
- Set up proper backup schedules
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
- TypeScript for all new code
- ESLint and Prettier for formatting
- Comprehensive error handling
- Responsive design principles
- Proper indexing on frequently queried columns
- Efficient query patterns with Supabase
- Connection pooling handled by Supabase
- React Query for efficient data fetching
- Image optimization with Next.js
- Code splitting and lazy loading
- Responsive images and assets
- Real-time Features: Some features like live messaging need WebSocket implementation
- File Size Limits: Large file uploads may hit database limits
- Mobile Experience: Optimized for desktop, mobile improvements needed
- Search: Basic search functionality, could be enhanced with full-text search
For technical support or questions:
- Create an issue in the GitHub repository
- Use the built-in support ticket system
- Check the documentation and API reference
This project is licensed under the MIT License - see the LICENSE file for details.
Amrella - Connecting learners, creators, and communities in one powerful platform.