Sketchy
--
Brief Description
A sketch app where you make a drawing/sketch based off a random prompt. This image can be saved, edited, and deleted.
MVP: Basic CRUD app for sketches
Dream App: An app where you can play telephone pictionary and have a hilarious time.
--
Explanation of Technologies Used
Backend:
- Node.js
- Packages: Express, Mongoose, EJS Layouts, Bcrypt, body-parser, connect-flash, MongoDB, cookie-parser, dotenv, morgan, passport-local, passport-google-oauth2
Front-End:
- JavaScript
- HTML
- jQuery
- Bootstrap
--
Planning Docs
Screenshot of ERD
--
--
Approach Taken
1. Lots of Planning
After deciding on our project, we spent the first night reading through documentation so we could appropriately split up the work without interrupting each other too much.
Our Trello board helped immensely with this:
2. We executed the simple stuff first
In the first day, we were able to complete the basics of our app including login, a user model and a sketch model. We also had a working canvas for drawing.
3. Communication and Daily Stand-ups
After we completed the foundation, the rest of the project was a bit more complex. We broke up the pieces into smaller parts and worked together to figure out complex bugs.
4. Polish
Once we had most of our MVP complete, we did a lot of testing to find bugs and correct them and finalize issues.
--
Major Hurdles & Victories
- Staying on top of merge conflicts
- Fixing the edit and update bugs
--
If we had more time:
- Make code more DRY and clean
- Add canvas edit
- Add web sockets for playing pictionary
- Reveal the giphy photo after
- Add more dream features (see Trello ICE board) __
Installation Instructions
For easy-start, go to this heroku app: http://sketchyapp.herokuapp.com/
To run this app, locally, you will need to register for your own API keys and do these following steps:
-
Fork it over to your git hub.
-
Do a git clone in your terminal from your github.
-
Add a .env file to your root of your application.
-
Get an APIKEY from Giphy
-
Get a Client ID and Client secret from Google Developers API
-
API keys should have no space in them. Use these
- APIKEY=**************
- CLIENTID=*************
- CLIENTSECRET=*********
- GOOGLECALLBACK=http://localhost:3000/auth/google/redirect
- Run npm install to install all packages
- Open up a new tab and run $mongod (If you don't already have Mongo, you will need to do a brew install)
- Open up another new tab and run $nodemon (If you don't already have Nodemon, you will need to do a brew install)
- Save your code and enjoy Sketchy!
--