| Paint | Between the Lines

Project III

MERN stack Colouring App

---

Table of Contents

1. Group Members
2. Links
3. Usage
   • Screenshots
4. Installation
   • PWA
5. Tech used
6. User Story
7. Credits

---

Group Members

• Jess
• Andrew

---

Links

GitHub repository: Colouring Repo

The link to the heroku: Deployed Application

---

Usage

Paint Between the Lines is a react colouring app. Users can sign up for an account to be able to save progress. Upload an avatar image and complete a colouring book of several images. Add some colour to your world to help brighten your day. If you don't like your work feel free to click on clear colouring book to undo all of your work and try again.

Screenshots

Image below shows a colored in colouring page

Image below shows the profile page

Here is the Signup page with Darkmode enabled. Selecting a favourite colour will be saved and color the ring around your avatar image.

---

Installation

After download run npm install

npm run develop from root folder to start development mode

To see backend running suggested to run Robo 3T Documentation or Apollo/graphql Sandbox

Front end visibility improved with apollo, react dev tools

PWA

Feel free to download the progressive web app version to your mobile or desktop by clicking on item below

---

Tech Used

• Apollo Server Express
• Apollo Client / React-Hooks
• Graph QL
• Mongoose
• Nodemon
• Node Js
• Chakra UI
• React
• React Color
• React Router Dom
• Bootstrap
• Concurrently
• Json Web Token
• Heroku / Mongo Atlas

---

User Story

AS A user

• I want fill sections of multiple colouring pages by a colour of my choice
• I want to be able to create an account and to enable saving colouring pages
• I want to upload an avatar photo and personalize my experience

---

Credits

Inspiration for this app from this article

Paint Between the lines 🎨