Note: this repo was cloned from my university's Github where we originally used for development

--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

Presentation

Presentation Slides

Presentation Video

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

Vy Thai

Laura Worboys

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

Files Structure

root

• build files (package.json, node_modules directory, etc)

src

• files(App.js, App.css etc.)
• components
  • component files (coloringPage, imageGallery, etc)
  • images
    • coloring images components
    • svgs
  • misc
• assets (images, patterns, etc)
• context (userContext)

backend

• files (server.js, backend package.json, node_modules, etc.)
• middleware
• models
• routes

public

• index.html
• favicon, manifest, etc

Repository Structure

Folder	Description
docs	Design documents, proposal, slides PDFs
backend	middleware, models, routes
public	index.html, favicon, manifest etc
src	React components, Images, CSS files etc

Branch	Description
master	main development branch
final	Heroku deployment branch
other branches	specific features development

References

Preparing and coloring svgs

MERN stack tutorial

MERN stack authentication tutorial

Heroku deployment tutorial