Maktub Home is a web application designed for a home decor business. It features a Single Page Application (SPA) for the frontend, developed using Vue.js, which enables users to browse and purchase products seamlessly, and an admin dashboard for managing the inventory and orders. The backend of the application is built using Laravel and MySQL.
- Frontend: Vue.js (SPA, Vue Router, Vuex), Vite, Bootstrap, CSS
- Backend: Laravel, PHP, Eloquent ORM
- Database: MySQL (AWS RDS)
- Deployment & Server: AWS EC2, Apache, AWS SES
- APIs: Custom APIs developed in Laravel, QuickChart API
- Development Tools: npm, Composer, Laravel Tinker
- Version Control: Git
Maktub Home was developed to provide a modern, efficient, and user-friendly e-commerce platform for a local home decor business. The project integrates the latest web development technologies to ensure a smooth user experience providing an intuitive navigation and responsive design across all devices as well as robust backend management. It was built by myself from scratch while I was learning to use Laravel, Vue.js, and the other technologies mentioned above. The web app consists of two main views:
- Developed with Vue.js, Vuex and Vue Router.
- Smooth animations using latest CSS3 features.
- Mobile responsiveness for seamless browsing across all devices.
- Catalog filter and search.
- Real-time stock updates (When a customer purchases the last unit of a product that is in another user's cart, the product's availability is automatically updated to reflect the stock status).
- Complete cart and checkout experience..
- Sending emails upon successful order creation using Amazon SES to both the client and admin. Click here to see the email the client receives.
- Order search using randomly-generated order number and real time update of order status. Click here to see a video showcase of this feature.
- Data sanitization using DOMPurify library and data encryption using CryptoJS & Laravel's OpenSSL.
- Implemented SEO strategies for improved search engine visibility and ranking.
- Implemented performance optimization techniques, including lazy loading (for routes in Vue Router as well for large files), image compression (Apache's mod_deflate module), and code minification for enhanced user experience and faster page loading times.
- Enhanced security measures such as HTTPS, HSTS, CSRF protection, and XSS prevention to safeguard user data and prevent malicious attacks.
- The site tracks user's metrics such as time spent on the page and visited products, enabling deeper insights for optimization and refinement.
- Secure authentication using Laravel's built-in library.
- Enhanced security measures including:
- Verification of user's IP address for admin login authentication. Click here to see a video demo of it.
- Implementation of additional passkey authentication for unregistered IPs to access the login.
- Automated IP banning mechanism for excessive login attempts.
- Other security measures like CORS, XSS Protection, Rate Limiting, etc.
- Complete admin dashboard for managing products, orders, discount codes and assets.
- Comprehensive statistics dashboard enabling detailed analysis of specific metrics for individual months.
- Graph generation using Quickchart API to provide deeper insights in statistics for different periods of time. Click here to see a video demo of it.
- Notification system for order creations, new IPs registered and statistics.
- Frontend developed with Blade, Bootstrap and CSS.
- Mobile responsiveness for a smooth experience across all devices.
Developing Maktub Home provided valuable experience in:
- Building a full-stack web application using modern technologies and frameworks.
- Defining, documenting, and maintaining the requirements for the application.
- Communicating and understanding the client's needs for the site.
- Developing a smooth experience for the user using a SPA and implementing performance optimizations for faster loading times.
- Gaining insights into user behavior through analytics and feedback mechanisms.
- Implementing state management for the application.
- Confronting deployment challenges and optimizing server configurations for a great application hosting.
- Ensuring secure and efficient data handling and user authentication processes.
- Implementing security measures for both the server and the client.
- Understanding and implementing SEO strategies for improved search engine visibility.
- Integrating multiple technologies within the project.
In this section you'll find some screenshots and videos showcasing the functionality and design of Maktub Home.
Here are some videos showcasing the website functionality. I invite you to explore the repository and take a look at all of them!
Feel free to explore the repository as well as the web page to learn more about the project. If you have any questions or suggestions, please don't hesitate to reach out via mail.