Majna Store

E-commerce Platform Overview

Key Features

• Customizable Interface: Choose between Dark and Light Modes for a personalized browsing experience.
• Multilingual Support: Seamlessly switch between Arabic and English languages to cater to diverse users.
• Efficient Search and Navigation: Quickly find products by utilizing the Search Bar, Sorting, and Filtering options available in both Category and Subcategory.
• Convenient Shopping Experience: Add items to the Cart and mark favorites for easy access.
• Page for Every Product: Each product has its own dedicated page, displaying details such as name, description, category, subcategory, brand, store quantity, and price, allowing users to decide whether to add it to their cart or favorite list.
• Wonderful Slider: The slider displays product images according to the selected filtering criteria.
• User Authentication: Securely log in to access account features and make purchases.
• User Registration: Sign up as a buyer or seller with ease.
• Email Verification: Receive activation notifications via email for account authorization.
• Forget Password: Receive notifications via email for Resetting Password.
• Change Password: Write previous Password and the new to Change Password.
• Seller Tools: Manage Brands, Stores, and Products efficiently to be shown in website.
• Reviewer Approval System: Review uploaded brands and accept or reject them as needed.
• About Us Page: Features the most important questions with their answers, along with a showcase of the team behind the website.
• Contact Us Page: Includes a form for name, email, user role, subject, and message to be sent via email, along with the team's social media links.
• Optimization Principles Applied: Utilize useCallback and useMemo for performance optimization.
• Proper Import Statement Usage: Implement best practices for importing modules built-in, external and internal.
• Object Destructuring: Enhance code readability with object destructuring.
• DRY Components and Hooks: Apply the "Don't Repeat Yourself" principle for cleaner code.
• Optional Chaining and Nullish Coalescing: Increase code clarity and handle null or undefined values effectively.
• Custom Hooks: Enhance code efficiency with custom hooks, Website uses the principle of custom hooks to shorten The code and make it more efficient.
• Environmental Variables: to Securely manage sensitive information and configuration settings.
• Organized Folder Structure: Maintain code organization with separate folders for pages, components, hooks, styles, form validation, and translation.

Libraries and Dependencies

1. Material UI: Provides a rich set of components for stylish and responsive designs.
2. react-router-dom: Facilitates single-page application navigation.
3. react-redux and redux toolkit: Handles state management globally.
4. redux-persist: Persists and rehydrates Redux store data.
5. aos and framer motion: Adds smooth animations for a visually appealing interface.
6. formik and Yup: Simplifies form handling and validation.
7. i18next and related packages: Enables multilingual support with language detection and translation capabilities.
8. jss-rtl: Supports right-to-left layout for Arabic language compatibility.
9. mdb-ui-kit: Integrates flags for language selection.
10. cyntler/react-doc-viewer: Allows viewing various document formats within the website.
11. react-toastify: Displays informative toasts for user actions.
12. swiper: Creates beautiful sliders for showcasing content.
13. sweetalert: Presents attractive alerts for user notifications.
14. axios: Facilitates data fetching and backend communication with interceptors for request and response handling.
15. craco/craco: Utilizes path aliases for cleaner import statements.
16. emailjs-com: Enables receiving messages sent via email.
17. gh-pages: Enables hosting on GitHub pages for easy deployment.