Skip to content

Frade11/Pinto

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

74 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ“Œ Pinto - Pinterest-Inspired Social Media Platform

A modern, responsive web application for sharing, discovering, and organizing visual content. Built with PHP, CSS, JavaScript, and MySQL.

PHP JavaScript CSS MySQL

🌐 Live Site: pinto.wuaze.com


πŸ“Έ Project Preview

Screenshot 1

Screenshot 2

Screenshot 3


🎯 Overview

Pinto is a feature-rich Pinterest-inspired platform that enables users to discover, save, and share visual content. The application demonstrates proficiency in full-stack web development with a focus on user experience, security, and responsive design.


✨ Key Features

🏠 Homepage

  • Animated GIF banner showcasing platform highlights
  • Latest posts in a dynamic feed
  • Trending and popular posts section

🎨 Masonry Grid Layout

  • Pinterest-style responsive grid layout with variable-height images
  • Smooth interactions and visual polish
  • Fully responsive design

πŸ“„ Post Details Page

  • High-quality post image display
  • Author profile information with avatar
  • Engagement metrics (likes, saves count)
  • Post creation timestamp
  • Like and save functionality
  • Post title and detailed description
  • Related posts recommendations

πŸ‘€ User Profile System

  • Three intuitive tabs for content organization:
    • Liked Posts - All saved likes
    • Saved Posts - Bookmarked content
    • My Posts - User-created content with full control
  • Edit post metadata (title, description, tags)
  • Delete post functionality
  • Profile customization:
    • Avatar/profile picture upload
    • Username editing

βž• Post Creation

  • URL-based image import
  • Direct file upload
  • Metadata configuration:
    • Post title
    • Detailed description
    • Category selection
    • Tag system for discoverability

πŸ” Authentication & Security

  • User registration system
  • Secure login with session management
  • Password hashing (industry-standard encryption)
  • Session persistence and remember-me functionality
  • Account logout functionality

βš™οΈ Additional Features

  • User menu modal with account options
  • Developer console easter egg with creative styling
  • Fully responsive and mobile-optimized design

πŸ› οΈ Technology Stack

Layer Technologies
Frontend HTML5, CSS3, JavaScript (ES6+)
Backend PHP 7+
Database MySQL
Server XAMPP/Apache

πŸ“Š Project Statistics

  • PHP: 73.4%
  • CSS: 16.7%
  • JavaScript: 7.2%
  • Hack: 2.7%

πŸš€ Installation & Setup

Prerequisites

  • XAMPP (or Apache with PHP and MySQL)
  • PHP 7.0+
  • MySQL 5.7+

Steps

  1. Clone the repository

    git clone https://github.com/Frade11/Pinto.git
    cd Pinto
  2. Configure XAMPP

    • Place project in htdocs directory
    • Start Apache and MySQL services
  3. Database Setup

    • Create a new MySQL database
    • Import the provided SQL schema
    • Update database credentials in config files
  4. Run the Application

    • Navigate to http://localhost/Pinto
    • Create an account and start sharing content

πŸ’‘ Key Development Highlights

Security Implementation

  • βœ… Password hashing with secure algorithms
  • βœ… Session-based authentication
  • βœ… SQL injection prevention
  • βœ… XSS protection measures

User Experience

  • βœ… Intuitive navigation and layout
  • βœ… Smooth animations and transitions
  • βœ… Fast image loading optimization
  • βœ… Responsive and adaptive layouts
  • βœ… Accessible UI/UX patterns

Code Quality

  • βœ… Modular architecture
  • βœ… Clean, maintainable code structure
  • βœ… Efficient database queries
  • βœ… Responsive and adaptive layouts

πŸ“± Responsive Design

The application is fully optimized for all devices:

  • πŸ“² Mobile phones (320px+)
  • πŸ“± Tablets (768px+)
  • πŸ’» Desktop (1024px+)
  • πŸ–₯️ Large screens (1920px+)

🎨 Visual Design

  • Clean, modern interface inspired by Pinterest
  • Smooth transitions and micro-interactions
  • Professional color scheme and typography
  • Consistent design language throughout

πŸ“ Usage Examples

Creating a Post

  1. Navigate to "Create Post" section
  2. Upload image via URL or direct upload
  3. Add title, description, and category
  4. Add relevant tags for discovery
  5. Publish to your profile

Managing Content

  1. Visit your profile
  2. Switch between Liked, Saved, and My Posts tabs
  3. Edit or delete your own posts
  4. Update profile information

πŸ”„ Future Enhancements

  • Social following system
  • Comment functionality
  • Advanced search and filtering
  • Real-time notifications
  • White mode theme
  • API endpoints for mobile apps

πŸ‘¨β€πŸ’» Developer

Frade11 - Full Stack Web Developer

  • Proficient in PHP, JavaScript, CSS, and MySQL
  • Experienced in building responsive, user-centric web applications
  • Skilled in security implementation and best practices
  • Passionate about clean code and excellent UX/UI design

πŸ“„ License

Β© 2026 Your Name.
All rights reserved.

This project is not open source.
You may view this repository, but copying, modifying, or distributing this project is not allowed without explicit permission from the author.


🀝 Contributing

This project is maintained solely by the author.
No contributions, forks, or pull requests are accepted.


Made with ❀️ by Frade11

⭐ If you find this project helpful, please consider giving it a star!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors