AnsMaroc

AnsMaroc Documentation

1. Introduction

  • Project Overview: AnsMaroc is a website for posting advertisements (annonces) where users can either sell items or request items they need. The platform supports various categories and includes e-commerce features such as reviews, a reporting system, a wishlist, a cart, product details, search pages, and a landing page. It operates on a Customer-to-Customer (C2C) model. The admin has comprehensive control over the platform, including managing ads, reviewing reports, and approving or blocking ads based on community guidelines.

  • Key Features:

    • Advertisement Posting: Users can create ads to sell or request items.

    • Categories: Organizes ads into categories for better navigation.

    • Cart: Manages items users are interested in.

    • Product Details: Shows detailed information about individual ads.

    • Search Pages: Allows searching for ads with advanced filters.

    • Landing Page: Highlights featured ads and site content.

    • Reviews: Users can leave feedback on ads or sellers.

    • Reporting System: Users can report inappropriate ads.

    • Wishlist: Users can save ads for later.

    • Admin Dashboard: Tools for managing ads, reviewing reports, and user management.

    • Ad Status Tracking: Users can track the status of their ads.

2. Project Structure

  • Architecture Overview:

    • Frontend: Built with Vue.js for dynamic components, integrated with Laravel for a cohesive user experience.

    • Backend: Implemented with Laravel to handle data processing, user authentication, and API endpoints.

    • Database: Uses a relational database (MySQL) for storing user data, ads, categories, reviews, and reports.

3. Features

  • Advertisement Posting

    • Overview: Users can post ads to sell or request items.

    • User Experience: A form for ad creation including fields for title, description, category, price, and images.

    • Technical Implementation:

      • Frontend: Vue.js components handle ad creation forms and management.

      • Backend: Laravel processes and stores ad data.

  • Categories

    • Overview: Ads are categorized for easier browsing and searching.

    • User Experience: Users filter ads by category.

    • Technical Implementation:

      • Frontend: Category filters and navigation are implemented with Vue.js and Bootstrap.

      • Backend: Laravel manages categories and associates them with ads.

  • Cart

    • Overview: Users can add items to a cart for further action.

    • User Experience: The cart shows selected ads with details and allows modifications.

    • Technical Implementation:

      • Frontend: Vue.js handles cart functionality and updates.

      • Backend: Laravel manages cart data and interactions.

  • Product Details

    • Overview: Detailed view of individual ads.

    • User Experience: Users view complete information about an ad.

    • Technical Implementation:

      • Frontend: Vue.js components display detailed ad information.

      • Backend: Laravel provides ad details through API endpoints.

  • Search Pages

    • Overview: Separate pages for searching products and packs with advanced filters.

    • User Experience: Users search and filter ads by criteria such as category and price range.

    • Technical Implementation:

      • Frontend: Vue.js components provide search functionality and filters.

      • Backend: Laravel handles search queries and returns results.

  • Landing Page

    • Overview: The main page features prominent ads and other important content.

    • User Experience: Users see featured ads, popular categories, and promotions.

    • Technical Implementation:

      • Frontend: Built with Vue.js and styled with Bootstrap.

      • Backend: Laravel provides data for the landing page content.

  • Reviews

    • Overview: Users can rate and review ads or sellers.

    • User Experience: Users submit reviews that are visible to others.

    • Technical Implementation:

      • Frontend: Vue.js components for submitting and displaying reviews.

      • Backend: Laravel stores and manages reviews.

  • Reporting System

    • Overview: Users can report ads that violate guidelines.

    • User Experience: Reporting functionality is integrated into ad views.

    • Technical Implementation:

      • Frontend: Reporting feature implemented with Vue.js.

      • Backend: Laravel manages and processes reports.

  • Wishlist

    • Overview: Users can save ads to a wishlist for future reference.

    • User Experience: Users add ads to their wishlist and view saved items.

    • Technical Implementation:

      • Frontend: Wishlist functionality implemented with Vue.js.

      • Backend: Laravel manages wishlist data.

  • Admin Dashboard

    • Overview: Provides tools for managing ads, user accounts, and site content.

    • Features:

      • Ad Management: View, approve, or block ads.

      • Report Management: Review and address user reports.

      • User Management: Manage user accounts and handle issues.

      • Site Statistics: View metrics such as sales and user activity.

      • Category Management: Add and manage categories and subcategories.

    • Technical Implementation:

      • Frontend: Admin dashboard built with Vue.js and styled with Bootstrap.

      • Backend: Laravel provides admin functionalities and data management.

  • Ad Status Tracking

    • Overview: Users track the status of their ads (approved, blocked, pending).

    • User Experience: Status indicators are displayed on the user’s dashboard.

    • Technical Implementation:

      • Frontend: Status indicators using Vue.js.

      • Backend: Laravel updates and manages ad statuses.

4. Data Management

  • Database Structure:

    • Advertisements: Stores details about ads including titles, descriptions, categories, prices, images, and statuses.

    • Categories: Manages categories and subcategories for ads.

    • Reviews: Stores user reviews and ratings.

    • Reports: Records and tracks user reports.

    • Users: Contains user details, ad history, and wishlists.

    • Cart: Manages user cart data.

  • Data Security:

    • Encryption: Encrypts sensitive data such as passwords and payment information.

    • Access Control: Ensures only authorized users and admins can access or modify data.

5. Development Process

  • Environment Setup:

    • Prerequisites: Install Laravel, Vue.js, and Bootstrap. Clone the repository and set up the environment.

    • Local Development:

      • Run Laravel and Vue.js Together: Use php artisan serve for the Laravel backend and npm run serve for the Vue.js frontend. The frontend and backend are integrated, so they work together seamlessly without port conflicts.

Last updated