React

Development

Design

In the ever-evolving landscape of smart building management solutions, we are consistently committed to innovation and excellence. In this case study, we’ll explore one of our most remarkable projects – the Smart Sensor, a cutting-edge multi-sensor designed for ideal room climate monitoring. Today, we visit this groundbreaking technology to dive deeper into its capabilities and the impressive results it continues to deliver for our Swiss-based client, a leading building automation solutions provider.

![Mask group.png](https://strapi.suprabit.eu/uploads/Mask_group_017e145b33.png)

The Smart Sensor project was born out of the need to address the complex challenge of room climate and environment monitoring. This IoT system integrates an array of sensors, including those for temperature, humidity, volatile mixed gases, presence/motion, brightness (light intensity), and noise level. The real magic happens through sensor fusion, where data from these sensors is intelligently combined to provide precise information about the room's state. Mounted discreetly on the ceiling, the Smart Sensor captures critical environmental data and also communicates room status to users through an LED ring, where each color signifies different aspects of room occupancy, air quality, or cleaning requirements.

![Frame 10.png](https://strapi.suprabit.eu/uploads/Frame_10_24c5bbe3b7.png)


In this case study, we will explore the firmware, mobile application, and dashboard that make this technology a game-changer in smart building management.


## Holistic Approach
For this project, it was crucial to take a holistic approach. We needed to synchronize the embedded and IoT teams with our product designer and mobile app development team. From the project kickoff until the final bug fixes, the entire team worked collaboratively to create the perfect solution. We held team meetings with our client to discuss their needs, and then our teams planned together to ensure smooth coordination. The client’s product development team would provide the requirements, our designer would create the UI for the mobile app feature, and the IoT team would develop the firmware. At the same time, the mobile team would begin implementing the feature. This iterative approach allowed us to address any issues promptly, eliminating long waiting periods between different teams.

## Academic research
As we ventured deeper into the project, leveraging cutting-edge technology, we encountered a significant challenge with our sensors, specifically in obtaining accurate noise level measurements. Recognizing the critical need for precision, we decided it was time to elevate our approach. To achieve the highest level of accuracy possible, we visited a local university. There, we gained access to their quiet room—a space so tranquil that even the sound of a heartbeat can be heard.

![silentroom.png](https://strapi.suprabit.eu/uploads/silentroom_2acc2ccd92.png)

In this controlled acoustic environment, we diligently fine-tuned and calibrated our microphone sensors, ensuring they delivered the most reliable and precise results. This collaborative effort with academia underscored our commitment to excellence and demonstrated our readiness to go above and beyond to guarantee the Smart Sensor's exceptional performance in real room conditions.

## IoT Development
In the realm of IoT development, the Smart Sensor project represented a significant milestone for us. The primary goal of the Smart Sensor was to monitor room climate and environmental conditions, and to achieve this, we integrated a range of sensors, including temperature, humidity, volatile mixed gases, presence/motion, brightness (light intensity), and noise level detectors. These sensors were meticulously designed to work in concert, enabling sensor fusion to provide highly accurate information about the room's state.
![senzori.gif](https://strapi.suprabit.eu/uploads/senzori_2d6699f3ec.gif)

Our IoT-ready approach was a key element of this development, as the Smart Sensor implemented MQTT communication via IP/Ethernet. Additionally, we leveraged Bluetooth Mesh for seamless networking of sensors, enabling efficient communication between up to 16 nodes and a gateway device. This wireless networking capability allowed for real-time data exchange between devices through node-to-node communication. Bluetooth Beacon technology was employed to enhance interaction with the mobile application, providing precise device localization within the room.
![case study.png](https://strapi.suprabit.eu/uploads/case_study_b65d97440b.png)

Our work extended to the firmware, where we crafted a robust solution in C/C++ for the ESP32 with dual-core processing, ensuring the efficient operation of the Smart Sensor. This IoT development effort represents our commitment to innovation and excellence in delivering solutions that transform complex challenges into user-friendly, efficient, and highly functional IoT devices.


## Design
When developing the Smart Sensor mobile application, our design approach placed user experience (UX) at the forefront. Unlike many specialized applications that often neglect user-friendly design, we aimed to create an intuitive and enjoyable user journey from the very first interaction.

![App.png](https://strapi.suprabit.eu/uploads/App_4f1c2ef09c.png)

While prioritising UX over UI in the initial stages, we emphasized rapid iteration and user feedback to identify and resolve potential issues efficiently. Through constant communication among teams and a deep understanding of the possibilities and limitations of both sensor hardware and application, we crafted a seamless provisioning process for technicians, ensuring simplicity and error-proofing.

The design process involved some innovative solutions and out-of-the-box thinking, such as using unique colors and LED rings on sensors to aid technicians in precise sensor identification during provisioning. Thoughtful language choices, like replacing "Provision" with "Configure" and "Lock," were made to eliminate confusion and improve the user experience. This commitment to user-centric design not only resulted in a more intuitive application but also highlighted the profound impact of intentional language and iconography in creating a user-friendly interface.

![sensors.png](https://strapi.suprabit.eu/uploads/sensors_79eefbbaac.png)

Overall, our approach to design reflects our dedication to delivering high-quality, innovative, and user-centric applications that set new standards in the field of smart building management. You can read more about our design journey [here](https://suprabit.eu/article/smart-sensor-design).

## Mobile app development
The development of the mobile application for the Smart Sensor project was a crucial part of the solution. Our client required an app that would empower their technicians to efficiently provision the sensor, map out floor plans and networks, and configure settings effortlessly. Beyond the initial setup, the mobile app continued to play a pivotal role, enabling users to monitor and manage room conditions, as well as to update the sensors wirelessly. It acted as the essential link between users and the sensors. All of this added an extra layer of convenience to setting up and maintaining the whole system.

![Phone.png](https://strapi.suprabit.eu/uploads/Phone_3c26d79663.png)

Using the versatility of React Native with the convenience of Expo, our mobile team delivered a robust application that catered to both Android and iOS platforms. This cross-platform approach ensured that our clients had access to a wider user base, making it more accessible and user-friendly. The app seamlessly communicated with the sensor devices using Bluetooth Low Energy, providing technicians with real-time access to vital data. This capability was the key to the provisioning and setup of the Smart Sensor, making the commissioning process efficient and user-centric.

## Conclusion
In conclusion, the Smart Sensor project has provided us with valuable insights into smart building management solutions. Throughout the project, our teams worked together to develop software for an advanced IoT device that seamlessly monitors room climate and environmental conditions. We prioritized precision by consulting with academia to fine-tune sensor technology.

Our IoT development efforts, including MQTT communication, BLE Mesh networking, and iBeacon technology, set new benchmarks for real-time data exchange and device localization. Additionally, we created a user-centric mobile application that simplifies provisioning, configuration, monitoring, and updates for technicians.

The Smart Sensor project not only met the requirements of our client but also pushed the boundaries of sensor calibration, IoT development, and user-friendly mobile applications. As we look towards the future, our commitment to innovation and excellence remains, and we eagerly anticipate developing new smart building solutions.




large_case study-2.png

medium_case study-2.png

small_case study-2.png

thumbnail_case study-2.png

case study-2.png

Read all about how we reinvented the Smart Building Industry using our IOT, design and development expertise.

Smart Sensor - Case Study

Sauter introduced the[ Smart Sensor viaSens](https://www.sautersmartsensor.com/en) - an Internet of Things device that transcends conventional sensing capabilities and takes monitoring to the next level. By tracking key parameters such as temperature, humidity, air quality, motion, brightness and sound pressure level, the Smart Sensor provides invaluable data. This wealth of information is harnessed to empower automation and control systems, resulting in smarter and more responsive office spaces that cater to users' needs. This product is the result of a great collaboration with our Swiss-based partner [SAUTER](https://www.sauter-controls.com/en/), a premier Smart Building Automation manufacturer with a global presence. 

What sets this device apart is its incorporation of BLE Mesh technology, facilitating seamless communication among devices. The Smart Sensor isn't just a leap forward in sensor technology; it's a game-changer in creating interconnected, intelligent ecosystems for enhanced workplace experiences.


![smart-sensors.png](https://strapi.suprabit.eu/uploads/smart_sensors_f428a6fec2.png)

## BLE Mesh 

Bluetooth Low Energy (BLE) Mesh is a communication protocol crafted specifically for  Internet of Things (IoT) devices. This protocol extends the capabilities of traditional Bluetooth  Low Energy, paving the way for the creation of expansive, reliable, and secure networks.  Unlike traditional point-to-point Bluetooth connections, BLE Mesh allows devices to form a mesh network, enabling data to flow seamlessly through the network, extending both the range and the overall coverage. 

Key features of BLE Mesh include low power consumption, robust, mandatory security mechanisms, and strict adherence to Bluetooth SIG standards. These qualities collectively make BLE Mesh a powerful solution for constructing interconnected wireless networks, opening new possibilities for diverse IoT applications. 

Within this network topology, we employ a sophisticated structure featuring a primary node known as the gateway, alongside up to 15 interconnected nodes that communicate through  Mesh technology. The gateway plays a pivotal role as it acts as the bridge connecting the sensor nodes in the network to the vast realm of the Internet. It stands out with its MQTT  capabilities, assuming responsibility for the subsequent transfer of data. 

Each node in this intricate setup serves a unique purpose - collecting valuable data and establishing communication channels with the gateway. Direct communication occurs if nodes are within range, while a relay node facilitates communication when direct interaction is not feasible. This strategic architecture ensures efficient data flow and a robust network,  exemplifying the power and versatility of the BLE Mesh network design.

![network-topology.png](https://strapi.suprabit.eu/uploads/network_topology_c99f98c12e.png)

## Wireless (OTA) Update 

Over-the-air (OTA) update represents the wireless delivery of new firmware to embedded devices. This transformative technology empowers manufacturers and developers to enhance device functionality, address bugs, and fortify security - all without the need for physical access to the device. 

In a landscape where thousands of Smart Sensor devices adorn ceilings within a single building, the impracticality of manual physical updates is evident. The wireless update approach not only streamlines maintenance but also minimizes downtime, contributing to an enhanced overall user experience. 

However, implementing this feature posed a challenge as only the gateway had fast Ethernet connectivity, leaving other devices without direct access. The key question was how to initiate updates. Despite the nodes lacking Ethernet connectivity, a clever solution emerged - upon receiving a trigger, the BLE mesh nodes could activate their Wi-Fi capabilities. Leveraging their additional functionality of iBeacon advertising and scanning, we opted for a custom-made iBeacon packet as the trigger. A mobile app then became the initiator, serving as the primary source for the new firmware and orchestrating the entire OTA update process temporarily over WiFi.

![ota-update.png](https://strapi.suprabit.eu/uploads/ota_update_0571db4537.png)

## iBeacon

iBeacon is a location-based service pioneered by Apple that harnesses Bluetooth Low  Energy (BLE) for proximity sensing, indoor navigation, and context-aware applications. 

The iBeacon packet format usually consists of three integral components: UUID, Major and  Minor values. When combined, these components form a unique identifier for each iBeacon.  As a Bluetooth device enters the range of an iBeacon, it interprets the UUID, Major and  Minor values, enabling applications to trigger location-specific actions or provide context-aware information to the user, as SAUTER uses it for Mobile Building Services. 

The Smart Sensor also integrates iBeacon technology, allowing users to enable or disable iBeacon advertising. But regardless of the advertising status, iBeacon scanning on the device is always active to receive the initiating OTA updated trigger. 



## Mobile Application 

<video loop="loop" autoplay="autoplay" muted style="width: 100%;">
  <source src="https://strapi.suprabit.eu/uploads/mobile_app_5d75341fe8.mp4" type="video/mp4">
</video>

In collaboration with Sauter, we designated the mobile app as the central hub provisioning the sensor network and the primary initiator performing the OTA updates. Functioning as a server housing the latest firmware versions in binary files and also as a mobile hotspot with a predefined SSID and password, it allows sending triggers and facilitating the OTA process on the devices. 

Within the app, users first need to select the Mesh network for updating nodes and then choose the firmware version they would like the devices to update to. Users have the flexibility to choose any available version, with the caveat that updates will only occur when transitioning to higher firmware versions than those currently on the device. 

Upon making these selections, the app prompts users to enable the mobile hotspot with a predefined SSID and password. Clear instructions for enabling the hotspot are provided for both Android and iOS users. Once the hotspot is active, the app starts broadcasting the beacon packet. This signal triggers the OTA update on devices within range and of interest. Upon receiving the beacon signal, the Smart  Sensor undergoes a series of checks. The update will only proceed if the received network ID matches the one under which the device was provisioned, the firmware version is higher than the current one, and the hardware index aligns with the device's hardware index. Subsequently, the device activates WiFi, establishing a communication link with the server. After starting the OTA update the Smart Sensor will display appropriate animation and reboot. 

![orange.gif](https://strapi.suprabit.eu/uploads/orange_af53966f82.gif)

## Fallback Mechanism 
When the OTA update is initiated, the device temporarily halts all its regular functionalities to ensure a smooth and uninterrupted update process. In the rare event that an issue arises during the update, a safety mechanism is activated by triggering a safe reboot, effectively reverting the Smart Sensor to the previous firmware version. 

To provide users with visual feedback in case of an unsuccessful update, a distinctive animation would be displayed. This serves as a clear indicator, enabling users to promptly identify and address any issues that may have occurred during the update process. If everything goes smoothly, the Smart Sensor viaSens reboots with the new firmware.

![red.gif](https://strapi.suprabit.eu/uploads/red_10c9b9ee36.gif)


large_blog-cover.png

medium_blog-cover.png

small_blog-cover.png

thumbnail_blog-cover.png

blog-cover.png

The Smart Sensor viaSens, developed in collaboration with SAUTER, introduces a leap in IoT technology by incorporating BLE Mesh and iBeacon for seamless OTA updates via a mobile app, enhancing smart building automation with advanced sensing of environmental parameters. 

Effortless OTA Updates for BLE Mesh Devices  via Mobile App

At first, the transition seemed scary since the two fields appeared to be worlds apart. However, as I delved deeper, I realized that embedded and mobile development share more similarities than I initially thought. So, let's explore how these two fields intersect and the skills you can use to excel in both.

# Things in common:

## Hardware limitations

Embedded developers are accustomed to working in a resource-constrained environment where every byte of memory and every clock cycle counts. This not only helps in writing efficient and optimized code but also develops a valuable skill set that can be leveraged in mobile development. Similarly, mobile development also requires optimizing battery life and processing power, making the transition from embedded to mobile development easier.

## Debugging skills

Debugging skills are essential for any type of software development. While there are several debugging tools available, such as logic analyzers or JTAG, what separates the experts from the novices is their methodical and analytical way of thinking, combined with patience and focus. A great developer can navigate through the maze of code, identifying and resolving issues efficiently and effectively, regardless of the technology.

## Knowledge of hardware interfaces

As an embedded developer, understanding hardware components and configurations is necessary for dealing with real-time issues. Power optimization is a key objective, given that embedded devices often rely on battery power. Similarly, mobile developers need to understand hardware configuration to troubleshoot communication failures and connectivity issues. Also, battery-related issues can bring down mobile applications, and knowledge of power optimization is essential to help track and resolve battery-related issues, as it can be the difference between a successful or underperforming app. 

## Handling interrupts and callbacks

Handling interrupts is common in embedded development, where a single device can handle multiple events, such as timers, buttons, and sensors. Since every interrupt is important and any of them can happen at any time, it is essential to have strong knowledge and a deep understanding of how to handle them properly. In mobile development, user inputs are handled as interrupts. Therefore, experience in embedded development is useful in learning how to handle user events in the mobile app properly. 

Callbacks are another fundamental concept in embedded development, where they can be categorized as synchronous and asynchronous. Mastering callback handling enables developers to manage events more effectively. In mobile development, asynchronous programming is crucial since most of the user interrupts in the mobile app are event-based.

# Biggest differences:

## UI

The focus of embedded development is creating software that integrates with the system hardware. Usually, the user interface on the embedded device doesn't exist and the user can interact with the device through small screens or buttons. However, in mobile development, creating an intuitive and appealing user interface is a focused aspect of the development process. As mobile applications heavily rely on user interaction, designing a user-friendly interface is key to delivering an enjoyable user experience.

## Devices

Embedded development focuses on designing and creating software that runs on one specific device, usually having a resource-constrained environment. Most of the embedded devices are very different so the software can be used only on the device that it's made for. On the other hand, mobile development is focusing on creating software that can work on a range of devices with different hardware specifications. The user might have different devices with different screen sizes, resolutions, and processing power, so the software must be flexible enough to work on all of them. Mobile development requires more consideration of device compatibility, while embedded development can be more tailored to the specific device it's running on.

# Challenges I faced when learning mobile development

As an embedded developer, I started my career mainly using C and C++ programming languages. For mobile development, I used [JavaScript](https://www.javascript.com/) and [React Native](https://reactnative.dev/) which were unfamiliar territories. Learning a new language is always tricky at first, but as they say, practice makes perfect, and with every new task, I gained more experience and confidence in the language.

Another challenge was making an application that is working on both iOS and Android platforms. In the end, as an embedded developer, I was focused exclusively on hardware development, so there were a lot of interesting challenges with creating user interfaces. But hey, what's life without a little challenge, right? 

# Advice to embedded developers interested in learning mobile development

As always, start by focusing on the fundamentals of mobile development. Take a common framework like React Native and learn its syntax. Then, try your hand at developing a simple app like a memory game or notes app, where you can learn more about user interface and asynchronous programming. After that, give yourself a bigger challenge and make an app that uses multiple screens, databases or even a hardware integration like BLE. Remember, the best way to learn is through trial and error, so don't be afraid to make mistakes and learn from them.

In conclusion, don't let the differences between embedded and mobile development discourage you from exploring new horizons. Instead, see mobile development as an opportunity to expand your programming skills and add another layer of expertise to your repertoire. Many of the skills you've acquired as an embedded developer are transferable to mobile development, such as memory management, power optimization, and debugging techniques. Embrace this challenge and use your experience to your advantage. Good luck on your mobile development journey!

Learning JavaScript and React Native as an Embedded Developer

large_Embedded to Mobile.jpg

medium_Embedded to Mobile.jpg

small_Embedded to Mobile.jpg

thumbnail_Embedded to Mobile.jpg

Embedded to Mobile.jpg

Picture this: I'm an embedded developer who's used to working on exciting projects involving smart building management. But after some time, I decided to shake things up and venture into the world of mobile development. 

Embedded Developer's Guide To Transitioning To Mobile Development

## What and why? 👀

For starters, what exactly is Expo? Expo is a bundle of tools created around React Native to help you start an app very fast. It gives you the means to simplify the creation and testing of React Native App. With Expo, there is no need to directly use Xcode or Android Studio. That means you can finally develop for iOS even if you are not a Macbook lover.

What’s more, if you choose Expo, you will never have to touch any native Swift, Objective-C or Kotlin or Java code. This means you can rely on just your Javascript skills for developing a real-feel native app, ready to be used on both iOS and Android!
However, sometimes you still need to add some native code. We will go over the steps on how to do that as well!

## Setting up the project 💻

You can read all about getting started on [this link](https://docs.expo.dev/get-started/installation/), here we will do just a quick overview so you can get right into the important stuff.
The first step should be downloading the Expo Go app on your phone as well as installing the Expo CLI on your computer:
```bash
npm install --global expo-cli
```

Then you should enter the following command in the terminal and choose one out of four templates:
```bash
expo init-my-app
```

After installing the project, you can start the app by entering 
```bash
expo start
```

A QR code will now pop up on the screen, then you can scan the code from within the Expo Go app if you’re using Android, or directly from the phone's camera if you're using iOS.
Now you can see all the changes you’ve made within the app right as you make them.

## Adding native modules using plugins 📌

Sometimes during your development, you will need to use native modules not directly supported by React Native. Before switching to the bare workflow, you should check if there is a plugin available for the module you need. Expo uses plugins to generate and configure all the native code for a managed project. 

If there is a plugin available, you can easily add it to your project following these instructions.
First, you need to install the plugin of your choice. After installation finishes, edit the app.config.json or app.json file. Edit the expo key and put in the following code: 
```json
{
  "expo": {
    "plugins": ["@config-plugins/name-of-your-plugin"]
  }
}
```
Before being able to fully use the native module, you need to build the application in the development mode using EAS. You can read up more about building later in the article.
Now you can start your app with:
```bash
expo start –dev-client
```

## Permissions ☑️ 

Some native modules require the user to give his permission. With Expo, you don’t have to dig into the native code to handle permissions. It is again enough to just edit the app.config.json file. Here we will be adding [this Bluetooth plugin](https://github.com/dotintent/react-native-ble-plx), but the process is the same for any available plugin. 
For Android, you need to add a new permission field like this
```json
{
   "android": {
      "permissions": ['BLUETOOTH', 'BLUETOOTH_ADMIN'],
    },
}
```
For iOS, you need to do a bit more work. 
```json
{
"ios": {
      "bundleIdentifier": 'your.bundle.identifier',
      "infoPlist:" {
        "NSBluetoothAlwaysUsageDescription":
          'Our app uses bluetooth to find, connect and transfer data between different devices',
      },
    },
}
```
And that's it! Now your app will ask the user for his/hers permission on startup.

## Adding native modules with no plugins available 🖇️

Even though by using Expo we try to stay away from native coding, occasionally there is no other way to achieve some functionality. <br/> Up until recently, if you wanted to add native code, you needed to eject Expo altogether. That means that you wouldn't be able to use the Expo Go app anymore, but more importantly, you would need to remove all your plugins and add them to the native code by hand! Luckily, now there is a workaround and that is using Expo's new feature - the bare workflow!

If you want to use custom native code that isn't already in the Expo Go app, you will need to generate the native iOS and Android projects. To do that, first, you need to switch from managed to bare workflow. You do this by running
```bash
expo run:android
```
and
```
expo run:ios
```

Using the run commands will initially prebuild your project to generate all of the native code within your project directory. Keep in mind that you need to have both Xcode and Android Studio installed to do this. 
Now, you can test your native code on simulators, and continue to use the Expo Go for all other testing and development. You can’t access native code while using the Expo Go app, but you can still access and keep all of your plugins. 

After adding a plugin to the bare workflow, you need to run expo prebuild so Expo CLI adds required permissions to the Info.plist and AndroidManifest.xml. As before, anytime you add a new plugin, you need to build the app again.

## Building the app 🔨

To build the app, we will use [EAS Build](https://docs.expo.dev/build/introduction/). EAS Build allows you to build a ready-to-submit binary of your app for the Apple App Store or Google Play Store.
First, you will need an Expo Dev account. You can register [here](https://expo.dev/).

At the root of your project, you have eas.json, where you can find the four types of builds: dev-ios-simulator, development, preview, and production.
<ul>
<li>Development builds include developer tools, and they are never submitted to an app store.</li>
<li>️Dev-ios-simulator build is used to create the development build for the iOS simulator.</li>
<li>Preview builds don't include developer tools, they are intended to be installed by your team and other stakeholders, to test out the app in production-like circumstances.</li>
<li>️Production builds are submitted to the app store, they are meant for release to the general public or as part of a store-facilitated testing process such as TestFlight.</li>
</ul>


You can change the default value of the bundle identifier in the app.config.js file. By default, the build will be of production type. You can also specify the build type in your command.
```bash
eas build --profile development
```
After that, you can select the platform for which you want to build or you can skip that step by specifying the platform directly in the command.
```
eas build --profile development --platform all
```
The Android build will start immediately. If you chose iOS, log in to your Apple account.

When the build is over, go to the given link or scan the QR code and install the app.
Keep in mind that the app won't run with build types Development and Preview on iOS devices that are not registered on your Apple account.

In the development and preview build, the result for an Android build is the .apk file, while for the production build the result is the .aab file. If you want to change the type of build file, you will need to edit the eas.json file.
```json
{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "production": {}
  }
}
```

You only need to make a new build if you add new native dependencies, or if you register a new Apple device in your provision profile and you want to run the build on it. 

## Conclusion 📝

With Expo's new features, you can finally use it for the whole development process. Adding plugins and native code has never been easier. Since the building process lasts only a few minutes, your clients can now get day-to-day updates on your progress! Other than that, definitely check out [the documentation](https://docs.expo.dev/) for other commonly used features.

Have fun and stay tuned for more! 📻 😊





large_expo.png

medium_expo.png

small_expo.png

thumbnail_expo.png

expo.png

See how Expo helps you in your development and takes care of native things for you.

Using Expo with React Native

Internship



Prior to starting, I felt a little nervous because I wasn't sure if I would be able to contribute and work well with my new team. However, a few days beforehand, my team made me feel welcomed by giving me the materials needed for preparation.

**Joining the full-stack team**

The team was just starting to build a brand new website from scratch. For the first couple of days, I was learning about new technologies that I was going to use throughout the project. I was also learning about the project itself by participating in conversations, discussing features that we were going to implement and brainstorming optimal solutions.
I got an insight into front-end, content management systems, publishing and UI/UX design. The focus was on Strapi, Next.js and Figma with React being the main point of interest.
I have to admit things were challenging in the beginning, but after some time and help from my colleagues, I was able to write a clean code on my own!


> I feel like everyone at Suprabit has an open mind and a passion for helping others! The management is flexible and attentive to the needs of the developers. If you're thinking of becoming a member of the Suprabit team or are even given an opportunity to be one, I hope you take it!

**Gaining confidence**

I realized I was able to do more than I thought I could! At the beginning of the summer, I was worried that I wasn't going to contribute enough. I never would have thought that by the end of the internship, I would become a valuable member of my team. Gaining confidence also meant talking about new concepts with my colleagues and finding the courage for pitching new ideas. One of the most important things that I learned was not to be afraid to ask questions! Asking questions meant that I'm curious and that I care about the quality of the work I'm doing. Furthermore, I learned not to ask the same question twice and to make sure the time I spent asking questions was valuable to everyone involved.


**Connecting theory and practice**

Before I started my internship, I thought I had a lot of knowledge on software development from my university.  However, as soon as I started to put such knowledge into practice, I realized that there was still so much to learn! At my university, I usually had to write small programs or projects, so working on such a big project was certainly new to me. The internship had a really positive effect on my studies as it had taught me how to write clean and understandable code and work in a team, but more importantly, it had given me hands-on experience in my field which is priceless.

**Conclusion**

I feel this internship program is well planned and adapted to students with no working experience. Throughout the entire experience, everyone was open, honest and understanding. No one ever made me feel like I was any less just because I had less experience than my fellow colleagues. I'm grateful for the things I learned during my internship and I'm so happy to be able to stay at Suprabit even after the internship has finished. I know that Suprabit will continue to support me and challenge me to be a better software developer!

large_about.jpg

medium_about.jpg

small_about.jpg

thumbnail_about.jpg

about.jpg

Interning at Suprabit has been one of the most challenging summers of my life, but it's been well worth it! Besides teaching me skills and giving me an insight into the functioning of a software company, it has forced me to learn and grow like never before.

My internship at Suprabit!

# We needed a change

People say that the website is the face of the company, and that is indeed true. The website is often the first thing somebody sees about your company and if they see an IT company with a bad, ugly or non-functioning website, imagine what they will think about the company itself.

Our old website was kind of out of date and since Suprabit is a company working with cutting edge technologies and following modern trends, we had to update our website to better represent us - what we do and who we are.

# Choosing what we want

Before doing a project like this, we had to agree on what we want to show on our website, how to package it and how to put emphasis on things we think are the most important. After the agreement had been made, our designer had to make a design prototype and web development team had to design application architecture and select the technologies to work with.

# Development

Our designer used **Figma**, a vector graphics editor and prototyping tool, to create the design which our development team would have to follow. For content management, we selected **Strapi**. Strapi is one of the best headless Content Management Systems, it is open source, 100% built in JavaScript and very simple to set up. **Next.js** is an open-source development framework built on top of Node.js enabling **React** based web applications functionalities such as server-side rendering and generating static websites. Since we are already experienced in developing Next.js applications, it was an easy decision to select this technology for building our website.

Following the design in Figma, the development team built React components. Next.js was important here to render as much as possible on the server side, and then serve the client with components already populated with content from Strapi. This increases user experience as the client has much fewer requests per page and pages load much faster.

# Deployment

For deployment of our web application and even through the development process, we used **Docker** containers for both Strapi API and for Next.js app. **Docker Compose** came in handy for easier management of both containers with only few command lines in the terminal. **Digital Ocean** is our selected cloud service provider and during the development phase, we had set up a dev environment and deployed our application iteratively as it was being built and as new features were being added. To do that without connecting to the server and running several commands lines every time, we created a **GitHub Action** to do all of that for us, deploying the application version on the main branch.

Once the app was ready, we needed to make it run over HTTPS protocol, instead of HTTP, and finally update DNS servers to route www.suprabit.eu to our server. 

large_Suprabit-web-1440x810.jpg

medium_Suprabit-web-1440x810.jpg

small_Suprabit-web-1440x810.jpg

thumbnail_Suprabit-web-1440x810.jpg

Suprabit-web-1440x810.jpg

Designing a new look for our website. Selecting technologies and principles to build our website on, implementing them and finally deploying the website to cloud.

Smart Sensor - Case Study

Effortless OTA Updates for BLE Mesh Devices via Mobile App

Embedded Developer's Guide To Transitioning To Mobile Development

Using Expo with React Native

My internship at Suprabit!

Building our own website