mtisby / paint-app

Poodle Doodle is a web app that allows you to doodle and to checkout other people's doodles. Whether you want to draw with a pen, or use shapes, Poodle Doodle can make your visions come to life.

Home Page:https://poodledoodle.onrender.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

This project is a web app made to release your inner child. Use your creative side to doodle with Poodle Doodle here

πŸ’» What it does

Poodle Doodle is a web app that allows you to doodle and to checkout other people's doodles. Whether you want to draw with a pen, or use shapes, Poodle Doodle can make your visions come to life.

app-preview

view the full video here

  • Create an account
  • Go to the Sketch tab
  • Select a photo or color for your background
  • Select a pen or shape tool
  • Select a color
  • Get started!

πŸ”¨ Installation

Clone the repository and run the following in your terminal:

> npm i

This installs all neccessary packages. Mext, run the following:

> node app.js

In a separate terminal run the following:

> mongod

This activates MongoDB on your local device; however, note that cloning this repo to your local device means that the database will be empty. To see the full effect of the web app, create an account to put your first bit of data into your local database.

πŸ”¨ How we built it

Tools Used

Languages Used
  • JavaScript
  • EJS
  • CSS
Frameworks
  • Express
Cloud Storage & Databases
  • MongoDB
  • Cloudinary
Libraries Used
  • ejs
  • express
  • express session
  • mongo
  • mongoose
  • passport

🧠 Challenges we ran into

One of the challenges I had to overcome was managing image storage. Because the prompt was to create a digital art app and I wanted to create a full stack application, image storage was a huge issue. I was originally going to use Cloudinary to upload images but I realized users could essentially upload as many images as they wanted and I would quickly run out of free storage. So instead I converted image urls to dataurls and stored the dataurls in our Mongo database. That way we minimize image storage but images are still accessible across browsers.

πŸ… Accomplishments that we're proud of

  • I created my first art-based app
  • I got more familar with event-listeners
  • This is the fastest I have ever deployed a full stack application

πŸ”œ What's next for Poodle Doodle

Up next we will be adding more social features such as messaging, sharing, and following fellow Doodlers!

✨ Contact Me

The Engineer:

Mariel Tisby

LinkedIn

Website

About

Poodle Doodle is a web app that allows you to doodle and to checkout other people's doodles. Whether you want to draw with a pen, or use shapes, Poodle Doodle can make your visions come to life.

https://poodledoodle.onrender.com/


Languages

Language:JavaScript 43.2%Language:EJS 32.0%Language:CSS 24.8%