Mark's Tiny Projects

A website to display my tiny projects!

About Page

This page describes the Next.js application I made with a Springboot backend!

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

Future Improvements:

The future improvements that I can invision for this tiny project are the following:

Application Screenshots and Code:

1 / 3
Rainbow six seige leaderboard
2 / 3
Code for REST API
3 / 3
Frontend File Uploader