What you will need

1. ESP-32 WROOM DevKit 1.0 – 1 pc.
2. 4-digit display TM1637 0.56" - white color– 1 pc.
3. 4-digit display TM1637 0.36" – 1 pc.
4. 4 Pin F/F 200mm Cable – 4 pcs.
5. JST 1.25 2-Pin Male - Female Connector – 2 pcs.
6. Micro JST 1.25 2-Pin Male - Female Connector – 2 pcs.
7. Universal PCB stripboard 50x70mm PI-01 – 1 pc.
8. Carbon Film Resistor – 220 ohm – 5 pcs.
9. Carbon Film Resistor – 2,2k ohm – 3 pcs.
10. Breadboard Jumpers - 1 set
11. Pin Header Right Angle Male – 1 pcs.
12. LED Diode 5mm RGB with common anode – 1 pc.
13. LED Diode 3mm white – 3 pcs.
14. Round Push Button - momentary – 10mm – 2 pcs.
15. ON-OFF switch – 1 pc.
16. Cable USB A – USB micro – 1 pc.
17. Phone charger with usb output 5V – 1 pc.
18. Heat Shrink Tubing - 1 pc.
19. IKEA RIBBA photo frame – 21x30cm ( it must be thick ) – 1 pc.
20. Self-adhesive paper for the printer – 1 pc.

Tools

1. Soldering iron
2. Solder
3. Drill or screwdriver
4. Drills: 7, 10, 13
5. Hot glue gun
6. Knife
7. Printer

Solder electronic components to the PCB as in the picture below. Soldering start from the lowest elements. For connecting displays and LEDs use angled connectors.

After finishing soldering, your board should look similar to this one

In the printouts folder you will find print templates that will help you drill holes:

• back template
• side template

Print them and then tape back template to the back of the frame and side template on the right edge of the frame. Use the appropriate drills to drill the holes. Cut the holes for the displays and the button with a knife.

Insert the displays and diodes in the holes using hot glue.

That's how it should look from the front

In this step you need to adapt the graphics to your repository. To do this, edit the main PSD file and then print it on a regular A4 sheet. You can use the free online editor Photopea. If you want to, you can also print a label with the description of the side buttons. The self-adhesive paper works best for this.

Now you have to program ESP32 module. Download the latest Arduino IDE and the necessary libraries. Clone repository. Connect the ESP32 via the USB cable to the computer and upload the code.

After upload firmware, unplug and plug again USB cable to your device. Status led should glow in red. After few seconds should change color to blue. It means that device is in AP mode. Using a computer or phone scan nearby networks and find GITHUB-FRAME ssid. Once you connect to the selected access point you will be automatically redirected to the configuration page. Here you enter the name and password for the network with which your frame will connect. Save credentials and reset ESP.

If everything has been done correctly, the status LED should be green and the display should show

 SEt rEPO IP 192.168.xxx.xxx

 This means that we must now select the repository. Go to computer or phone and connect to the same WiFi network as ESP. Then in browser url placeholder type ip address of your ESP. You will be redirected to the page with the configuration of the repository. In example: For repository url: 

https://github.com/DivanteLtd/vue-storefront

Fill form fields and click save configuration.

That’s all :)

Now you can follow the popularity of the selected repository.

Have a nice building !