Home
/
Web Development
Web Development
EyeSaver Web App
In 2020, my eyes suffered from many Zoom Meetings, so I created a web app for a phone with buttons to change a virtual background in a meeting on a laptop. The video shows how this web app solves the previously mentioned problem.
I used React to build the frontend, which displayed buttons to change the virtual background. A laptop hosts the custom site—which a phone accesses by URL.
I hosted a Flask server on my laptop. When the server receives JSON objects from the frontend, it invokes specific functions from the PyAutoGUI library to mouse click on my laptop screen at designated pixel coordinates. The video shows a few EyeSaver features.
Front end-github.com/eloisezeng/eyesaver_website
Back end-github.com/eloisezeng/eyesaver_mac
Front end-github.com/eloisezeng/eyesaver_website
Back end-github.com/eloisezeng/eyesaver_mac
Wellesley Chinese Language School (WCLS) Online Scheduler
The WCLS asked if I could develop a website for teachers to add time slots to a schedule and for students to sign up for them.
I used the MongoDB database, PassportJS, ExpressJS, and EJS to build the website. I also used the nodemailer library, which emails a teacher if a kid signed up for the teacher’s timeslot.
Website: wcls-connections.herokuapp.com I deactivated the site since it costed money to host, and it was no longer needed after the pandemic ended.
Code: github.com/eloisezeng/wcls_connections
Website: wcls-connections.herokuapp.com I deactivated the site since it costed money to host, and it was no longer needed after the pandemic ended.
Code: github.com/eloisezeng/wcls_connections
WHS Prefilled Forms Website
Every school day from 2020-2021, students had to fill out a “Covid-19 Health Questionnaire” Google Form. I wanted a program to complete it automatically. Thus, I used the Chrome developer tools to find the form data the browser posted to the server hosting the form. The form data shows the user’s input values next to the names of the parameters. With the parameter names, I wrote a link to a prefilled form: Essentially, I appended the form link with parameter_name1=user_value1¶meter_name2=user_value2&etc. After clicking the link, the user can hit submit or click “Back” to verify the input boxes are filled out. I wanted a user-friendly way for others to create a link, so I built a website using ExpressJS and EJS: whs-prefill-form.herokuapp.com. If you type your first and last name into the input boxes and press the “generate links” button, links to prefilled forms appear. I deactivated the site since it costed money to host, and it was no longer needed after the pandemic ended. Code: https://github.com/eloisezeng/prefill_forms.