Schola

---

     ___           ___           ___           ___                         ___
    /  /\         /  /\         /__/\         /  /\                       /  /\
   /  /:/_       /  /:/         \  \:\       /  /::\                     /  /::\
  /  /:/ /\     /  /:/           \__\:\     /  /:/\:\    ___     ___    /  /:/\:\
 /  /:/ /::\   /  /:/  ___   ___ /  /::\   /  /:/  \:\  /__/\   /  /\  /  /:/~/::\
/__/:/ /:/\:\ /__/:/  /  /\ /__/\  /:/\:\ /__/:/ \__\:\ \  \:\ /  /:/ /__/:/ /:/\:\
\  \:\/:/~/:/ \  \:\ /  /:/ \  \:\/:/__\/ \  \:\ /  /:/  \  \:\  /:/  \  \:\/:/__\/
 \  \::/ /:/   \  \:\  /:/   \  \::/       \  \:\  /:/    \  \:\/:/    \  \::/
  \__\/ /:/     \  \:\/:/     \  \:\        \  \:\/:/      \  \::/      \  \:\
    /__/:/       \  \::/       \  \:\        \  \::/        \__\/        \  \:\
    \__\/         \__\/         \__\/         \__\/                       \__\/

                         .--.           .---.        .-.
                     .---|--|   .-.     | A |  .---. |~|    .--.
                  .--|===|Ch|---|_|--.__| S |--|:::| |~|-==-|==|---.
                  |%%|NT2|oc|===| |~~|%%| C |--|   |_|~|CATS|  |___|-.
                  |  |   |ah|===| |==|  | I |  |:::|=| |    |GB|---|=|
                  |  |   |ol|   |_|__|  | I |__|   | | |    |  |___| |
                  |~~|===|--|===|~|~~|%%|~~~|--|:::|=|~|----|==|---|=|
hjw               ^--^---'--^---^-^--^--^---'--^---^-^-^-==-^--^---^-'

---

Table of Contents

1. Website Links
2. Project Description
3. Goals and Stretch Features
4. Wireframes
5. Example Pictures
6. Tech Stack
7. Designing Challenges
8. Coding Challenges
9. Summary
10. Future Goals
11. Support

Live Site

Fly.io Back-end Link

Link to Front-end Repo

Link to Back-end Repo

Project Description:

For General Assembly's 2022 Winter Hackathon, Schola is our theme of giving back with education accessibility to students who want to get connected with a tutor and learn school and/or life topics. With the real effects of education lose and the difficulties of expenses with having a private tutor, Schola is an opportunity to provide education to those disadvantaged. We also hope to provide tutors a way to easily schedule and teach a topic that the student will help in. Schola is similar to apps like wyzant, kadama or preply. However, we provide a way for students to match on location without paywalls towards our students or our tutors. Schola is a MERN app which allows students and tutors to sign up with user authentication, full CRUD capabilities in creating courses, reviews and user profile descriptions. This project was a 3-day sprint with team of 6 (3 designers and 3 developers) and we hope to provide more functionality for tutors and students in the near future.

Here is also a link to our designer's presentation! Link

Goals and Stretch Features:

MVP Goals:

• Use MongoDB as a database
• CRUD functionality
• MERN app with at least 3 models (users, reviews)
• Create a focused product with a clear objective of the "Giving Back" theme
• Craft thoughtful user stories with mid-fidelity wireframes
• Error handling and useful feedback
• Impressive/Professional looking
• Deployed project (fly.io and netlify)

Stretch Goals:

• Calendar functionality for scheduling
• Detail tutor profile pages
• Notification system
• Message app for tutors and students
• Geo-location for in-person public meeting location

Wireframe:

Front-end Wireframe:

• Lo-Fi Figma Link

• Mid-Fi Figma Link

• User-Flow Figjam Link

Back-end Wireframe:

• ERD Miro Link

Example Site Pictures:

Register Page	Landing Page

Tech Stack:

