All Solutions

Solutions to Challenges from the community.

Free

Feature image for Professional resume
hunter
Hunter Becton

February 18, 2023

Professional resume with SvelteKit

This is my second solution using SvelteKit. My favorite part of the challenge was creating the bullet point and border element on each experience item. It was surprisingly easy with CSS flexbox!

Level 1

SvelteKit

CSS

All-Access

Feature image for Checklist app
hunter
Hunter Becton

January 23, 2023

Checklist app with React and localstorage persistence

This was the first time I'd used Vite to create a React application, and I was impressed by how easy and fast it was. I also used the LocalStorage middleware plugin for Zustand, which added a simple state persistence to the app.

Level 4

React

Zustand

Vite

Free

Feature image for Dad joke generator
hunter
Hunter Becton

January 23, 2023

Dad joke generator

Do you know how to clean up async requests in useEffect hooks? Check out this code to learn how this can be achieved with an AbortController!

Level 3

Next.js

Tailwind CSS

Axios

All-Access

Feature image for Developer portfolio
hunter
Hunter Becton

January 23, 2023

Developer portfolio with Next.js and Tailwind CSS

I wanted to use React components so updating and adding new portfolio items is easy. Next.js handles image processing and routing, plus gives the users more options later on if they want to expand the site.

Level 2

Next.js

Tailwind CSS

All-Access

Feature image for Checklist app
hunter
Hunter Becton

February 3, 2023

Checklist app with SvelteKit and localstorage persistence

This was my first app built with Svelte and SvelteKit. Although this project was simple, I can see why people love Svelte so much! Reactivity is so easy to handle compared to React, plus it comes with its own global storage solution.

Level 4

SvelteKit

Tailwind CSS

All-Access

Feature image for Web designer and developer portfolio
hunter
Hunter Becton

January 23, 2023

Web designer and developer portfolio

I moved quickly with this challenge until I got to the portfolio modal. The image slider took me a long time to figure out because I couldn't figure out how to create the overlapping effect. Luckily Framer Motion helped smooth things out in the end.

Level 3

TypeScript

Framer Motion

Next.js

Free

Feature image for Four-column footer
hunter
Hunter Becton

January 23, 2023

Four-column footer

I was thinking about using CSS Grid to make this footer but decided to stick with CSS Flexbox. Overall, I'm happy with the way it turned out!

Level 1

HTML

CSS

Parcel

Free

Feature image for Masonry image gallery
hunter
Hunter Becton

January 23, 2023

Masonry image gallery with React and CSS

Creating the masonry grid was harder than I expected, but I used CSS columns instead of a library. Eventually, I want to add animations for the images when the filter status changes.

Level 2

React

CSS

Vite

Free

Feature image for Category tag marquee
hunter
Hunter Becton

January 23, 2023

Category tag marquee

Getting the animation perfect with a seamless transition was difficult, but with some tweaking of flexbox, I was able to figure it out!

Level 2

CSS

HTML

Animation

All-Access

Feature image for Feedback modal
hunter
Hunter Becton

January 23, 2023

Feedback modal with Next.js and Tailwind CSS

I struggled with getting all the correct Tailwind CSS classes for all the radio input states. I used Headless UI for the modal, React Hook Form for the form, and Framer Motion for some basic animations.

Level 4

Framer Motion

Next.js

TypeScript