Yearbook: My General Assembly (WDI) capstone project

 

Yearbook

This is my capstone project for General Assembly's Web Develoopment Immersive (WDI) course in Downtown LA.

2018 marks the year of my 10-year high school graduation... which still feels crazy to say. Anyways, being on the planning committee for the reunion sparked a great idea for a React App.

I always thought it would be so cool to have an app where all of the students in our graduating class could click on eachother's old high school headshots and see a profile of everything that person is doing now, has done in the past 10 years, and was doing back in 2008 (yes, I know Facebook basically does all of this plus way more, but this is a targeted cause and frankly just the perfect app to hone my MERN-stack skill set... plus, it was just a lot of fun).

Eventually this is going to be where people can buy tickets for the actual event, get info about when/where/how and all other logistics to help with the planning process and hopefully reconnect with eachother!

UI Screenshot UI Screenshot UI Screenshot

Getting Started

How the app works

For the intended users, here is how it works:

  1. View the entire senior class index and search for specific users dynamically by typing in the search box.
  2. To view specific user profiles, you must have a valid account. Also, your account won't be active until you add a current photo and status.

*** If you are NOT a graduate of the 2008 THS class, login with these credentials to view the app:

  • username: **test@test.com**

  • password: test

  • Click your profile to add data to your:

    • "Current" profile, like where you live now, what you do, your relationship status, etc.
    • "Elapsed" profile, like places you have traveled, jobs you've held, and major milestone events in your life (weddings, career achievements, etc.).
    • "Inital" profile, like teams/clubs you were a part of during senior year and your favorite high school memories. Throwback!
  • Click on other classmates who have added info to their profile and enjoy a major walk down memory lane, all while learning about what everyone has been up to before the big day!

Technologies Used

  • React
  • Express
  • Node.js
  • MongoDB/Mongoose
  • React Materialize
  • Lodash
  • CSS (CSS-Grid & Flexbox)
  • HTML

Next Steps

While this was initially a school project, it's sole purpose is intended to give my graduating classmates an easy platform to "catch up" on what everyone has been up to for the last 10 years, hopefully limiting the need for basic small-talk and maximizing party-awesomeness at the reunion.

Features I'm Still Working On

  • Click a user's current location, visited countries, career field, or hobbies and see a filtered list of users who share that thing in common (great icebreaker material).
  • Add stats to the homepage so we can see at a glance how many students in our class (for instance):
    • Plan on attending the reunion
    • Moved somewhere
    • Traveled to another country
    • Got married
    • Had kids
    • Changed jobs
    • etc.
  • Add a "Most Likely: 10 Years Later" section, where we follow up with the students who were nominated for things like "Most Likely to Become President" and "Most Likely to Go to the Moon".

Acknowledgments

Again, I've gotta give it up to Jim Clark (@jim-clark) and Jon Tamsut (@jtamsut), my WDI instructors here at General Assembly who are absolute web ninjas.

I learned so much in such a short period of time (it really is incredible), and has everything to do with their dedicated instruction and many late nights over the span of three intense months putting up with me and my thousands of questions.

Thank you guys so much!

 
DevelopmentNick ArochoReact, Node, Express, MongoDB, JSON web tokens, Heroku, CRUD app, full-stack