Painting With Pixels

Where users can color the pixels and create a painting on 3x3 grid

Live Version

This repo contains the client-side React app. Looking for the back-end Painting-With-Pixels API? Click Here

Introduction

User can create or view any existing painting. Color can be selected from a palette of 10 colors. Each painting have 9 cells represting one of the colors of the grid.

Screen Captures

Landing Page and Start Painting:

Home Page listing all existing paintings:

New Painting:

Edit existing Painting:

Technology

Front End

• React
  • Create React App
  • React Router
• HTML5
• CSS3
  • CSS Modules

Testing

• Jest

Production

• Heroku Cloud Application Platform

Install and run locally

*** NOTE: The client makes AJAX calls to the Painting With Pixels API, which should also be running in your development environment

• Clone this repository:

  • git clone https://github.com/supu4aqua/painting-with-pixels-app.git

• Move into folder:

  • cd painting-with-pixels-app/

• Run npm install

• Run npm start

• In browser, navigate to localhost:3000 or your specified port

• To test, run npm test

Future Features

• Increase the grid-size to 6x6 or even larger
• Add custom colors manually
• Add users accounts/make it multi-user
• Dashboard for each user
• Undo-Redo a painting
• User rating for a painting