This is a template portfolio for the students attending the BlueStamp Engineering program.

Project maintained by nanased Hosted on GitHub Pages — Theme by mattgraham

Smart Mirror

My project is Smart Mirror, which has cool details on them like date&time, weather, calendar events, and music. It is powered by a Raspberry Pi, using a mirror panel and a small monitor to display. Codes are written using React.js.

Engineer Current Highschool Area of Interest Grade
Mahina Y Henry M. Gunn Highschool Software Engineering Incoming Junior

Headstone Image


By completing the project, I figured that I enjoy more into software engineering than hardware, and also designing and formatting. Both was fun and exiciting, however hardware was difficult for me, and I couldn’t have as much fun as software. I also figured that I enjoy designing, which made me more curious about UI and UX design. Completing project allowed me to be more confident in the area of coding, and for the next 2 years of high school I will have a good idea of which major/area of college.

Demo Night Video

Final Milestone

My final milestone is to create the music component and finish building the mirror. I used spotify API on the music component to get the data of the album cover and the song name of the current song playing in spotify. The most difficult part was the backend because I did not touch backend at all in this project, and I had to go slow to be accurate. It was a long pathway, but I still completed it within time. Finally, building up on actual mirror had a little struggle when using hot glue gun. It was difficult to put the glues evenly so it won’t show on the mirror, which is semi-transparent. Throughout the process, I learned many ways to format also.


Final Milestone

Second Milestone

My second milestone is loading the base project. First, I worked on date and time. I used setInterval method to update the time consistently, 1000 milliseconds. I’ve also worked on weather, which I used openweather API. When starting on using API, I used axios to get the data from a HTTP request, and show the data into console. I tried displaying both celsius and fahrenheit, using the math.round function. After data, time and weather, I worked on Google Calendar API which was the most difficult task in the second milestone. Since the API only allows to display in console, I had to bring it out. Adding to that the calendar plans are listed in array, which I had to use map function to describe each events. The similarity they have, is interval. To update the data, they all have to get interval or else it will stay the same.

current-screen date and time code weather code calendar code

Second Milestone

First Milestone

My first milestone is to set up Raspberry Pi, and research about the load project of the Smart Mirror. In order to set up Raspberry Pi, I plugged in power, HDMI cable to conenct to my monitor, and also a mouse and a keyboard. I also set up on SSH and VNC to connect to other computer and control from them. I had a trouble turning on the screen which I realized that I had to set the monitor on, then Raspberry Pi’s power. I spent many time on researching React, watching videos and moving my hands to figure out how it works. Since I’ve never touched to React, I had a lot of difficulties learning new things. However, the reseaarch helped me get clear idea of what React is. Afterwards, I forked a repository and followed the instructions to install a template of codes.

This is my plan: smart mirror plan

First Milestone