This application is an social-emotional educational tool for kids. Upon signing up/logging in to the application, the user will be presented with their personal panda experiencing a randomly generated negative emotion. The goal for the user is to make their panda happy again by choosing an associated solution presented on the right of the page. When the correct answer is chosen, a video will open on a new tab that informs the user about that negative emotion. When the video is finished and the tab is closed, the original page will present the user with a form where they can reflect on their own emotions. When the user goes back to their panda, they will be presented with another random negative emotion to start the process over again.
We believe that it's important to provide social-emotional education to kids so they have an idea of what/how they're feeling as well as how to manage them properly. What better way to provide a learning tool than through a game with a cute panda? Ideally this will also help the adults involved in the kid's life to develop/appreciate social-emotional intelligence.
- Learning the server folder structures for incorporating MongoDB/Mongoose in our app. This allows storage of data in the back end with CRUD operations.
- Using GraphQL/Apollo client to organize data through queries and mutations
- Setting up the app so the server as well as the client is running concurrently
- Implementing signup/login and authentication with JWT
- Learning client folder strutures for React.js to build the front end, along with importing Bulma CSS library
- Inserting recorded audio files and using Howler.js to make it functional on the page
- Creating a mobile app so users can learn on the go
- Developing hunger, tiredness, and potty meters that influence how the panda feels
- Expanding the list of emotions with associating videos
- Animating the panda along with being able to name your own panda
- Have the audio play on hover instead of having the users click on the audio button
- Clone this repository using HTTPS or SSH:
HTTPS:
git clone https://github.com/rkle408/happy-panda.git
SSH
git clone git@github.com:rkle408/happy-panda.git
-
Open folder in VS Code.
-
Ensure you see our package.json in your folder, in the Integrated Terminal at the level of the package.json, run the command:
npm i
Open Integrated Terminal at package.json level, run command:
npm run develop
- Sameer Bhattacharya - https://github.com/sameersamuel
- Vivian Chen - https://github.com/vivianc11
- Victoria El Bedewi - https://github.com/elbedewi95
- Alex Kinsman - https://github.com/alexmkinsman
- Rosa Le - https://github.com/rkle408
- Hoang, Andrew. Instructor. Guidance given during class. Date accessed: November 4-14, 2022.
- Scharf, Michael. Teaching assistant. Guidance given during class time. November 4-14, 2022.
- "Audio - Audio Vector Icon". pngkey. https://www.pngkey.com/detail/u2q8t4i1q8t4e6a9_audio-audio-vector-icon/. Date accessed: November 10, 2022.
- "Big set of funny panda bear in cartoon style in different standing poses and emotions isolated on white background". Adobe Stock. https://stock.adobe.com/search/images?k=sad+panda&asset_id=284287764. Date accessed: November 7, 2022.
- "Center Textarea In Div With Code Examples". FolksTalk. https://www.folkstalk.com/2022/09/center-textarea-in-div-with-code-examples.html. Date accessed: November 10, 2022.
- "How to keep your footer where it belongs?". freeCodeCamp. https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/. Date accessed: November 9, 2022.
- "Pediatric Coping Skills". Children's Hospital Colorado. https://www.childrenscolorado.org/doctors-and-departments/departments/psych/mental-health-professional-resources/primary-care-articles/pediatric-coping-skills/. Date accessed: November 10, 2022.
- "png opacity changer - world's simplest png tool". OnlinePNGTools. https://onlinepngtools.com/change-png-opacity. Date accessed: November 9, 2022.
- "React Project: Sticky Notes App (useReducer Hook)". codebubb on YouTube. https://www.youtube.com/watch?v=KcXsX1XXa2s. Date accessed: November 9, 2022.
- "Social-Emotional Learning Videos". mylemarks. https://www.mylemarks.com/sel-videos.html. Date accessed: November 7, 2022.
- heroicons. https://heroicons.com/. Date accessed: November 9, 2022.
- "Picture of kids". https://study.com/blog/4-ways-to-determine-your-new-students-learning-styles.html. Date accessed: November 11, 2022.
This project is licensed under the terms of the MIT license.
<>
https://happy-panda.vercel.app/
TBD
This project was built using Mongoose, Express, ReactJS, Node.js, GraphQL.