node-jsreactmongodbjavascriptexpresstailwindcssherokugitrestful apiajaxtoken-based oauth

Brainwaves

By Kendall Johnson
Picture of the author
Published on
Application Type
MERN Stack Web Application
Brainwaves Home Screen
Brainwaves Home Screen
Mood Display Page
Mood Display Page
Mood Creation Questionnaire
Mood Creation Questionnaire
+2

Brainwaves is a Full-Stack React Web Application that utilizes Node.js, Express.js, React, MongoDB, Mongoose, Tailwind Css, and JavaScript to help users track their moods over time. Whether you're feeling happy, sad, or somewhere in between, Brainwaves allows you to record and monitor your emotions in a convenient and user-friendly way.


Code-Block

The following code-block displays one of the more important functions in the code. It is the CREATE in the C.R.U.D functionality, taking the responses in the form within the application and creating a new mood inside the database. This is accomplished using a Try, Catch block to protect against potential errors that may occur during the process, whilst successfully creating a new mood if no errors pop up. We are also doing a little bit of navigating to increase the user experience and reduce the amount of work the user needs to do.

  const handleSubmit = async (e) => {
  e.preventDefault();
  const newMood = {
    feeling,
    emotions,
    triggers,
    reflection, 
  };
  // Using newMood variable, add a new mood to the database
  try {
    const response = await createMood(newMood);
    setMood(newMood);
    localStorage.setItem('mood', JSON.stringify(newMood));
    navigate('/moods');
  // Else send error to console to debug issue
  } catch (error) {
    console.error(error);
  }
};

Wireframe, ERD and User Stories

To view the Wireframe and the ERD, please navigate to this link

To take a look into the User Stories, please navigate to this link

The wireframe and ERD are what I like to consider the skeleton of an application. It is the foundation and without it your application will never make it off the notebook you hold all your ideas in. With this in mind, I take this process very seriously and make it my goal to build out a clear, detailed board with all the possible ideas in mind outlined and accounted for. This way, when I get to building, I have a breadcrumb trail to follow along the way.

As for the User Stories, this is where you can really let the imagination wander. Every idea is safe here, no matter how simple or complex. This is the time for you to step into all the different shoes of users that will be interacting with your application (i.e. Admins, General Users, Authenticated Users, etc.). This step works alongside the wireframe and ERD, completing a sturdy frame for you to build an application off of.


The reviews are rolling in...

Design is great, functionality is amazing, completed in such a short time... the app was made with such clear intention. Great job Kendall!

  • Collin Barlow, General Assembly

I found my breath matching the rhythm of the background changing, really cool feature!

  • Vilem McKael, General Assembly

He had to have hired a UI/UX designer. It's too good. 🤯

  • Ryan Le, General Assembly

Roadmap

Brainwaves, like every human, has a lot of growing to do! Here is a short list of some goals for the future:

  • Add a space within the app that a user can access to decompress or calm nerves so that they can better control thier anxiety or mood swings.
  • Provide tips and best practices for moments of heightened anxiety to allow the user to have more control over their stress.
  • Add a chatbot using OpenAI's API to interact with a user and help them navigate the page as well as other helpful actions.
  • Add the ability for the page to change themes dependant on the user's current mood.
  • Provide Monthly/Weekly challenges to keep the user motivated to work on their mental health.
  • Allow users to share progress and moods with others.
  • Provide data and analytics to users so that they can get a better understanding of their current mental status.
  • Give the user a emotional check-up everytime they load into the app.

Get in touch

Let's discuss how I can be a strong addition to your team!

Your contact information
Add a message: