The React Selfie App

avatar

Hey there, I’m Amir!

Having recently joined the innovative team at Nimble Ape as a Software Engineer, I'm truly delighted to be part of this dynamic company. I'm eager to introduce you to a project that originated during my interview journey – the React Selfie App. This endeavor not only allowed me to showcase my coding skills but also led me to an exploration into the world of browser APIs, which I find truly fascinating. Walk alongside me as I guide you through the process of crafting this inventive application.

The Challenge:

The Nimble Ape team asked me to create a fun and engaging web application that takes selfies, using React, Vite and the getUserMedia API.

The Result:

Here you can see the final version, complete with the additional features of a ‘mirror’ effect, the ability to delete stored selfies and to select which camera you'd like to use:

Check out the React Selfie app:

Click Here

And here’s the Github repo so you can see how I built it:

Source code

More on the APIs:

For anyone wanting to create a similar app, let me tell you about some of the different APIs in the mix for the React Selfie App:

Permissions API was key for building the app, allowing me to find out if permission has been given to access the webcam, mic and so on.

`getUserMedia` API plays a pivotal role in granting the app access to the user’s camera and microphone. It’s this API that fuels the seamless and interactive interface.

Here’s a peek at some code that demonstrates how I used these powerful APIs:

// Sample code snippet demonstrating the getUserMedia API
const initializeCamera = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    videoElement.current.srcObject = stream;
  } catch (error) {
    console.error('Error accessing camera:', error);
  }
};

In this snippet, we leverage the getUserMedia API to initiate the user’s camera and stream the video to the app’s interface. This is just a glimpse of how modern web technologies can be combined to create a seamless, user-centric experience in a real-time browser-based app like the React Selfie App.

Try it out for yourself 🙂 And if you need help with your RTC project, don’t hesitate to get in touch with the team.

Stay tuned for more tech experiments!