Skip to content

TDManning/mood_boost_fe

 
 

Repository files navigation

🌟 Mood Boost 🌟

Visit Mood Boost for a daily dose of joy, laughter, and positivity!

Experience uplifting moments through jokes, inspirational quotes, and fun interactive features.

🔗 Try Mood Boost Now!

Purpose

The Mood Boost App is designed to enhance users' emotional well-being through engaging and interactive features and was built using a Service-Oriented Architecture (SOA) with a Rails API backend and React frontend.

Goals

  • Deliver a Functional Solution: Address a real-world problem with practical and user-friendly features.
  • Emphasize Team Collaboration: Foster teamwork, project management, and decision-making skills in a multi-app system.
  • Enhance Professional Readiness: Provide hands-on experience with SOA, external APIs, and deployment, preparing developers for industry challenges.
  • Prioritize User Empathy: Create an inclusive, user-centered design by developing detailed user stories and conducting equity analyses.

Mood Boost App

Home Page

Home Page

Joke Page

Joke Page

User Activity Graph

User Graph

Responsive Design

Responsive Design

Getting Started

Clone down the resposity to your location machine, cd into the direcotry and run:

  • npm install

To see the front end application functioning from the command prompt run:

  • npm start

This will allow you to use the spinner and the menu bar to navigate through all of the pages and see the application functioning. To utilize the user login portion you will also need to clone down the backend server and have it up and running as well.

Technology Used

  • React v19.0
  • React Router v7.1

Prerequisites

To use the user login functionality you will be required to have the Mood Boost Backend Repo installed and running.

Test Suite

End to End testing was done with Cypress. To run the test suite you will need to install Cypress with:

  • npm i -D cypress

Then update your package.json file by adding: "cypress": "cypress open" to your "scripts" section.

To run Cypress from the command line type:

  • npm run cypress

Contributors

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 60.4%
  • CSS 35.9%
  • HTML 3.7%