Flickshare App

The Flickshare App is directed for anyone who really has a hard time finding suggestions on what to watch next! The app allows users to create an account and custom lists of movie interests, which may then be used to generated a list of movie suggestions and store them for coming back to it later.

---

Working Prototype

Client Live:

https://flickshare-client.vercel.app

API URL

https://cryptic-badlands-24275.herokuapp.com

API GitHub:

https://github.com/dionisggr/flickshare-api

---

User Stories

• As a prospective user
  • I am landed in the Welcome Page
  • I can see the week's top movie suggestions per category
  • I can navigate to the Register and Login pages
  • I can see more information about a movie
• As a registered user
  • I can create and name a list
  • I can search for a movie to select for a list
  • I can search, edit and delete my list
  • I can browse top public lists
  • I can see more information about a movie
• As an Admin
  • I can see, edit and delete users
  • I can see and add movies
  • I can see, edit and delete lists
  • I can reset user suggestion lists

---

Technology

• Front-End: React.js, CSS3, HTML5, Javascript, API fetch
• Back-End: Javascript, Node.js, Express.js, Knex.js, PostgreSQL, Mocha, Chai, Supertest, Nodemon, Postgrator, Dotenv, JWT, Bcrypt, Morgan, XSS, CORS, Helmet, HTML5, CI scripts
• Development Environment: Vercel, Heroku, DBeaver, Postman

---

Functionality

The app's functionality includes:

• Every User
  • May create an account
  • May browse public suggestion lists
  • May read full movie information
• Registered User
  • May edit and delete their account
  • May create, edit and delete their lists
  • May generate suggestions from other lists
  • May search for any movie
• Admin
  • May see a list of all users
    • May create, edit and delete any user
  • May see a list of all lists
    • May create, edit and delete any list

---

Front-End Structure

• Index.js - (stateless)
  • App.js - (stateful)
    • Header.js - (stateless)
    • MainMenu.js - (stateless)
    • Register.js - (stateless)
    • Login.js - (stateless)
    • WelcomePage.js - (stateful)
      • Login.js - (stateful)
      • Register.js - (stateful)
    • Lists.js - (stateful)
    • List.js - (stateful)
    • Suggestions.js - (stateful)
    • Movie.js - (stateful)
      • MoviePreview.js - (stateful)
        • MovieOptions.js - (stateful)
    • MovieSearch.js - (stateful)
    • Admin.js - (stateful)
      • Users.js - (stateful)
    • User.js - (stateful)
      • UserPreview.js - (stateless)
    • UserEdit.js - (stateful)
    • Error.js - (stateless)
    • ErrorBoundary.js - (stateful)
    • Footer.js - (stateless)

---

Screenshots

Welcome Page

Login Page

Signup Page

Home Page

User Page

User Lists

User List

List Edit

List Page

Suggestions Page

Movie Search Page

---

Development Roadmap

This is v1.0 of the app, but future enhancements are expected to include:

• Implementation of movie likes
• Implementation of list likes
• Sending movie-list suggestions
• Copy other user's lists