<p>Hi there, Shane Keenan here! Did you know that I do Udemy courses? Well I do, as a course instructor! I had a past in teaching and it has always been something I enjoyed. When I moved on into programming I eventually had the itch to teach again so I figured &quot;Why not combine the two?&quot;, and that is what I did. I try to help others learn some programming skills. From basic editing in CSS, to learning the React framework Next.js or some backend coding with one of my favourite frameworks - Django. There is something for everyone to enjoy.</p>

<h1><a href="https://www.udemy.com/course/rank-map-chart-covid19-countries-with-nextjs/"><strong>Rank, Map &amp; Chart Covid19 Countries</strong></a></h1>

<p><a href="https://www.udemy.com/course/rank-map-chart-covid19-countries-with-nextjs/"><strong><img alt="Covid19 Image" src="https://user-images.githubusercontent.com/38283909/143616810-5eb148f8-0945-4a90-93f9-e149f66c9219.png" style="height:644px; width:1325px" /></strong></a></p>

<h2>Description</h2>

<p>Students will learn how to use Nextjs (React framework), including working with getServerSideProps, learning what separates it from getStaticProps, implement dynamic pages, along with accessing an external API based on the latest Covid19 information to output and work with the data which the finalized application will be deployed to a website on Vercel.</p>

<p>Users will also gain valuable knowledge on how to work with location data, outputting co-ordinates on a map using Leaflet within our Next.js application and showing the steps required to get it up and running, which can otherwise be a hassle to figure out.</p>

<p>We will also understand how to use and graph data in our Next.js application with Chart.js, showing the past daily instances of infections of the past month.</p>

<p>We will also utilize some CSS&nbsp;in order to style and layout the page in a nice, clean and presentable manner.</p>

<p>While this tutorial is for a Covid19 website, I&nbsp;would strongly advise that people who are following along try to change it into something they prefer, like shoes, toys, anime, cars - anything, or even output the data in a different way - as it will help cement their learning, and fundamentally this is to get a better understanding of working with Next.js, array filtering and data manipulation, as the data itself can be used with any available APIs.</p>

<p>If you have any further questions, or need any assistance during the course, please don&#39;t hesitate to contact me or drop me an email and I&nbsp;will get back to you at the earliest convenience.</p>

<h2>Who this course is for:</h2>

<p>Beginner and pre-intermediate React / Nextjs developers. Perhaps you know vanilla React but you are not familiar with Nextjs or you are a complete beginner. Intermediates may also find the map and graph information useful too.</p>

<p><strong><a href="https://www.udemy.com/course/rank-map-chart-covid19-countries-with-nextjs/">Click here for the Covid19 Ranked course.</a></strong></p>

<h1><a href="https://www.udemy.com/course/make-a-pizza-website-with-nextjs-frontend-django-backend/"><strong>Make a Pizza Website</strong></a></h1>

<p><a href="https://www.udemy.com/course/make-a-pizza-website-with-nextjs-frontend-django-backend/"><strong><img alt="Pizza Image" src="https://user-images.githubusercontent.com/38283909/143616986-ab5e5e90-0276-44e6-9689-f6e559f40546.png" style="height:651px; width:1341px" /></strong></a></p>

<h2>Description</h2>

<p>Students will learn how to use Nextjs (React framework), including working with getStaticPaths, getStaticProps, pages, the layout component as well as using the app file for propagating data to different pages, file structures, deploy our website to Vercel and getting API data.</p>

<p>Users will also gain knowledge on Python&#39;s Django framework, learning how to make an API with the Django REST Framework, work with serializers, viewsets, models and deploy this created API to Heroku, which will then be received in Nextjs.</p>

<p>We will also understand how to use PostgreSQL which will include creating new servers in both Heroku and on the localhost, creating data locally but also pushing this data from the localhost to the deployed Heroku website.</p>

<p>We will also utilize some CSS&nbsp;in order to style and layout the page in a nice, clean and presentable manner.</p>

<p>While this tutorial is for a pizza website, I&nbsp;would strongly advise that people who are following along try to change it into something they prefer, like shoes, toys, anime, cars - anything - as it will help cement their learning, and fundamentally this is to get a better understanding of working with Nextjs, Django &amp;&nbsp;PostgreSQL and the data itself is inconsequential.</p>

<p>If you have any further questions, or need any assistance during the course, please don&#39;t hesitate to contact me or drop me an email and I&nbsp;will get back to you at the earliest convenience.</p>

<h2>Who this course is for:</h2>

