File Uploader to REST API endpoint to grab usernames from an Image
Description:
I took a break this past week but was able to get a little project done using a new framework and javascript library I had never used before. I created the frontend of this tiny project using Next.js and React! This is my first time using either and it was a little bit confusing at first. The major differences that I saw from what I am use to programming in (Vue.js), is how the project is structured within a Next.js frontend framework and the React components. I used the tutorial for Next.js and a lot of different googleing/Stack Overflow to piece together how everything went together. Once I was done with the simple frontend I wanted to see if I would be able to use an axios post call of the image I picked and get the usernames back from the REST API.
I was able to successfully send off the image from the frontend and AWS Rekognition processed the usernames perfectly! I did run into a couple of issues when trying to call the endpoint /uploadImage. The first issue that I ran into was a CORS Error / Access-Control-Allow-Origin Error. I was able to fix the issue by adding in @CrossOrigin within the REST call in Java. I found a very interesting Medium article explaning it here 3 Ways to Fix the CORS Error — and How the Access-Control-Allow-Origin Header Works. The second issue was within the AWS text detections it was giving me duplicates after being processed so I had to filter out those duplicates within the stream using '.distinct'. Overall I thought it was fascinating to build a full web application with a frontend framework and JS library I had never used before! Please see below for some sample images of the application and code.
Cost to setup
Total Cost: $0.00
Tool kit
- Next.js - React Framework
- React - JavaScript library for building user interfaces
- ATOM - Text Editor
- Eclipse - IDE
- Openjdk - Java 8
- axios - Promise based HTTP client for the browser and node.js
- Spring - Java framework
- Gradle - Build Tool
- spring initializr - API to generate JVM-based projects * LIFE SAVOR - Makes building spring java projects so easy
- Postman - API testing/development platform
- AWS Rekognition - ML/Deep Learning Technology
Future Improvements:
The future improvements that I can invision for this tiny project are the following:
- Utilizing an API endpoint to grab data about users for a particular game
- Improve the UI
- Improve backend to use node.js in order to fully utilize the Next.js React Framework