🧑🏻‍🎨 Pocket Palette

Unleash your creativity with our lightweight online design platform!

🪄 Live demo

Click here for live demo. Credentials below:
Username: test@pocket.com
Password: chicken

📖 Table of Contents

• General Info
• Planning & Problem Solving
• Built With
• Getting Started
• Features
• Screenshots
• Room for Improvement
• License
• Contributing
• Contact
  
  

📄 General Info

Pocket Palette is a web-based application that offers a platform for exploring artistic concepts like painting, pixel drawing, and Etch A Canvas. With a focus on user interactions and practical artistic expression, Pocket Palette enables users to effortlessly unleash their creativity by creating, drawing, and manipulating shapes, lines, and a diverse palette of colors on a virtual canvas. By utilizing modern web technologies, such as Supabase and JavaScript frameworks like React, Pocket Palette delivers an immersive and feature-rich drawing experience.

This project, led by Dom, Karen, Riley, Roxanne, and Stuart, is a collaborative effort representing our third undertaking within the General Assembly Software Engineering Immersive course. With the aim of embracing a challenging endeavor that elevates our skills and knowledge in web development, our diverse team, spanning three different time zones, effectively collaborates to ensure continuous progress on the project.

✏️ Planning & Problem Solving

🦾 Built With

⚙️ Getting Started

Prerequisites

Please note that these instructions assume you have Node.js and npm installed on your machine. If not, please install them before proceeding.

Node.js

Head to Node.js and install the correct version for your operating system.

npm

npm install npm@latest -g

Installation

You can clone this repository and run it locally on your machine. Use the following command to clone the repository:

git clone https://github.com/Griffy92/Pocket-Palette.git

Running the Project

After cloning the repository, navigate to the project directory and install the necessary dependencies. Given that this project uses Vite, you can use the following commands:

cd Pocket-Palette
npm install
npm run dev

🎨 Features

There are four aspects to Pocket Palette at the moment: User Authentication, Paint, Pixel and Etch A Canvas.

• User Authentication

  Register, Login, Password Reset, Logout, My Gallery (Ability to upload and save or delete artwork)

• Paint

  Shapes, Drawing, Text, Reset, Pan Mode, Canvas History, Layers, Group and Ungroup, Save to My Gallery, Image Filter, Upload Image and Export SVG/JPEG/PNG

• Pixel

  Pencil, Erase, Fill, Clear, Colour Select, Save, Undo and Redo

• Etch A Canvas

  Up, Down, Left, Right, Shift + Up(NE), Shift + Down(SW), Shift + Left(NW), Shift + Right(SE) and Shake to Clear (Wiggle your mouse cursor)
  
  

📸 Screenshots

Login Page

Home Page

Paint

Draw

Text

Image Filter

Pixel

Etch A Canvas

My Gallery

🚀 Room for improvement

• Improved UI
• Fix the unauthorized access to key functionality
• Incorporate an eraser function into the Paint feature for more versatile editing options
• Optimize the application to ensure mobile compatibility and a seamless user experience on all devices
• Edit saved artwork from My Gallery
  
  

🔐 License

No specific license has been assigned to this project.

🌱 Contributing

Contributions are welcome! If you would like to contribute to this project, please follow these steps:

• Fork the repository
• Create a new branch for your feature or bug fix
• Make your modifications and commit changes
• Push your changes to your forked repository
• Submit a pull request explaining your changes
  
  

📧 Contact

• Dom -- dominicwong09@gmail.com
• Karen -- karenliang9546@gmail.com
• Riley -- riley.mercer4@gmail.com
• Roxanne -- roxanneliu819@gmail.com
• Stuart -- stuartcannone@gmail.com