<p>Beginner and pre-intermediate Python and React developers. Perhaps you know vanilla React but you are not familiar with Nextjs or you know React but you need to brush up on Django.</p>

<p><a href="https://www.udemy.com/course/make-a-pizza-website-with-nextjs-frontend-django-backend/"><strong>Click here for the Udemy Pizza Website course.</strong></a></p>

<h1><a href="https://www.udemy.com/course/build-an-animal-shelter-website-with-django/"><strong>Build an Animal Shelter Website&nbsp;</strong></a></h1>

<p><a href="https://www.udemy.com/course/build-an-animal-shelter-website-with-django/"><strong><img alt="Animal Shelter Website" src="https://user-images.githubusercontent.com/38283909/143616521-38991b47-9c40-4928-a0dc-636535c4b496.png" style="height:644px; width:1343px" /></strong></a></p>

<h2>Description</h2>

<p>Students will learn how to use Django (Python framework), including working with setting up our virtual environment, building our project &amp; app, working with a homepage, details page &amp;&nbsp;search page while learning how to search with queries in Django, base.html, models, migrations &amp; admin, media files, context, conditional statements, tables, using icons with Font Awesome, pagination and a carousel making use of Unsplash!</p>

<p>For the models within Django, we will be using a wide range of fields, such as the choices fields, image fields and date field while also learning about validators for these too.</p>

<p>Along with all of these, we will also be working with Swiper.js, a modern mobile touch slider, to show the animals in a beautiful, user-friendly manner.</p>

<p>We will also utilize some CSS with the Bootstrap framework&nbsp;in order to style and layout the page in a nice, clean and presentable manner.</p>

<p>While this tutorial is for an animal shelter website, I&nbsp;would strongly advise that people who are following along try to change it into something they prefer, like shoes, toys, anime, cars - anything - as it will help cement their learning, and fundamentally this is to get a better understanding of working with Django &amp;&nbsp;Bootstrap and the data itself is inconsequential.</p>

<p>If you have any further questions, or need any assistance during the course, please don&#39;t hesitate to contact me or drop me an email and I&nbsp;will get back to you at the earliest convenience.</p>

<h2>Who this course is for:</h2>

<p>Beginner and pre-intermediate Django developers. Perhaps you know a little Python but you are not familiar with Django or you are a complete beginner. Intermediates may also find the Swiperjs information useful too.</p>

<p><a href="https://www.udemy.com/course/build-an-animal-shelter-website-with-django/"><strong>Click here for the Udemy Animal Shelter course.</strong></a></p>

<h1>Conclusion</h1>

<p>That is everything for now about my courses guys. Please make sure to check them out if you have any interest in learning any of the languages, frameworks or packages in any of these and make sure to give a review, a comment and tell them that Shane Keenan sent ya! Peace!</p>

Shane Keenan here! Did you know that I teach people how to program? I do! If you would like to know what I teach check it out.

Shane Keenan is a course instructor who can teach you programming.

education

programming

Shane Keenan Course Instructor

<p>At this point I had made around 20 projects. Some for fun, others for primarly learning a programming language or some cool feature within that language. Oftentimes, it was a culmination of both. Some took the span of hundreds of hours, while others amounted to a few dozen.&nbsp;</p>

<p>Here are the five I enjoyed creating the most and&nbsp;why:&nbsp;</p>

<h1>5. <a href="https://waste-my-time.herokuapp.com/">Waste My Time</a></h1>

<p><img alt="Waste My Time Image" src="https://user-images.githubusercontent.com/38283909/140011106-92c1322c-6de9-4348-b0dc-29f583fab3bc.png" style="height:633px; width:1107px" />If we examine our lives we tend to find that it is&nbsp;not wildly different from day to day. We eat, sleep, work and maybe pursue some extra activities between those key moments. Are they enough? Do we waste our time or is it worthwhile? How does one even define what a waste or worth of time even is? That is up to ourselves to decide. To tally up the totals of our days and reflect on if what we are doing is enough or we could be doing more.</p>

<p>That is where the idea of my project Waste My Time came from. We select how much sleep we get, minus that from our 24 hours and with the remainder we decide if we are wasting, doing a chore or accomplishing something worthwhile. Afterwards we examine it and see where we can make some changes.</p>

<p>On a technical level I learned a lot at the time too. It was one of the first projects made&nbsp;learning Vue. I had learned about using both authorization and token authentication, an autocomplete ability which remembers users entries and working with dynamic CSS, to name just a few things.</p>

<h1>4. <a href="https://www.shineyuu-mold.com/">Rebuilding WordPress Website from Scratch</a></h1>

