/moodyMemes

Moody Memes 2.0: Track your Mood in Memes!

Primary LanguageJavaScript

Moody Memes 2.0: Track your Mood in Memes over Time!

đź”—Live Link

About

Moody Memes 2.0 is a React application that allows authenticated users to track their mood in memes over time, by allowing users to type in their mood of the day, choose a meme/gif that best represents their mood, and save their 'Moody Meme' to the timeline. Users can sign-up for an account using an email address and password, via Google Sign-In, or as an anonymous user.

This project is a solo extension to Moody Memes (Repo), a team-based React project completed at Juno College, with Brittany Freitas, Daniel Butcher and Kwame Appiah-Kubi.

Features

Moody Memes 2.0 features:

  • CRUD (Create, Read, Update, Delete) functionalities for saved memes
  • User authentication with Firebase
  • Session persistence (user remains logged within the same session)
  • Anonymous user Sign-In
  • Timeline features saved memes by users
  • Users can only delete memes that they generated
  • Usage of React features and hooks (useState, useEffect, useContext, useNavigate, useRef, Link, Router, props, components, custom hook)
  • Firebase (User Authentication, Realtime Database)

Project Demonstration

gif that shows a project demo of how user will use Moody Memes 2.0

Views

Tablet View (with user logged in)

tablet view of the landing/home page of Moody Memes 2.0

Mobile View (with user logged in)

mobile view of the landing/home page of Moody Memes 2.0

Mobile View (on hover of user icon)

mobile view on hover of the user icon which shows user email address on landing/home page of Moody Memes 2.0

✨Moody Memes 2.0 is graciously powered by the Giphy API.