UFO Catcher

Web application entices users to view official UFO sighting reports and determine them to be, in fact, "alien," or bogus, "not alien" claims. Do you believe?...

Contents

Deployed Application

[Heroku] https://fast-eyrie-14169.herokuapp.com/

Video Introduction

[Vimeo] https://vimeo.com/245741367

Inspiration

National UFO Reporting Center "UFO Sightings" Database

[Kaggle] https://www.kaggle.com/NUFORC/ufo-sightings

Meet Larry

Old Man Larry

Roles

Jessica Lin - Co-COO, UI Director, Back-end
- Threejs & environment design
- Chart.js & required API-routes
- Navigation bar
- Github (https://github.com/jessicalin58)
Laura Boetcher - Co-COO, Back-end, SVG Apprentice
- Sequelize API-routes for voting
- Voting functionality
- Session-based vote log
- Github (https://github.com/g33klaura)

Technologies Used

Node, Express, MySQL, Sequelize, Threejs, Chart.js, Maya (JsonLoader), SVG, jQuery, Javascript, CSS, HTML

Concept & Motivation

Feel (music/visuals)
Text (ASCII/terminal look)
Voting

Challenges

Threejs

Sequelize

Cursor

Hand cursor on mouse hover

Animated Effects

Glitch effect on application title

Glitch effect on message

Snackbar popup "vote logged"

Abandoned elements

Upvote (jQuery plugin)
NProgress (javascript progress bar)
Transitions with Barba.js
User-submitted data
Animated screen loader
SVG button effects

Transitions with Barba.js

User-submitted data

Animated SVG "cow loader"

SVG with gitch effect

SVG in `<object>` tag, uses CSS `fill` property on hover

Future Features

User authentication
- User can mark favorite entries
- User can add own sighting data
- User can fork comments, edit for spelling, etc.
Expanded chart options
- More data choices
- User-selected data content
Newspaper image generator
- Render headlines of favorite/ most popular entries
- Shareable/printable
Interactive graphics
- Spacecraft changes color, lighting, etc.
- Little green men to make appearances
- Additional clickable elements
eCommerce integration
- "I Voted" stickers
- Fashionable aluminum hats
- "UFO Catcher" branded binoculars, t-shirts, etc.

Testing

Credits

CSS Glitch Effect by Chris Coyier (https://codepen.io/chriscoyier/pen/yqHxB)
Interactive Solar System by Nikita Skargovskii (https://codepen.io/nikita_ska/pen/bqNdBj)
Music from Ambient Epicuros (https://www.youtube.com/watch?v=ORNfEC1q2EU&t=511s)
Banner Alien Icons by corpus delicti on Noun Project (https://thenounproject.com/term/banner-alien/1040564/)
StackOverflow
Codyhouse
CodePen
And thank you curious aliens for visiting Earth 👽 🚀 🌠

jessicalin58 / ufo Goto Github PK

ufo's Introduction