DEV Community

Cover image for My Problem has a Frontend
Xauntasia Mabry
Xauntasia Mabry

Posted on • Edited on

My Problem has a Frontend

To start, I've learned that GitHub CoPilot is an incredible tutor. I've been improving my prompting to be specific and encourage chain of thought type of prompts so that what I get back, I understand how we got there. And creating this repo with a prompt was 10/10, highly recommend doing this. But that was the easy part.

The hard part came with being able to dig into the NodeJS code. Frontend development has never been a priority for me to learn, but the time is now since I've started solving personal problems.

To be completely honest, I had an entire heart to heart with Claude on explaining the folder structure of the front end project. React is a framework I’ve never personally developed in, but seen enough code to get the gist of it. But really understanding how all the frontend parts come together, mind blown.

It also made me think about a recent software supply chain attack that impacted so many people using JavaScript framework. Initially it gave me pause about using the open source packages because my inexperience could leave me vulnerable. But you don’t get experience on the sidelines with “Woulda’ Shoulda’ Coulda’”. So we press on towards being 1% better every day.

What I’ve learned

Contexts

This is where authentication happens. The component for my frontend actually is what handles the authentication state of the user. And apparently anything that needs to be carried from one page to another can be handled as a part of contexts. For my application I'm using Cognito for my authentication instead of Amplify's built in auth mechanisms. This gives me the ability to work with something I'm more familiar with and control over the token generation. I'll write a post on this later.

Components

In the React framework, these are the pages. The things you see. The rendering of fields and expression of the CSS file styles. I have pages for Welcoming folks to the site, all the ones for the actual function of the site behind the authentication context, and a page for capturing feedback. This is the part I anticipate more work with the frontend will happen to make the look and feel of the application what. I want it to be.

Services

This was probably the part of the framework I understood quickest because it's where the logic and backend is called from. I currently have services for Cognito and for downloading the files that I want to be downloaded. I'm honestly wondering do I need to create services for every button or should that logic live in the component? I'll learn more as I go I suppose.

AWS Amplify

I had never really gotten the opportunity to play with this service in a corporate setting, but it is just what the doctor order in quickly deploying a dynamic frontend that's not stored in S3 buckets. My first version of the website was a static sight full of HTML and CSS with embedded JavaScript to call the API Gateway. This go around, looking to make this a more fluid frontend that can grow as I learn and build more integrations with different FM's in Bedrock. And who knows...I may even get the time to venture into deploying something more custom in Sagemaker.

React is not for the novice

There's probably better frameworks for the newbie frontend developer, but at this point the type of conversations I've had with Copilot have been enlightening. I still am a bit nervous about posting about frontend because it is still so new, but hopefully this website helps me stay curious about how I can get better in this area even if it's not my day to day.

Top comments (0)