PixelPal is a full-stack web application for sharing and discovering pixel art. Users can upload their pixel art creations, make them public or private, comment on other users' artwork, and react with likes or dislikes. The platform features user profiles with customizable profile pictures and a gallery to browse public artwork.

• User Authentication: Sign up and log in to access the platform
• Image Upload: Upload pixel art images with titles and descriptions
• Privacy Control: Choose to make images public or private
• Gallery: Browse public pixel art from all users
• User Profiles: View individual user galleries and profile pictures
• Comments: Leave comments on images
• Reactions: Like or dislike images
• Responsive Design: Built with React and Bootstrap for mobile-friendly experience

• Django: Web framework
• Django REST Framework: API development
• SQLite: Database
• Pillow: Image processing
• django-cors-headers: CORS handling

• React: UI library
• React Router: Client-side routing
• Axios: HTTP client
• Bootstrap: CSS framework
• React Bootstrap: Bootstrap components for React

• Python 3.8+
• Node.js 14+
• npm or yarn

1. Clone the repository (if not already done):

   git clone https://github.com/Dan1e1B/PixelPal.git
   cd PixelPal

2. Create a virtual environment:

   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install Python dependencies:

   pip install django djangorestframework pillow django-cors-headers

4. Apply database migrations:

   python manage.py migrate

5. (Optional) Create sample users:

   python manage.py shell < Create_users.py

   This creates sample users with usernames: Maria, Ana, Rui, Rita, Joao, Ines (password: 12345)

6. Start the Django development server:

   python manage.py runserver 8000

   The backend will be available at http://localhost:8000

1. Navigate to the frontend directory:

   cd pixel_art_frontend

2. Install Node.js dependencies:

   npm install

3. Start the React development server:

   npm start

   The frontend will be available at http://localhost:3000

1. Open your browser and go to http://localhost:3000/pixelart
2. Sign up for a new account or log in with existing credentials
3. Explore the gallery to view public pixel art
4. Upload your own pixel art creations
5. Visit user profiles to see their artwork
6. Comment on and react to images

The backend provides the following main API endpoints:

• GET /pixelart/images/ - Get public images
• GET/POST /pixelart/user/{username}/images/ - Get/Post user images
• DELETE /pixelart/user/{username}/images/{id}/delete/ - Delete image
• GET/POST /pixelart/images/{id}/comments/ - Get/Post comments
• POST /pixelart/images/{id}/reactions/ - Add reaction
• GET/POST /pixelart/user/{username}/profile-pic/ - Get/Post profile picture
• POST /pixelart/login/ - User login
• POST /pixelart/signup/ - User registration
• POST /pixelart/logout/ - User logout

PixelPal/
├── my_site/                 # Django project settings
├── pixel_art/               # Django app
│   ├── models.py           # Database models
│   ├── views.py            # API views
│   ├── serializers.py      # DRF serializers
│   └── urls.py             # URL routing
├── pixel_art_frontend/      # React frontend
│   ├── src/
│   │   ├── pages/          # React components
│   │   └── index.js        # App entry point
│   └── package.json
├── media/                   # Uploaded images
├── db.sqlite3              # SQLite database
└── manage.py               # Django management script