<h1 class="text-3xl font-bold">Frontend Mentor - Shortly URL shortening API Challenge solution</h1>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.<h2 class="text-3xl font-bold">Table of contents</h2><ul><li>Overview</li><li>The challenge</li><li>Screenshot</li><li>Links</li><li>My process</li><li>Built with</li><li>What I learned</li><li>Continued development</li><li>Useful resources</li><li>Author</li></ul><h2 class="text-3xl font-bold">Overview</h2>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!<h3 class="text-3xl font-bold">The challenge</h3>Users should be able to:<ul><li>View the optimal layout for the site depending on their device's screen size</li><li>Shorten any valid URL</li><li>See a list of their shortened links, even after refreshing the browser</li><li>Copy the shortened link to their clipboard in a single click</li><li>Receive an error message when the <code>form</code> is submitted if:</li><li>The <code>input</code> field is empty</li></ul><h2 class="text-3xl font-bold">My process</h2>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!<h3 class="text-3xl font-bold">Built with</h3><ul><li>Semantic HTML5 markup</li><li>CSS custom properties</li><li>Flexbox</li><li>CSS Grid</li><li>Mobile-first workflow</li><li>React - JS library</li><li>TailwindCSS - For styles</li><li>Firebase - For backend management</li></ul><h3 class="text-3xl font-bold">What I learned</h3>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.I added a couple of placeholder pages to kinda make the site not be alive but also just to have a little fun hahaI 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?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!<h3 class="text-3xl font-bold">Continued development</h3>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!<h3 class="text-3xl font-bold">Useful resources</h3><ul><li>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</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>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.<h3 class="text-3xl font-bold">The challenge</h3>Users should be able to:<ul><li>View the optimal layout for the app depending on their device's screen size</li><li>See hover states for all interactive elements on the page</li><li>Search for GitHub users by their username</li><li>See relevant user information based on their search</li><li>Switch between light and dark themes</li><li>Bonus: Have the correct color scheme chosen for them based on their computer preferences. Hint: Research <code>prefers-color-scheme</code> in CSS.</li></ul><h3 class="text-3xl font-bold">Built with</h3><ul><li>Semantic HTML5 markup</li><li>CSS custom properties</li><li>Flexboxs</li><li>CSS Grid</li><li>Mobile-first workflow</li><li>React - JS library</li><li>Next.js - React framework</li><li>TailwindCSS - For styles</li><li>HeadlessUI - For components</li><li>Vercel - For deployment</li><li>GitHub API - For data</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>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:<ul><li>Create a full CRUD application of your choice.</li><li>When using an existing API, use AJAX to interact with it.</li><li>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.</li></ul>-- 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<h2 class="text-3xl font-bold">Overview</h2><h3 class="text-3xl font-bold">The challenge</h3>Users should be able to:<ul><li>Create, Read, Update, and Delete markdown documents</li><li>Name and save documents to be accessed as needed</li><li>Edit the markdown of a document and see the formatted preview of the content</li><li>View a full-page preview of the formatted content</li><li>View the optimal layout for the app depending on their device's screen size</li><li>See hover states for all interactive elements on the page</li><li>Bonus: 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</li><li>Bonus: Build this project as a full-stack application</li><li></li></ul><h2 class="text-3xl font-bold">My process</h2>So I actually decided to build this app as a full stack MERN application using nodejs/mongo as my backend and db combo.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.Then after that, I had a means of only making authenticated requests to my web server for user documents and posting updates/deleting documents.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.I used grid template areas to define the layout.<h3 class="text-3xl font-bold">Built with</h3><ul><li>Semantic HTML5 markup</li><li>Flexbox</li><li>CSS Grid</li><li>Mobile-first workflow</li><li>React - JS library</li><li>NodeJs - Server</li><li>PassportJs - Authentication</li><li>TailwindCSS - For styles</li></ul><h3 class="text-3xl font-bold">What I learned</h3>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.<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>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.

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. 

In-browser markdown editor

Frontend Mentor - Entertainment web app solution Overview ### The challenge Users should be able to: - View the optimal layout for the app depending on their device's screen size - See hover states for all interactive elements on the page - Navigate between Home, Movies, TV Series, and Bookmarked Shows pages - Add/Remove bookmarks from all movies and TV series - Search for relevant shows on all pages - **Bonus**: Build this project as a full-stack application - **Bonus**: If you're building a full-stack app, we provide authentication screen (sign-up/login) designs if you'd like to create an auth flow ### Built with - Semantic HTML5 markup - CSS custom properties - Flexbox - CSS Grid - Mobile-first workflow - [React](https://reactjs.org/) - JS library - [Next.js](https://nextjs.org/) - React framework - [Tailwind CSS](https://tailwindcss.com/) - For styles - [Headless UI](https://headlessui.dev/) - For UI components - [Heroicons](https://heroicons.com/) - For icons - [Prisma](https://www.prisma.io/) - For database - [PostgreSQL](https://www.postgresql.org/) - For database - [TypeScript](https://www.typescriptlang.org/) - For type checking - [TRPC](https://trpc.io/) - For API - [React Hook Form](https://react-hook-form.com/) - For form handling - [React Query](https://react-query.tanstack.com/) - For data fetching - [Vercel](https://vercel.com/) - For hosting ### What I learned I learned quite a few things. Firstly, I used this project to familiarize myself with NextJS and NextAuth. I learned how to use Prisma to map out the tables in a POSTGRESQL database and how to use TRPC to create an API for the database. I expanded my already existing knowledge React Hook Form to handle form data and how to use React Query to fetch data from the API as this required a more complex usage of these two values. I expanded my knowledge of Tailwind CSS and more specifically how to customize my tailwind.config.js file to create custom colors, fonts, and spacing. ### Continued development Moving forward with NextJs my next few projects are going to be using the ability to use server side props to render data from the database. I also plan on using the ability to use server side rendering to create a more SEO friendly website. I plan on hooking up a larger state library similar to Redux to handle more complex state management, and finally I plan on learning how to use Tailwind to construct my own Design System. Actually I'd like to acknowledge my teacher in the class that I'm taking Romaric Zounlome [Romaric Zounlome](https://www.linkedin.com/in/rzounlom) for pointing me in the direction of Nextjs. He's a great guy with a lot of good intentions for the community in the bootcamp I'm in and I'm glad to have him as a teacher.

This is a full stack solution to the entertainment web app for front end mentor. Allows uses to login, submit reviews, view other reviews, bookmark favorites, and search sections. 

All the projects and challenges I've built to learn and grow as a developer.

Shortly URL Shortening API

GitHub User Search

In-browser markdown editor

Front End Mentor - Entertainment App