--Team Disney Villains--

Welcome to Wish Upon a Star!

Wish Upon a Star is a web page where users can choose a picture on the site and color it away with the colors of their choice. This is a place for users from any age to relax and express their imagination and creativity through beloved Disney characters. As Disney fans, our team came up with the idea for this website because we wanted to apply the materials learned in class, while creating something that is unique and enjoyable for users and most importantly ourselves!

The website features a fun, eye-catching UI, with functionalities that are intuitive to be used by users from any age. For future iterations, we hope to add the option for guest users to add their colorings, as well as improve the user flow even further after we've collected enough beta feedbacks.

Live Website

Tech Stack

The application is a full-stack service that is built using the MERN stack as well as external libraries and tools.

Back end

• Environment: Node.js
• Framework: Express.js
• Authentication: JWT
• Database: MongoDB

Front end

• Javascript
• React
• React Hooks

Some external libraries include: mongoose, cors, axios, react-bootstrap

Other tools: Adobe Illustrator , Inkscape , Convertio.io, Insomnia, Chrome DevTools

Team Disney Villains

Shyla Suri (ssuri)

Vy Thai (Thaivy)

Laura Worboys (lauraworboys)

Main Features

• Create an account / sign in / sign out
• Browse and color provided images
• Save / delete / edit / colored images
• Download colored images as pngs
• Publish / unpublish colorings to be displayed at the public Showcase
• Browse all users' published colorings

Screenshots

How to run

1. Make sure Node is installed
2. Clone project locally
3. npm install in root
4. npm run dev in root
5. Navigate to http://localhost:3000 to view project locally

References

Preparing and coloring svgs

MERN stack tutorial

MERN stack authentication tutorial

Heroku deployment tutorial