A College Tool for High School Students as a CS Final Project
Tags: octograd2020, githubsdp
Published: 2020-05-21 17:43:15

## Final Project
For my final project at Stony Brook University, my group and I created a college searcher, recommender, and application tracker similar to Naviance that many high school students use. My group all remembered using Naviance in high school and how we all hated the unintuitive UI and sought to make our UI for this project as stylish and easy to use.
![Home Page](https://i.imgur.com/s6d9tUe.png)
![Profile Page](https://i.imgur.com/wyuwqdB.png)
![Applications Page](https://i.imgur.com/5wrowJL.png)
![College Search Page](https://i.imgur.com/pBzsPxK.png)
![Applications Tracker Page](https://i.imgur.com/jxpAgQ3.png)

## Demo Link
https://chads4us.herokuapp.com/

## Link to Code
**Backend**
{% github https://github.com/jiaster/chads4us %}
**Frontend**
{% github https://github.com/grahmnic/c4me %}
## How I built it
James and I worked on the backend and database, which was built with nodejs and PostgreSQL. I was the only member with backend experience and I knew nodejs so it was chosen over python, PHP, and .NET. For our database decision, we don't have a specific reason for choosing PostgreSQL. A lot of groups used MongoDB but none of us have experience with it so we stuck with SQL databases that we all have experience with. Although MySQL is the most popular SQL database, I wanted to try something new since I have heard a lot of good stuff about PostgreSQL. Ralph and Nick worked on the frontend, which was built using React. I mostly stayed away from the front end code, except in a few instances. Since I have experience with backends, That part was mostly error-free, however this was the first time I had to build a backend with a frontend that interacted with each other. I wasn't too sure how to merge the front and backend, so I had to build the frontend and copy the built files to the backend repo. (There has to be a more correct way to go about this.) I also encountered some problems with react routing, where a refresh on the site will give a 404 error. I fixed this by specifying React to use HashRouter but there was probably a more correct way to go about this too. The code for both repos can be found below.
Our project was initially hosted on Heroku since it was very simple to set up and a free hobby dyno was provided to students via the GitHub student developer pack. Working with Heroku was especially easy, just update a repository, and the changes automatically get deployed. However, the lack of direct access and modification of files became a problem during grading as we were required to modify certain files on the server for grading. As such, we looked for a hosting solution and found DigitalOcean through the developer pack once again. Since I was the only member of the group with sysadmin experience (I host a private discord bot on my google cloud platform), I had to set up the server from scratch. DigitalOcean was very similar to other providers I've used before like AWS and GCP and I have just taken a cloud computing course last semester so set-up was mostly easy. However, one of the requirements for the project was having the site secured via a TLS certificate. A bit of googling lead me to a nice guide and told me I had to have a domain in order to get a free TLS certificate from Let's Encrypt. Back to the GitHub student developer pack once again. This time I got a .me domain from NameCheap which provides a free .me domain for 1 year, which is more than enough for my project. With the site up and running on DigitalOcean's servers and accessible through a domain from NameCheap, my project was ready for grading.
Quick Note: My app is now back to being hosted on Heroku on a free dyno since grading is done.

#Big thanks to:
**My team members: Ralph Huang, James Li, and Nicholas Chen**
**My School, Stony Brook University, and my professor for this course, Scott Stoller**
**Github for providing the Github Student Developer Pack**
**Heroku, DigitalOcean, and NameCheap for being a part of the Github Student Developer Pack and being a part of my project**