Node.js and Express.js:

• Our Back-end was built using Node.js as the environment with Express as the web application framework.

React.js:

• React was used to create our Front-end pages and components.

Mongoose and MongoDB:

• MongoDB was used as our Back-end database to hold information such as users, auth, reviews, and course info. We were able to navigate this using the Mongoose interface.

Postman:

• Postman was used to test our controllers, routes and ensure that they were properly functioning.

Vanilla HTML, CSS and JavaScript:

• Vanilla HTML, CSS and JavaScript was used to build, style and provide functionality to our components and pages

Designing Challenges:

Landing Page Design:

Our biggest challenge was figuring out a productive landing page that would add functionality to the product. Deciding on the content was challenging because it isn’t a social media app with following/follower activity that could be displayed on a feed. So we instead took it in the direction of adding convenience and took inspiration from Apple's widgets to display the most important information on the landing page without the user having to tap into various pages to find what they need.

Landing Mid-Fi	Landing Hi-Fi

Another challenge was deciding when exactly the user would identify themselves as a tutor or student during the onboarding process. We first opted to have them identify themselves as a student or tutor when first opening the app, but decided against that as it would be redundant for the user to identify themselves every time the app was refreshed, or they were logged out. To avoid this, we opted to move this step into the initial registration flow where the user would only be asked to identify themselves once when making their account.

Coding Challenges:

Back-end Challenges:

router.put("/:id/updateskills", async (req, res) => {
  try {
    const updateUserSkills = await User.updateOne(
      { _id: req.params.id },
      {
        $push: { skills: req.body.skills },
      }
    );
    res.status(201).send("Successful!");
  } catch (error) {
    console.log(error);
    res.status(400).json({ error: error });
  }
});

Adding updated skills to our tutor's skills in our database was challenging. We had to make sure the specific data type was matching to the proper routes being received. We wanted to make sure that the current skills were updated and not deleted. - Sean Buchas & Ian McBee

Front-end Challenges:

const [custSkill, setCustSkill] = useState("");
const [addskills, setSkills] = useState([
  "Math",
  "Science",
  "History",
  "Accounting",
  "Marketing",
  "Finance",
  "Coding",
  "HTML",
  "Spanish",
]);
const [removeSkill, setRemoveSkill] = useState([]);
const [nButtonClass, setNbuttonClass] = useState("nextButtongrey");

const addSkill = (e) => {
  setRemoveSkill([...removeSkill, e]);
  setSkills((current) => current.filter((skill) => skill !== e));
};
const remSkill = (e) => {
  setSkills([...addskills, e]);
  setRemoveSkill((current) => current.filter((skill) => skill !== e));
};
const handleChange = (e) => {
  setCustSkill(e.target.value);
};
const addCustom = (skill) => {
  if (skill.length < 1) {
    return;
  }
  setRemoveSkill([...removeSkill, skill]);
};

This snippet of code was a little bit difficult for me due to the some state management issues I had. What it does is add skills to a list and moves them back and forth between an array. It also has the ability to add a new skill. - Alex Barbosa

Summary:

Overall, we as a team had a great time building this application for GA's 2022 Winter Hackathon to keep us thinking as designers and developers in giving back to those in need during the holiday season. This was an incredible experience for both of our designers and developers to learn what it is like to work together as a team in building a real-world and necessary education accessibility application. We are all excited to keep working on this in the near future and we hope to further add more capabilities in our future goals.

Future Goals:

• Complete our stretch goals
• Further develop student profiles
• Develop for both phone and desktop devices
• Perform further research in user experience
• Perform useability testing

Contributors:

• Olivia Shin - Designer - Portfolio
• David Lind - Designer - Portfolio
• Alex Hernandez - Designer - Portfolio
• Alex Barbosa - Developer - Portfolio
• Sean Buchas - Developer - Portfolio
• Ian McBee - Developer - Portfolio

Support:

Please feel free to contact us on Linkedin to message us. Thanks!