Aloura is a feature-rich fragrance e-commerce platform developed as part of a comprehensive Web Development course & for a real-world startup. This project demonstrates modern web development practices, creating a real-world experience for luxury fragrance retail.
- Target Audience: Fragrance enthusiasts, gift buyers, and luxury product consumers
- Value Proposition: Curated premium fragrances with personalized recommendations and seamless shopping experience
- Business Model: B2C e-commerce with admin management system
- Real-World Startup: Fully functional e-commerce platform for Aloura fragrance business
- Advanced Authentication: Google OAuth, SMS/Email verification, secure JWT implementation
- AI-Powered Features: Intelligent chatbot assistance and personalized fragrance quiz recommendations
- Premium User Experience: Dark mode, fluid cursor animations, multi-language support
- Secure Commerce: Real credit card validation with BIN verification and encrypted checkout
- Business Intelligence: Comprehensive admin dashboard with subscriber management and analytics
- Gift Solutions: Complete gifting system with personalized cards and wrapping options
- Modern Tech Stack: Full-stack JavaScript with NodeJS, MongoDB, Express.js, and AWS deployment
Core Technologies
- HTML5/CSS3/JavaScript - Modern web fundamentals with ES6+ features
- Node.js & Express.js - Server-side runtime and web framework
- EJS - Dynamic templating engine for server-side rendering
- MongoDB & Mongoose - NoSQL database with elegant object modeling
Key Integrations & Tools
- Bootstrap 5 - Responsive CSS framework
- Font Awesome - Comprehensive icon library
- JWT & Passport.js - Authentication with Google OAuth
- Multer - File upload handling
- Google Generative AI - AI chatbot and recommendations
- Twilio & Nodemailer - SMS and email services
- bcrypt - Password encryption and security
hero-section.mp4
landing-page.mp4
Immersive homepage experience featuring dynamic hero carousel, featured fragrances, customer testimonials, and newsletter subscription with automated welcome emails. Showcases fluid cursor animations and seamless navigation.
all-fragrances.mp4
Comprehensive product browsing with advanced filtering, search functionality, and responsive grid layouts. Real-time search suggestions and intelligent product recommendations enhance the shopping experience.
fragrances-page.mp4
Rich product showcase with high-resolution image galleries, detailed fragrance notes, size selection, and customer reviews. Features dynamic pricing and stock validation with add-to-cart functionality.
gifting.mp4
Complete gifting solution with personalized greeting cards, gift wrapping options, recipient management, and special delivery scheduling. Custom pricing for gift packages with preview functionality.
collections.mp4
Curated fragrance collections with thematic organization, visual storytelling, and interactive browsing experience. Features collection-specific filtering and recommendations.
📸 Screenshots:
Interactive questionnaire with a smart algorithm that analyzes preferences and suggests perfect matches with detailed explanations.
our-story.mp4
Brand narrative showcase with visual storytelling, company values, and mission statement. Features engaging animations and responsive design for brand connection.
user-auth-modals.mp4
Comprehensive authentication system with login, signup, and password reset functionality. Features Google OAuth integration, SMS/Email verification, and secure form validation with real-time feedback.
📸 Screenshots:
Streamlined shopping cart with persistent storage and secure checkout process. Features real credit card validation with BIN verification, multiple payment options, and order confirmation system.
user-orders.mp4
Complete user profile management with order history, tracking, and reorder functionality. Features profile customization, notification preferences, and order status updates.
admin.dashboard.mp4
Comprehensive admin control panel with analytics, product management, user administration, and order processing. Features real-time data visualization, bulk operations, and advanced reporting tools.
📸 Screenshot:
Interactive review and rating system with moderation tools, detailed feedback forms, and review analytics. Features verified purchase validation and helpful review sorting.
📸 Screenshots:
Automated communication system with Twilio SMS and Nodemailer email services for order confirmations, password resets, and marketing campaigns.
📸 Screenshot:
Google Generative AI-powered chatbot providing intelligent customer support, product recommendations, and order assistance with natural language processing.
dark-mode.mp4
Dynamic theme switching with dark mode support, preserving user preferences across sessions with smooth transitions and optimal contrast ratios.
📸 Screenshot:
Internationalization features supporting multiple languages with dynamic content translation and localized user experiences.
📸 Screenshot:
Advanced newsletter subscription system with automated welcome sequences, segmentation, and unsubscribe management for marketing campaigns.
📸 Screenshot:
Aloura leverages advanced SEO strategies: structured metadata, keyword-rich URLs, sitemaps, and responsive design to achieve top Google rankings and maximize organic reach in Egypt and beyond.
Professional cloud deployment (EC2) on AWS infrastructure with scalable architecture, load balancing, and automated backups for enterprise-grade reliability.
Advanced credit card validation using BIN (Bank Identification Number) verification, Luhn algorithm checking, and real-time card type detection for secure transactions.
Interactive cursor effects and micro-animations enhance user engagement through smooth transitions, hover effects, and visual feedback throughout the interface.
⚙️ Fluid cursor animations are conditionally enabled based on estimated device specifications:*
- GPU availability (integrated or dedicated)
- CPU core count
- RAM capacity
These checks are estimated and may not always be accurate. Additionally, the effect is automatically disabled on mobile devices to ensure performance.
- Node.js (v16.0 or higher)
- MongoDB (v4.4 or higher)
- npm or yarn package manager
- Git for version control
-
Clone the Repository
git clone <repository_url> cd Aloura-MIU
-
Install Dependencies
npm install
-
Environment Configuration Create a
.env(through.env.example) file in the root directory (fill up with your personal API Keys) -
Database Setup Set up MongoDB either locally or remotely, then set the
MONGO_DB_URIin.env -
Run The Application
nodemon index.js
-
Access the Application
- Frontend:
http://localhost:3000 - Admin Panel:
http://localhost:3000/admin/{admin_user_id}
- Frontend:
- Create Admin User: Register a new user and manually change their role to "admin" in the database
Aloura Development Team
- Mohamed Hesham - @mohamedelziat50
- Nabil Ramy - @nabilramyy
- Ramy Slait - @ramyslait
- Antoni Mikhaiel - @Antoni-Mikhaiel
- Seif Makled - @Seifmakled
All team members contributed collaboratively to the development of this real-world startup e-commerce platform.
Aloura-MIU/
├── 📁 config/ # Configuration files
│ ├── db.js # Database connection
│ ├── passport.js # Passport.js configuration
│ └── secrets.js # Environment variables
├── 📁 controllers/ # Business logic controllers
│ ├── auth.js # Authentication logic
│ ├── chatbot.js # AI chatbot functionality
│ ├── fragrance.js # Product management
│ ├── frontend.js # Frontend route handlers
│ ├── gifting.js # Gift functionality
│ ├── order.js # Order processing
│ ├── review.js # Review system
│ └── users.js # User management
├── 📁 middleware/ # Custom middleware
│ ├── auth.js # Authentication middleware
│ └── multer.js # File upload middleware
├── 📁 models/ # Database models (Mongoose schemas)
│ ├── fragrance.js # Product model
│ ├── order.js # Order model
│ ├── review.js # Review model
│ └── user.js # User model
├── 📁 public/ # Static assets
│ ├── 📁 css/ # Stylesheets
│ ├── 📁 js/ # Client-side JavaScript
│ ├── 📁 img/ # Images and media
│ ├── 📁 fonts/ # Web fonts
│ └── 📁 uploads/ # User uploaded files
├── 📁 routes/ # API route definitions
│ ├── auth.js # Authentication routes
│ ├── chatbot.js # Chatbot routes
│ ├── fragrance.js # Product routes
│ ├── frontend.js # Frontend routes
│ ├── gifting.js # Gifting routes
│ ├── order.js # Order routes
│ ├── quiz.js # Quiz routes
│ ├── review.js # Review routes
│ └── users.js # User routes
├── 📁 utilities/ # Utility functions
│ ├── emailService.js # Email functionality
│ ├── emailtemplates.js # Email templates
│ ├── smsService.js # SMS functionality
│ └── twilio.js # Twilio integration
├── 📁 views/ # EJS templates
│ ├── 📁 admin/ # Admin panel views
│ ├── 📁 partials/ # Reusable template components
│ ├── index.ejs # Homepage
│ ├── all-fragrances.ejs # Product catalog
│ ├── checkout.ejs # Checkout page
│ └── [other views...] # Additional pages
├── 📁 Documents/ # Project documentation
├── index.js # Application entry point
├── package.json # Dependencies and scripts
├── README.md # Project documentation
└── .env.example # Environment variables template
/config: Contains configuration files for database connection, authentication strategies, and environment variables/controllers: Houses the business logic for different features, following MVC pattern/middleware: Custom Express.js middleware for authentication, file uploads, and request processing/models: Mongoose schemas defining the structure of data stored in MongoDB/public: Static assets served directly by Express.js including stylesheets, client-side JavaScript, and media files/routes: Express.js route definitions organizing API endpoints by feature/utilities: Helper functions and services for email, SMS, and other integrations/views: EJS templates for server-side rendering of HTML pages
We welcome contributions to the Aloura project!
Quick Start:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Please follow existing code conventions and test your changes thoroughly.
This project is licensed under the AGPL-3.0 License - see the LICENSE file for details.