# Lumora - AI-Powered Productivity & Education Platform A modern, futuristic website for Lumora featuring a complete frontend and backend implementation with user authentication, subscription management, and AI-powered features. ## 🌟 Features ### Frontend - **Modern UI/UX**: Futuristic gradient design (blue → purple) - **Responsive Design**: Works seamlessly on desktop, tablet, and mobile - **Smooth Animations**: CSS animations and transitions - **Interactive Components**: Hover effects, floating cards, parallax scrolling - **Form Validation**: Real-time validation for login and registration - **Password Strength Checker**: Visual feedback for password security ### Backend - **RESTful API**: Express.js server with MongoDB - **User Authentication**: JWT-based authentication system - **Password Security**: Bcrypt password hashing - **Role-Based Access**: User, Admin, and Premium roles - **Subscription Management**: Free, Basic, Pro, and Enterprise plans - **Protected Routes**: Middleware for authentication and authorization ## 📁 Project Structure ``` lumora/ │ ├── backend/ │ ├── server.js # Express server setup │ ├── package.json # Backend dependencies │ ├── routes/ │ │ ├── authRoutes.js # Authentication routes │ │ └── userRoutes.js # User management routes │ ├── controllers/ │ │ ├── authController.js # Auth logic (login, register, etc.) │ │ └── userController.js # User CRUD operations │ ├── models/ │ │ └── userModel.js # User schema and methods │ ├── middleware/ │ │ └── authMiddleware.js # JWT verification & authorization │ └── config/ │ └── db.js # MongoDB connection │ ├── frontend/ │ ├── index.html # Main homepage │ ├── login.html # Login page │ ├── register.html # Registration page │ ├── css/ │ │ └── style.css # Complete styling │ └── js/ │ ├── main.js # Homepage interactions │ ├── login.js # Login form handler │ └── register.js # Registration form handler │ └── README.md # This file ``` ## 🚀 Getting Started ### Prerequisites - **Node.js** (v14 or higher) - **MongoDB** (v4.4 or higher) - **npm** or **yarn** ### Backend Setup 1. **Navigate to backend directory** ```bash cd backend ``` 2. **Install dependencies** ```bash npm install ``` 3. **Create environment variables** Create a `.env` file in the `backend` directory: ```env # Server Configuration NODE_ENV=development PORT=5000 # Database MONGODB_URI=mongodb://localhost:27017/lumora # JWT Configuration JWT_SECRET=your-super-secret-jwt-key-change-this-in-production JWT_EXPIRES_IN=7d # Client URL (for CORS) CLIENT_URL=http://localhost:3000 ``` 4. **Start MongoDB** ```bash # If using local MongoDB mongod # Or use MongoDB Atlas connection string in MONGODB_URI ``` 5. **Start the server** ```bash # Development mode with auto-reload npm run dev # Production mode npm start ``` The server will start on `http://localhost:5000` ### Frontend Setup 1. **Navigate to frontend directory** ```bash cd frontend ``` 2. **Update API URL** In `js/login.js` and `js/register.js`, update the API_URL if needed: ```javascript const API_URL = 'http://localhost:5000/api'; ``` 3. **Serve the frontend** You can use any static file server. Here are some options: **Option 1: Using Python** ```bash # Python 3 python -m http.server 3000 # Python 2 python -m SimpleHTTPServer 3000 ``` **Option 2: Using Node.js http-server** ```bash # Install globally npm install -g http-server # Run server http-server -p 3000 ``` **Option 3: Using VS Code Live Server** - Install "Live Server" extension - Right-click on `index.html` - Select "Open with Live Server" 4. **Access the website** Open your browser and navigate to: - Homepage: `http://localhost:3000/index.html` - Login: `http://localhost:3000/login.html` - Register: `http://localhost:3000/register.html` ## 📚 API Documentation ### Authentication Endpoints #### Register User ```http POST /api/auth/register Content-Type: application/json { "fullName": "John Doe", "email": "[email protected]", "password": "SecurePass123" } ``` #### Login User ```http POST /api/auth/login Content-Type: application/json { "email": "[email protected]", "password": "SecurePass123", "rememberMe": true } ``` #### Verify Token ```http GET /api/auth/verify Authorization: Bearer ``` #### Get Current User ```http GET /api/auth/me Authorization: Bearer ``` ### User Endpoints #### Get User Profile ```http GET /api/users/profile Authorization: Bearer ``` #### Update Profile ```http PUT /api/users/profile Authorization: Bearer Content-Type: application/json { "fullName": "Jane Doe", "preferences": { "theme": "dark", "language": "en" } } ``` #### Update Subscription ```http PUT /api/users/subscription Authorization: Bearer Content-Type: application/json { "plan": "pro", "status": "active" } ``` ## 🎨 Design Features ### Color Palette - **Primary**: `#6366f1` (Indigo) - **Secondary**: `#8b5cf6` (Purple) - **Accent**: `#ec4899` (Pink) - **Gradients**: Blue to Purple transitions ### Typography - **Font Family**: Inter, system fonts - **Headings**: 800 weight for impact - **Body**: 400 weight for readability ### Components 1. **Header/Navigation** - Sticky positioning - Smooth scroll behavior - Active link highlighting - Mobile hamburger menu 2. **Hero Section** - Animated gradient orbs - Floating cards with stats - Call-to-action buttons - Responsive grid layout 3. **Features Section** - 6 feature cards with icons - Hover animations - Card tilt effect on mouse move 4. **Products Section** - Product showcases with images - Badge overlays - Feature lists with checkmarks 5. **Testimonials** - User reviews with avatars - 5-star ratings - Hover effects 6. **Authentication Forms** - Real-time validation - Password strength checker - Show/hide password toggle - Social login placeholders ## 🔒 Security Features - **Password Hashing**: Bcrypt with salt rounds - **JWT Tokens**: Secure token-based authentication - **Protected Routes**: Middleware authentication - **Role-Based Access**: User/Admin/Premium roles - **Input Validation**: Server-side validation - **CORS Configuration**: Controlled cross-origin requests - **Helmet.js**: Security headers - **Rate Limiting**: Request throttling ## 🛠️ Technologies Used ### Frontend - **HTML5**: Semantic markup - **CSS3**: Modern styling with variables - **JavaScript (ES6+)**: Vanilla JS - **Font Awesome**: Icons - **Google Fonts**: Typography ### Backend - **Node.js**: Runtime environment - **Express.js**: Web framework - **MongoDB**: Database - **Mongoose**: ODM for MongoDB - **JWT**: Authentication - **Bcrypt**: Password hashing - **Helmet**: Security headers - **CORS**: Cross-origin support - **Morgan**: HTTP logging - **Compression**: Response compression ## 📱 Responsive Breakpoints - **Desktop**: 1024px and above - **Tablet**: 768px - 1023px - **Mobile**: Below 768px ## 🎯 Future Enhancements - [ ] Email verification system - [ ] Password reset via email - [ ] Two-factor authentication - [ ] OAuth social login (Google, GitHub) - [ ] Real-time notifications - [ ] Dashboard with analytics - [ ] AI chat integration - [ ] File upload functionality - [ ] Payment gateway integration - [ ] Admin panel - [ ] Multi-language support - [ ] Dark mode toggle - [ ] Progressive Web App (PWA) ## 📝 Environment Variables Create a `.env` file in the `backend` directory with: ```env NODE_ENV=development PORT=5000 MONGODB_URI=mongodb://localhost:27017/lumora JWT_SECRET=your-secret-key-here JWT_EXPIRES_IN=7d CLIENT_URL=http://localhost:3000 ``` ## 🐛 Troubleshooting ### MongoDB Connection Issues ```bash # Check if MongoDB is running sudo systemctl status mongod # Start MongoDB sudo systemctl start mongod ``` ### Port Already in Use ```bash # Find process using port 5000 lsof -i :5000 # Kill the process kill -9 ``` ### CORS Errors - Ensure `CLIENT_URL` in `.env` matches your frontend URL - Check that backend server is running - Verify CORS settings in `server.js` ## 📄 License MIT License - feel free to use this project for personal or commercial purposes. ## 👥 Contributors - **Lumora Team** - Initial work and design ## 🙏 Acknowledgments - Font Awesome for icons - Unsplash for images - MongoDB documentation - Express.js community ## 📞 Support For support, email [email protected] or create an issue in the repository. --- **Made with ❤️ by the Lumora Team** # lumora