<h1 class="text-3xl font-bold">Frontend Mentor - Shortly URL shortening API Challenge solution</h1><p>This is a solution to the Shortly URL shortening API Challenge challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.</p><h2 class="text-3xl font-bold">Table of contents</h2><ul><li><p>Overview</p></li><li><p>The challenge</p></li><li><p>Screenshot</p></li><li><p>Links</p></li><li><p>My process</p></li><li><p>Built with</p></li><li><p>What I learned</p></li><li><p>Continued development</p></li><li><p>Useful resources</p></li><li><p>Author</p></li></ul><h2 class="text-3xl font-bold">Overview</h2><p>This is my shortly recreation! I decided to use tailwind and react for the front end development of this project and REALLY challenge myself with some firebase integrations for maintaining user state!</p><h3 class="text-3xl font-bold">The challenge</h3><p>Users should be able to:</p><ul><li><p>View the optimal layout for the site depending on their device's screen size</p></li><li><p>Shorten any valid URL</p></li><li><p>See a list of their shortened links, even after refreshing the browser</p></li><li><p>Copy the shortened link to their clipboard in a single click</p></li><li><p>Receive an error message when the <code>form</code> is submitted if:</p></li><li><p>The <code>input</code> field is empty</p></li></ul><h2 class="text-3xl font-bold">My process</h2><p>Started out getting the proper behaviors and ui down pat then dug into the more complicated bits…the firebase was a real challenge and I spent a couple weeks snuggled up to the docs for that!</p><h3 class="text-3xl font-bold">Built with</h3><ul><li><p>Semantic HTML5 markup</p></li><li><p>CSS custom properties</p></li><li><p>Flexbox</p></li><li><p>CSS Grid</p></li><li><p>Mobile-first workflow</p></li><li><p>React - JS library</p></li><li><p>TailwindCSS - For styles</p></li><li><p>Firebase - For backend management</p></li></ul><h3 class="text-3xl font-bold">What I learned</h3><p>This project I really tried to push myself by adding both authentication AND a database in the background, which meant that I needed to do more than just persist the users shortened links in the local storage! I found it particularly difficult learning what exactly Firebase types were all about and how to handle them in my components.</p><p>I added a couple of placeholder pages to kinda make the site not be alive but also just to have a little fun haha</p><p>I think the one part that I would change if I could would be the lines on the statistics section on the main page, unfortunately I couldn't figure out how to do connecting svg lines myself manually so I ended up using a react library to handle it. That ended with the lines essentially being squiggles instead of the direct lines…which I kinda feel looks better?</p><p>Let me know what you all think and tell me if there are better practices than the ones I used because I would love to learn!</p><h3 class="text-3xl font-bold">Continued development</h3><p>Moving forward I would really like to start looking at state management systems as handling things with context does not seem to be the industry standard! I plan on using jotai? I think that's the name of the state engine! And probably learning Redux by necessity! Also I would like to start using a react framework like next.js!</p><h3 class="text-3xl font-bold">Useful resources</h3><ul><li><p>React Beta Docs - This really helped me move forward with react, they are so much better than the normal react docs. Well worth the read</p></li></ul>

Live web app that lets users shorten links and maintain previously shortened link in their own accounts. Uses firebase technologies

Shortly URL Shortening API

<h1 class="text-3xl font-bold">Frontend Mentor - GitHub user search app solution</h1><p>This is a solution to the GitHub user search app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.</p><h3 class="text-3xl font-bold">The challenge</h3><p>Users should be able to:</p><ul><li><p>View the optimal layout for the app depending on their device's screen size</p></li><li><p>See hover states for all interactive elements on the page</p></li><li><p>Search for GitHub users by their username</p></li><li><p>See relevant user information based on their search</p></li><li><p>Switch between light and dark themes</p></li><li><p><strong>Bonus</strong>: Have the correct color scheme chosen for them based on their computer preferences. <em>Hint</em>: Research <code>prefers-color-scheme</code> in CSS.</p></li></ul><h3 class="text-3xl font-bold">Built with</h3><ul><li><p>Semantic HTML5 markup</p></li><li><p>CSS custom properties</p></li><li><p>Flexboxs</p></li><li><p>CSS Grid</p></li><li><p>Mobile-first workflow</p></li><li><p>React - JS library</p></li><li><p>Next.js - React framework</p></li><li><p>TailwindCSS - For styles</p></li><li><p>HeadlessUI - For components</p></li><li><p>Vercel - For deployment</p></li><li><p>GitHub API - For data</p></li></ul>

