Logline -- My cs260 Startup

My class notes

Logline is a web app that allows users to log, share, and read short 1-2 line film reviews. Users can read through the newest reviews as well as look back on their own previous reviews or their friend's.

🚀 Specification Deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Proper use of Markdown
• A concise and compelling elevator pitch
• Description of key features
• Description of how you will use each technology
• One or more rough sketches of your application. Images must be embedded in this file using Markdown image references.

Elevator pitch

Would you like to share your enthusiasm for a particular movie with your friends? Want to know that people are saying about the latest blockbuster? The Logline application allows you to read and publish short reviews on new and classic films.

Design

The startup has 5 pages:

1. Register/Login - regiser/login page. includes a random movie quote under startup logo
2. Reviews - this is where the latest reviews are listed
3. ViewProfile - this is where a user can view their own profile (from nav bar) or another user's profile (linked from a review)
4. EditProfile - this is where a user can edit their own profile -- add a bio, name (maybe allow to change username?)
5. PublishReview - this is where a user can create a new review

Design pages sketches

1. Register/Login
   

2. Reviews
   

3. ViewProfile
   

4. EditProfile
   

5. PublishReview
   

Design sequence diagram

Here is a simple sequence diagram showing how a user interacts with my server to publish changes as well as view their and their friends' profiles/reviews:

sequenceDiagram
    box user browser
    actor user
    end

    box myApp
    participant Server
    end

    box friends' browsers
    actor friends
    end

    friends->>Server: publish review / edit profile
    user->>Server: publish review / edit profile
    Server->>user:  send recent reviews / profile

Loading

Key features

• User can publish their own movie review
• User can view page of latest reviews
• User can view user profiles and edit their own
• User can see log of previous their own reviews
• Ability to like a review

Technologies

I am going to use the required technologies in the following ways.

• HTML - Uses correct HTML structure for application. Hyperlinks to navigate pages.
• CSS - Application styling that looks good on different screen sizes, and uses good whitespace, coloring choices, and contrast.
• React - Description here
• Service
  • Backend service with endpoints for:
    • login
    • retrieving reviews/profiles
    • submitting new reviews
    • editing user profile
  • Third party service for getting random movie quote
• DB/Login - DB stores user profiles, reviews. Registering user adds them to DB which securely stores login credentials. User's can't publish review unless authenticated.
• WebSocket - User receives an alert when one of their reviews gets a like.

🚀 AWS deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Server deployed and accessible with custom domain name - https://logline.click.

🚀 HTML deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• HTML pages - index.html for login/register, publishReview.html to publish a new review, reviews.html to read reviews, viewProfile.html to view reviewers profile (including the user's own profile), editProfile.html to edit the user's own profile
• Proper HTML element usage - I did not complete this part of the deliverable.
• Links - Nav links between each page. Username of review links to view profile.
• Text - I did not complete this part of the deliverable.
• 3rd party API placeholder - placeholder on index.html for movie quote API
• Images - FilmStrip image on index.html page and icon on each page.
• Login placeholder - Login/Register placeholder on index.html
• DB data placeholder - review data and profile data will be stored in DB.
• WebSocket placeholder - place holder in reviews.html for likes to update live and/or user to be notified when their review receives a like

🚀 CSS deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Header, footer, and main content body - CSS for header footer and main is implemented main.css
• Navigation elements - navbar with navlinks - active page is highlighted
• Responsive to window resizing - used a lot of flex and some display changes on media (see main.css)
• Application elements - includes elements for application
• Application text content - includes application mock text
• Application images - includes images

🚀 React part 1: Routing deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Bundled using Vite - installed vite using npm and setup project directory with src and public folders
• Components - created a app with a header and footer with a router to components for login, reviews. etc
• Router - Routing between login and browse reviews, profile, etc. components.

🚀 React part 2: Reactivity

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• All functionality implemented or mocked out - Everything works locally except for user getting like notifications are mocked out (to implement with web socket). Service calls mocked out to use localStorage data but works for multiple users locally. Since everything is saved to local storage multiple users can login (at separate times of course) and view/edit/like reviews/profiles.

Only the login and browse reviews pages are available to all users (however unauthorized users cannot like reviews). Everything else must be accessed by an authorized user.

• Hooks - Used hooks to render reviews, forms, profiles

🚀 Service deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Node.js/Express HTTP service - Use Express to handle HTTP requests on application backend
• Static middleware for frontend - serve front end via public folder
• Calls to third party endpoints - Login.jsx calls a movie database to get a poster url (searches by movie title)
• Backend service endpoints - Added and tested endpoints through curl. backends for auth, profile, reviews, likes, and some movie quotes
• Frontend calls service endpoints - front end calls backend

🚀 DB/Login deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• User registration - registration creates a new user and returns an authtoken.
• User login and logout - login/logout updates/removes authtoken (only 1 authtoken per user).
• Stores data in MongoDB - DB stores reviews (including review likes), profiles, and users
• Stores credentials in MongoDB - User name and password are stored in user collection in DB. Password is encrypted by back end service before it is stored in DB.
• Restricts functionality based on authentication - back end services require auth

🚀 WebSocket deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Backend listens for WebSocket connection - back end listens for incoming requests by proxying http requests ending with /ws
• Frontend makes WebSocket connection - frontend makes websocket connection on browse page, where notifications are also displayed
• Data sent over WebSocket connection - on any like (from any page), a broadcast is sent out to other users
• WebSocket data displayed -Web socket data displayed at top of browse page as notifications
• Application is fully functional - Application done!!