Glam Up My Markup: Beaches - with new shiny CSS features

Oleksandr Korneiko — Sat, 01 Jun 2024 11:14:39 +0000

This is a submission for [Frontend Challenge v24.04.17]((https://dev.to/challenges/frontend-2024-05-29), Glam Up My Markup: Beaches

What I Built

Take me to the beach with CSS/JS/HTML.
As the markup challenge prompt stated - no markup was changed except for adding a link to CSS and a script tag in the head. With styles, animations, and some JS for adding images and a dialog window - the page becomes more fun and interactive.

Demo

samvimes01 / markup-css-js

For the challenge https://dev.to/challenges/frontend-2024-05-29

Simple static page

Made for a dev.to challenge

I have used CSS and JavaScript to make the starter HTML markup beautiful, interactive, and useful The template does not include photos, so to make it visually appealing, a simple JavaScript with css var trick was used.

Live

Github pages

Tech used

MDN: new HTML and CSS features like dialog, css import, css nesting, image set, css var.
Interactive buttons: cssbuttons.app
Cards: neumorphism.io, glassmorphism
Animations: wave svg and some experiments with keyframes and pseudoelements
Interactivity without changing HTML: used :after, :before pseudoelements, JavaScript and css var for adding and image
Images: all images were generated with a special prompt where names of the beaches were included. Adobe Firefly did all the magic. To descrease size a special resizing and converter script was used (created with the ChatGPT 4o help)

ImageMagick and the necessary codecs for…

View on GitHub

Journey

I used some interesting stuff here. AI for image generation, converted images to new AVIF format, used many HTML/CSS features that were added/adopted recently (dialog, CSS vars, etc.). And I've never used animations so extensively as here (even though it's only a few transforms and keyframes)

MDN: new HTML and CSS features like dialog, css import, css nesting, image set, css var.
Interactive buttons: cssbuttons.app
Cards: neumorphism.io, glassmorphism
Animations: wave svg and some experiments with keyframes and pseudoelements
Interactivity without changing HTML: used ::after, ::before pseudoelements, JavaScript and CSS var for adding an image
Images: all images were generated with a special prompt where the names of the beaches were included. Adobe Firefly did all the magic. To decrease size a special resizing and converter shell script was used (see readme on GitHub)

A job seeker journal application built with AWS Amplify Gen 2

Oleksandr Korneiko — Sat, 25 May 2024 15:00:43 +0000

This is a submission for the The AWS Amplify Fullstack TypeScript Challenge

What I Built

I am excited to present you with a job seeker journal application. The app helps users keep track of the jobs they have applied for, and store different CVs and Cover letters connected with jobs.
It leverages AWS Amplify authentication, data, file storage, serverless functions, the AWS Amplify UI React library, and AWS Bedrock with the Mistral:7B model to generate cover letter text.

Demo and Code

The code is available on my personal GitHub repository
The repository is connected to the Amplify console. the example app

Demo gif
Too big for dev.to/cloudinary (also available on GitHub repo Readme page)
Gif

Demo screenshot

Integrations

The diagram above represents the technologies used in the challenge

Authentication

Cognito: Behind the scenes, Amplify creates a Cognito user pool to store all user information and manage authentication for this application. However one of the two Lambda functions uses an IAM authentication function to store some data in a database.

Data

AppSync: Amplify creates an AppSync GraphQL API, enabling us to execute CRUD operations. The frontend app uses the generated client's model methods for get one, get many, create, update, and delete operations. One of the Lambda functions uses the generated client's graphql method and autogenerated GraphQL functions for storing into the database extracted text from the file.

DynamoDB: The Data module in the Amplify project, AppSync uses DynamoDB as the database to persist all information in this NoSQL database.

Serverless functions

Lambda Function: I used the function module in Amplify to trigger extracting text from the uploaded file. The second function is triggered when the user clicks the "Generate Cover Letter" button. It uses the provided data and a special prompt and utilizes AWS Bedrock and the Mistral:7B model to generate a cover letter.

File storage

S3 Bucket: I used an S3 bucket to store Curriculum Vitae files. At the moment, only .docx files are allowed since the third-party library for parsing PDFs fails to do so on Lambda runtime while working fine on a local machine (seems like a CommonJS to ESM issue, or Worker API issue).

Connected Components and/or Feature Full

I created a feature-full app utilizing authentication, data, storage, and functions. Additionally, AWS Bedrock AI is used as an extra feature within one of the functions.

The repository was initiated with the AWS Amplify Gen 2 React Vite template. I used Connected Components such as Authenticator and AccountSettings.ChangePassword. I also utilized many other UI components, including Button, Flex, Input, Label, Alert, View, Link, Table, TableBody, TableCell, TableHead, TableRow, Text, Heading, Grid, Icon, Radio, RadioGroupField, and TextAreaField.

I also decided to use the @mui library for 2 components to expedite development: a NavBar (just copypasted from mui docs) and a SnackBar toast component to improve UX (popup toast after an item is created/updated/deleted or if an error occurs).

Conclusion

I used to work with Azure and Google Cloud, but never with AWS services. I was surprised by how effortless it is to build a full-stack app on AWS Amplify. However, the Amplify Gen 2 documentation wasn't sufficient for me. I had to use DynamoDB, AppSync, and Amplify Gen 1 docs to figure out some things. Still, I was able to build a full-stack app with authentication, S3, data, and even AI in less than 5 days. Nice experience.

The price is fair enough. I spent USD 0.63 for 12 deployments.

DEV Community: Oleksandr Korneiko

Glam Up My Markup: Beaches - with new shiny CSS features

What I Built

Demo

samvimes01 / markup-css-js

For the challenge https://dev.to/challenges/frontend-2024-05-29

Simple static page

Live

Tech used

Journey

A job seeker journal application built with AWS Amplify Gen 2

What I Built

Demo and Code

Integrations

Authentication

Data

Serverless functions

File storage

Conclusion