This is a full stack app built with next js, tailwindcss, typescript, and prisma that connects to the github user api and allows users to build a list of github users to follow! 

GitHub User Search

<h1 class="text-3xl font-bold">Frontend Mentor - In-browser markdown editor solution</h1><p>This is a solution to the In-browser markdown editor challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects. Additionally, I decided to make this the one of my capstone projects for my FrontEnd Coding Bootcamp With Promineo Tech. Here are the requirements of that:</p><ul><li><p>Create a full CRUD application of your choice.</p></li><li><p>When using an existing API, use AJAX to interact with it.</p></li><li><p>Note: You do not have to use an API. If you do not use an API, store the entities you will create, read, update, and delete in an array.</p></li></ul><p>-- Use a form to add new entities -- Build a way for users to update or delete entities -- Use Bootstrap and CSS to style your project</p><h2 class="text-3xl font-bold">Overview</h2><h3 class="text-3xl font-bold">The challenge</h3><p>Users should be able to:</p><ul><li><p>Create, Read, Update, and Delete markdown documents</p></li><li><p>Name and save documents to be accessed as needed</p></li><li><p>Edit the markdown of a document and see the formatted preview of the content</p></li><li><p>View a full-page preview of the formatted content</p></li><li><p>View the optimal layout for the app depending on their device's screen size</p></li><li><p>See hover states for all interactive elements on the page</p></li><li><p><strong>Bonus</strong>: If you're building a purely front-end project, use localStorage to save the current state in the browser that persists when the browser is refreshed</p></li><li><p><strong>Bonus</strong>: Build this project as a full-stack application</p></li><li><p></p></li></ul><h2 class="text-3xl font-bold">My process</h2><p>So I actually decided to build this app as a full stack MERN application using nodejs/mongo as my backend and db combo.</p><p>My goal was to first get the user authentication portion down first so I built out a simple signup/sign in form taht would enable me to test that.</p><p>Then after that, I had a means of only making authenticated requests to my web server for user documents and posting updates/deleting documents.</p><p>The styling and the layout was provided by the figma file and was relatively simple. The only really difficult part was the font color on the code editor component that I used.</p><p>I used grid template areas to define the layout.</p><h3 class="text-3xl font-bold">Built with</h3><ul><li><p>Semantic HTML5 markup</p></li><li><p>Flexbox</p></li><li><p>CSS Grid</p></li><li><p>Mobile-first workflow</p></li><li><p>React - JS library</p></li><li><p>NodeJs - Server</p></li><li><p>PassportJs - Authentication</p></li><li><p>TailwindCSS - For styles</p></li></ul><h3 class="text-3xl font-bold">What I learned</h3><p>I learned how to code up a simple authentication process with HTTP only cookies and how to code up node js middlewares that allow me to control the cors rules for incoming requests! It's honestly very simple considering the cors package that's available on node js.</p><pre class="bg-zinc-800 text-gray-100 p-4 rounded-md shadow-md"><code class="language-ts">app.use(cors());
//literally just as simple as that. 
</code></pre><h3 class="text-3xl font-bold">Continued development</h3><p>I think in the future I won't roll my own auth solution as it was very complicated and time consuming. I'm going to learn how to integrate other providers into my apps and use those for the heavy lifting for the auth.</p>

This is a full stack in-browser markdown editor made with react and node js. The app allows users to edit markdown and in real time see that markdown rendered to a readable view. 

Full Stack Software Engineer

Recent Blogs

Recent Projects

Shortly URL Shortening API

GitHub User Search

In-browser markdown editor

Work