dreamboat Dreamboat is a gamified dating app with a twist. A mystery dater, with a premium membership, gets to field potential matches by imagining his or her perfect dreamboat via a selection of ideal traits identified through a personality quiz. The "catches" with the closest match to the user’s desired traits get a chance to be considered for a connection. The user is always in control and the catches need to guess their way towards impressing them.
Core Features / Goals
The user sets their public profile with an inspirational image (the dreamscape) and a mantra or quote. The user then fills out their desired traits by giving thumbs up or down responses to the personality quiz. Those responses remain secret. The catches can browse mystery user dreamboats and attempt to impress one, but they do not have visibility of the mystery users' personality profile answers. They can only see a mystery user’s dreamscape and mantra. If their answers match up enough to the mystery user’s they will be made available for the mystery user to consider. Only the mystery user can see actual photos of suitors and the answers to their personality quiz, and only the mystery userer can initiate contact. Every day the mystery user is served up a selection of catches that match their criteria.
Each mystery user has the ability to create, update or delete their dreamboat and persona quiz, as well as contact their catches. Catches can update, edit and delete their profiles, persona quiz responses and reactions, as well as respond to mystery user contact.
Frontend - React
Frontend Deployment - Netlify
WireFrame Images
Landing Page - Desktop
Mystery User Login Page - Desktop
Catch Detail View - Desktop
Catch Login Page - Desktop
Component Heirarchy
root
|__ client
|__ public
|__ index.html
|__ src
|__ components
|__ shared
|__ Header.jsx
|__ Layout.jsx
|__ Quiz.jsx
|__ Home.jsx
|__ DreamBoatCreate.jsx
|__ DreamBoatEdit.jsx
|__ CatchesMosaic.jsx
|__ CatchDetail.jsx
|__ CatchProfileCreate.jsx
|__ CatchProfileEdit.jsx
|__ CatchReactionsCreate.jsx
|__ CatchReactionsEdit.jsx
|__ PersonaQuiz.jsx
|__ SignIn.jsx
|__ SignUp.jsx
|__ services
|__ api-helper.js
|__ App.js
|__ App.test.js
|__ index.js
|__ serviceWorker.js
|__ setupTests.js
|__ .gitignore
|__ README.md
|__ package-lock.json
|__ package.json
Component Breakdown
Component | Type | State | Props | Description |
---|---|---|---|---|
Header | Functional | No | No | Contains navigation and logo |
Layout | Functional | No | Yes | Is the main container page for all app content |
Quiz | Class | Yes | Yes | Contains users' and catches' personality quiz responses via thumbs up or thumbs down button displays |
Home | Functional | No | No | Landing page, includes logo, prompts to login or sign up, and app positioning |
DreamboatCreate | Class | Yes | Yes | Contains form to add new dreamscape photo and mantra for dreamboat |
DreamboatEdit | Class | Yes | Yes | Contains form to edit dreamboat |
DreamboatUserPage | Class | Yes | No | Greets users with their name. Displays user's dreamboat, rendered personality quiz, as well as a mosaic of their catches |
CatchesMosiac | Functional | No | Yes | Contains a grid of photos / mosaic of user's catches. On clicking a grid photo user will be directed to catch detail view page |
CatchDetail | Functional | No | Yes | This page displays details of catch profile including their photo, decription of physical attributes and what they are looking for. It includes their personality quiz responses and their reactions. It greets the user by name and tells them the percent extent of their match with the catch. It prompts the user to chat with the catch or hide them |
CatchProfilePage | Functional | No | No | Greets catch with their name and lets them know how many times they have been matched in the past 5 days as well as how many chats requests they have. They can click on the chat requests icon to access their chats and participate. The page displays catchs' rendered personality quiz and their rendered profile information. It provides an onclick icon that directs catch to the profile edit page. It also displays their personality quiz reactions |
CatchProfileCreate | Class | Yes | Yes | Contains form to add a new catch profile including photo, name, age, height, status, and what they are looking for |
CatchProfileEdit | Functional | No | Yes | Contains form to edit catch profile information |
CatchReactionsCreate | Class | Yes | Yes | Contains input form for catchs' commentary on quiz items. Displays their rendered quiz responses |
CatchReactionsEdit | Functional | No | Yes | Contains form to edit catchs' comments form |
Login | Class | Yes | No | Contains login form |
SignUp | Class | Yes | No | Contains register form |
Backend - Ruby on Rails
Backend Deployment - Heroku
Data Heirarchy - expected endpoints from API
/home
/user/:id
/user/:id/create
/user/:id/update
/user/:id/catch
/user/:id/catch/chat
/catch/:id
/catch/:id/create
/catch/:id/update
Dependancies
Library | Description |
---|---|
axios | To make and get requests to API |
CORS | frontend rendering middleware |
Framer-motion | Page transitions |
React Router | Link and Route components |
React | user interface rendering |
Rails | server-side framework |