<p><img alt="Rebuild WP Scratch Image" src="https://user-images.githubusercontent.com/38283909/140011776-0d50e093-8476-49bf-9de2-529289950b3e.png" style="height:580px; width:1217px" /></p>

<p>In my humble programming beginnings I had started using WordPress for businesses to make websites. Over time I eventually stepped away from this content management system and learned to develop what we take for granted from scratch. Oh my, was that a headache. So much ease and simplicity when using an ecommerce shop on WordPress, say, than when having to learn to build one by yourself. Same with making a blog posting website. Pretty much anything, WordPress makes it simple. But over the course of time learning how to build that stuff by myself turned out to be deeply satisfying and rewarding. You can check out a video I made comparing WordPress and making a website completely by yourself <a href="https://www.youtube.com/watch?v=2zZAnMVRRXw">here</a>&nbsp;if you want to see a step-by-step about the pros and cons of each.&nbsp;</p>

<p>While I would still suggest using WordPress for something like a blog posting website, learning the tools of creating it all by yourself is also a great way to go - especially when something goes wrong - since I remember as a novice WP creator even simple issues like moving a piece of content around used to be so frustrating to figure out!&nbsp;</p>

<h1>3.&nbsp;<a href="https://lowest-covid-countries.vercel.app/">Next.js Covid19 Website</a></h1>

<p><img alt="Covid 19 Image" src="https://user-images.githubusercontent.com/38283909/140012508-22e4f177-c636-4284-983b-5bb046cf3d02.png" style="height:640px; width:1198px" /></p>

<p>I enjoyed making this project for several reasons. First, it was my third teaching video series, all three teaching courses can be found <a href="https://www.udemy.com/user/shane-keenan/">here</a>. I recorded myself teaching others how to make this exact website and uploaded to the education platform Udemy! Since this was the third teaching video I had made, I had been able to hone my abilities and improve aspects I had learned from the previous two. I also enjoyed this project because I had a lot of fun playing around with the API on Covid, but also because I could play around with the CSS a bit, and learn to work with both graphing and geolocation tools which worked with Next.js, the React language framework which I used in the video. I really enjoy using Next.js too!</p>

<h1>2.&nbsp;<a href="https://h3h3-database.herokuapp.com/">YouTube Channel Wordfinder</a></h1>

<p><img alt="Word Finder Image" src="https://user-images.githubusercontent.com/38283909/140013201-6a001db2-e247-4bc2-bdca-bc6e2fe0600e.png" style="height:643px; width:1341px" /></p>

<p>An unusual idea that I have always wanted to build. Imagine&nbsp;looking for a word or sentence from a YouTube channel, over hundreds of videos and being able to find every time that person/channel has said the word or phrase and show it to you at that exact second. If you do not quite understand, I made a video showing how it works <a href="https://www.youtube.com/watch?v=mj8RbIXMUfE&amp;ab_channel=Cocoabine">here</a>!</p>

<p>Video compilations are nothing new on YouTube, and I always wondered how people do it. Either they thrawl through hundreds of hours of videos, or they create software to do it. So I did something similar, I made software that could do it. Imagine your favourite channel or person where you could see compilation videos of everytime they talk about a certain topic, for example. It works wonders and the possibilities are endless. I was suprised I made it and it felt extremely rewarding when I did.&nbsp;</p>

<h1>1. <a href="https://www.coffeemenow.co/">CoffeeMeNow</a></h1>

<p><img alt="CoffeeMeNow Image" src="https://user-images.githubusercontent.com/38283909/140014049-e409f536-9ab0-41fe-9980-e2b38fd902f8.png" style="height:640px; width:1341px" /></p>

<p>A website I am deeply proud of. What is it? CoffeeMeNow is a website that helps people who suffer from loneliness, isolation, social anxiety or simply trouble making new friends because of changing environment or other reasons. To check it out in video form and how exactly it works you can watch the video I made on it <a href="https://www.youtube.com/watch?v=k9edF_meFRc">here</a>.&nbsp;</p>

<p>The idea is that you choose a location from hundreds of coffeeshops around your country, and someone else later agrees to meet you at that coffeeshop at a designated time that you have chosen. You meet up and talk about interests that you share based on your profiles. It is also anonymous so that there is no discrimination with regards to age, gender or disabilities.&nbsp;</p>

<p>I have always wanted to make a website like this for many years, but never had the technical ability. I did not know what to do or where to start. But I learned different languages and frameworks under I was able to piece it all together and after a few hundred hours managed to finish this initial version, which I am very happy about.</p>

