Website Examples
There’s currently three front end development focused website examples in this post. The first is a software company for my former employer. It’s built to resemble a third party app in that it’s made up of numerous web components. Components of course that can be modified in their own namespace. Files that can be updated independently, or even replaced with code from React per se.
The second website I also built for a former employer. High fidelity mocks were provided to illustrate every detail of this intricately designed front end development application. It’s fully responsive and loaded with dummy data. It was used to demonstrate a SaaS product. One in which is a financial data tracking system. Something I’m most proud of in this app is the calendar. It’s located on this page. Select the table filter icon, then go to date range. However, I’m very proud of this piece in entirety. There’s a lot of wonderful features.
The third sample isn’t live yet actually. This is a far more than front end development though. It’s a MEAN stack app (Mongo, Express, Angular, Node). Features include but are not limited to a robust login system, an admin with OTP. There’s commenting and voting abilities with a user profile and an image uploader. It’s a malleable full stack app slated to be deployed before the end of 2023.
Rest Countries App
I built this project to see if I could combine two APIs without a hitch. Mission accomplished. Adding and customizing a Leaflet map can be hard enough, let alone plotting dynamic points on it from another endpoint. REST Countries is an endpoint that provides national data on an abundance of countries. Flag image, population, capital, and languages spoken are just a few of the data points.
When the map loads, REST countries is called and a group of all countries is loaded into a list in the UI. Users can then select a country, view it’s geographical location in addition to information on thereof. It’s a nifty way to quickly obtain helpful information.
The only challenge I encountered is common in front end development. How do I fit all this information into the UI? Yes, of course I could sketch everything out, do mocks, etc. But we all know developers are often times strapped for time, so getting a polished version out the door was my first priority.
JavaScript Drag & Drop
This project was inspired by the need to create a drag & drag system. One in which users could drag multiple items simultaneously and drop them in a variety of places. GET and POST requests happening all the while with the ability to delete as well.
The result wasn’t exactly indicative of what I wanted, but I was definitely pleased with the outcome as it opened my eyes to the intricacies of JavaScript’s inbuilt dragging abilities. There’s no libraries or fancy stuff happening here other than pure JavaScript. It’s quite a whirlwind. Read about it here.
AngularJS Front End Development
Yes, AngularJS is a bit archaic in 2023. There are a lot of companies that still use it, but it’s certainly no comparison to Angular or React. Regardless, front end development revolves around principles. And many of these principles are adhered to in this single page app. Modules (controllers) and services. Components and broadcasting data. Filters, pipes, and helper functions.
I built this way back in 2017 and still think it’s a neat project. The Viking Cruises SPA has a multitude of features. Search for a cruise and check the weather in the same location. Explore each deck via a gallery of galleries. Flip through a gallery of videos. Open and close numerous things with animation. Much more.
I created this when the VP of Marketing asked me to take PDFs and convert them into something that interactive. There was no plan. No mocks. Not even a kickoff meeting. It was literally her just handing me some documents and telling me build something wonderful. This project was the result.
ChartJS Bar Chart UI
Not long ago, I was working at a company where everything we built was dynamic. Navigation bars, graphics, and data visualizations. Being the Sr UI Dev in the company, I was responsible for creating D3 charts, NVD3 charts, and ChartJS charts.
And of course they were all a world away from the chart they look like from the library. Customizing these was a big challenge because they all either SVG or canvas. Some of the changes mocks called for could only be handled by changing the actual library or overall the canvas tag.
To become acclimated with this library I began building a multitude of renditions of charts. Trying to customize as many things as I could. This sample here was one of the attempts.
NASA Photo of the Day Front End Development
There’s no story associated with this one. Where it came from or why I built it. Other than I was eager to create something new. I went looking for an API. One in which I could use my existing skills and knock something out rather quickly. I wound up creating this app.
NASA’s Photo of the Day app sends a clean payload of a photo and it’s details. I used a date picker I created in conjunction to send a date to the API. I was happy with the way it came out. Clone the repo and see for yourself. I’d love to hear what you think about this. You can find the repo on the post with more information about thereof.