<h1>Conclusion</h1>

<p>There you have it guys, 5 different projects that I have worked on that I have enjoyed. That is not to say I did not enjoy all of the others, there are some that I loved that just missed the top 5. Special shoutouts to my previous two teaching projects: <a href="https://www.shanekeenan.dev/projects/animal-shelter-website">Animal Shelter Website</a> and <a href="https://www.shanekeenan.dev/projects/nextjs-and-django-pizza-website">Pizza Website</a>, along with <a href="https://www.shanekeenan.dev/projects/pokemon-ranked-website">Pokemon Ranked</a> and&nbsp;<a href="https://www.shanekeenan.dev/projects/english-teacher-site">English Teacher Site</a>. If you enjoyed this article you can always <a href="https://www.shanekeenan.dev/contact">contact me</a> with any questions or topics you would like me to cover and I will see you again sometime! Peace!</p>

While I had fun working on all of these projects, some I enjoyed working on more than others. Some were extremely rewarding for different reasons. Let's look!

Let's take a look at my favourite 5 projects I have worked on in descending order.

My Top 5 Favourite Projects

<p>If you&#39;re not the reading type, you can check out my video that I made comparing the two frameworks <a href="https://www.youtube.com/watch?v=Jmbid-9a5mk&amp;ab_channel=Cocoabine" target="_blank">here</a>!</p>

<p>Here&#39;s a brief overview of my comparison between the two frameworks vanilla React and Next.js which is a React framework I guess. This overview would be useful for people who do not know what server-side rendering vs. client-side rendering is.&nbsp;It would also be useful for people who know the basics of React, but perhaps are not too familiar with Next.js, or people who simply have absolutely no idea about Next.js.</p>

<h2>One Is Better For SEO</h2>

<p>If you right-click on a page source that has been made by React you will notice nothing more than a bunch of JavaScript gibberish. Whereas clicking on a Next.js project you will see HTML. One of the core advantages of Next.js is that it is good for SEO. When a search engine crawls through a website, for example the React project, it will not get the necessary data it needs as it will only retrieve a JavaScript file. However with the Next.js application it can go through the proper information, such as the meta and headers and catalogue those details. So SEO is generally a core reason why some would consider choosing Next.js over vanilla React.</p>

<p><strong>You can see a side by side example on the image below. These two page sources coming from two identical websites I had made, the left showing vanilla React while the right shows Next.js. Notice the HTML on the right side and the JavaScript on the left (click on the image if you need to enlarge it):</strong></p>
<a href="https://user-images.githubusercontent.com/38283909/122221853-43c85580-cee4-11eb-94b5-57f3bb751995.png" target="_blank"><img alt="Side by side comparison of react and nextjs" src="https://user-images.githubusercontent.com/38283909/122221853-43c85580-cee4-11eb-94b5-57f3bb751995.png" style="height:603px; width:1312px" /></a>

<h2>One Is Faster Than The Other</h2>

<p>Another key factor - one which personally blew my mind at the time I discovered it, is speed. When using vanilla React combined with a backend API, such as Python&#39;s very own Django REST framework, a brilliant framework which I often incorporate into my own projects - I had found that when clicking on a page to both retrieve and load the data that it is slow and cumbersome. Why? Because it must go into the backend, load the application (which in Django&#39;s case would be hosted on Heroku, a platform that takes a minute to load the application when not in use for more than one hour), it then takes that data and populates it onto the frontend, the vanilla React program. All of this taking many, many seconds. Which in a world of fast speeds is just not very practical! Compare this now with Next.js. Using Next.js&#39; very own create static props, when a project is deployed it builds the pages <strong>statically</strong>. This means that whatever data you have is built at deployment time and created like it would be a regular HTML page. Say for example I have a projects page. With Next.js, those pages have already been made when I deploy the website. So it doesn&#39;t need to go into the backend and retrieve anything, the pages are already there! Magic. The catch is these pages have to be updated every time there is a new page, as in, it needs to be re-deployed. There is a way around that however, with Next.js create server-side props. This updates information dynamically, so no more constant deployment. The catch is the pages will load a little bit slower than with static props, still much faster than vanilla React.</p>

<p>I hope you found this to be useful, it kind of blew my mind when first discovering the difference between the two. If you are reasonably new to React, this is something you should definitely look more into and consider.</p>

The difference is night and day when you compare client side to server side rendering, consider looking into Next.js for SEO purposes and faster loading times.

Blog

Shane Keenan Course Instructor

My Top 5 Favourite Projects

React vs. Next.js