Web Developer Projects and Apps

laptop image to describe web development projects and apps page

Here you will find all my old and new web developer projects and apps. There are big and small ones. But each of these projects taught me something so they deserve to be here 🙂

 

IMPORTANT: Many Github repos remain private, if you want to see them please ask me to watch. Remember you can see more info about me on this section .

——————

Development of CountriesApp: a place where you can search a lot of useful info about world countries with Angular 14

Here I use latest version of Restcountries, a powerful REST API to request many info about all countries in the world.

Apart of routing and other basic Angular concepts, here I learned some Rxjs new things like the use of subjects and some powerful operators like switchMap, which allows us to automatically subscribe to an Observable when we emit another Observable. That is how we get an observable with the data of each country when we use the activatedRoute service’s “params”, which also is an Observable which helps us get the route parameters, in this case the id of the country as an Observable, and then get automatically the observable with the country info for that id.

However the most important thing I learned with this project is trying to have no limits when you want to resolve a problem. I mean, to develop certain functionality the API had a little issue. Where others could simply think “ok, API is wrong, can´t do this”,  I opened an issue on the official API’s repository to know if there was actually a problem and which was. I learned then how to fix it with some custom code and also helped API´s creator to modify and improve things for the next API´s version.

You can see the thread here:

https://gitlab.com/amatos/rest-countries/-/issues/160

Click here to use the app

——————

Development of Gif Searcher: a webapp to search Gifs made with Angular 13 and Bootstrap

In this project I use the power of Giphy API  to make an user friendly experience where you can not only search your favourite images, but you will also be able to share the images with your Facebook, Twitter or Tumblr profiles, using their respective APIs. Also you can simply copy the link automatically generated for each picture and paste it wherever you want, with the help of a button provided for each image.

Other features:

      • I use Local Storage to store and show your latest searches. Also duplicated and empty searches are controlled to make a more professional and usable  work.
      • The webapp is available in English and German, depending on your browser´s Locale language. To develop this feature I used ngx/translate and i18n
      • Each time you join the web, you will see a different “welcome” picture. It was possible investigating the possibilities of the Giphy API.
      • Code is available on GitHub. I tried to be careful with security issues that could happen when a developer uploads code to GitHub. In this case, I tried to desynchronize files where sensitive data like API keys could be stored.  That is possible with the .gitignore file.

Click here to see

——————

Development of FIRECHAT: a chat with Angular 13 and Firebase

This chat application allows you to authenticate yourself using 3 different providers:

  • Google
  • Facebook
  • Twitter

To create the app, I used:

  • Angular v 13. It fixes lots of vulnerabilities from previous versions.
  • TailwindCSS v3. It Works 100% with this angular version (could create problems with prior angular) and provides a more modern style tan Bootstrap
  • Firebase v9. A Google platform to create web and mobile apps which can help us with flexible, NoSQL Real-Time databases, which I used to create the chat.
  • Angular fire library. The oficial Angular library for Firebase.
  • Other features:
    • If you have no profile picture on your selected provider or there is a failure loading it, a default picture will be used.
    • Used AuthGuards to prevent unauthorized users to access the chat and manage the proper routing permissions and redirections
    • I have done the Angular Unit and Functional Testings with Jasmine and Karma
    •  Please read the provided link to documentation for more info.

Click here to see

——————

Javascript Videogame Demo

– All is made with vanilla Javascript, no external libraries used.
– The speed of the ball increases at a certain amount of time, as well as the bar size decreases. All is reset when the user fails.

Click here to see

——————

Datepedia Angular webapp – Now enhanced as PWA (Progressive Web
Application)

This is a project made with Angular some time ago, now empowered as a PWA to take benefit from all the advantages it can gives us. For example, being able to install the application on our device (computer or cell phone), and work offline.

Please take in mind that if you use offline version, you can calculate the difference of days between the two dates because it is not needed to go online to perform that task; but
you could not retrieve any data from the API and hence when you want to see historic facts happened on those days and months, an error which prompts you to check your connection would be thrown.

Click here to see

——————

Control Bar Test With Javascript and Canvas API

One small test to keep on working with Javascript events, collisions and the canvas API

Click here to see

——————

Bouncing Balls Demo

I have done it as a base to start understanding the use of canvas and JS to draw, next I have some ideas with it, and maybe one day I will be ready to dig on Augmented and Virtual Reality

Click here to see

——————

Datepedia

A project made with Angular 12 where you can calculate the days of difference between two dates. Please check the README section on the project for more info.

Click here to see

——————

Users counter webapp

This is just an small app made in one day because a friend of mine asked for my help to check if some people on a list had a partner for one event. And we should not forget, coding is solving every days problem.
As I had to review some vanilla JS concepts and wanted to practice some logic, I decided to make this app for her where she could enter names from a list and check of many times they appear: if they appear 2 times (as she had designed the list), that means all of them have a partner 🙂
I used some functional programming, methods like trim() or toLowerCase() allows her to enter names without having to be careful about Upper or lower cases because it is everything internally sanitized.
Also i ensured an object for each user is only created each time a new name is added, making a property of that object being increased each time the name is added again

Click here to see

——————

Webapp to upload an image and show data asynchronously

we can register an user and upload an avatar to the server. Also we make an asynchonous call to the server which allows a modal to retrieve data on real time without having to reload the page.

This time I did with no frameworks because I always like to know and understand how things work with vanilla languages. The technologies used are: JQuery-PHP-MySQL-Javascript

Click here to see

——————

REST API with PHP and Slim 4

Although I am more focused on front-end, it is necessary to know some tools to develop a basic back-end, as well as I refresh and improve my PHP skills, which is my prefered backend language. So a microframework provides those utilities without having to learn a big framework like Laravel.

Click here to see

——————

Development of a movie search web app with Angular

This application connects with the The Movie Data Base API to offer both the latest film news and a search engine that allows you to obtain information about any movie you want.

▪ Available in English and Spanish. Automatic language detection based on browser preferences.

Click here to see

——————

Development of “SpotiApp”, an Angular and Node.js web app to listen music through the Spotify API

2021: In firefox, view must be fixed because cards are not 100% width; in chrome and edge work fine. Maybe it is due to Firefox using a different engine. Also please take in mind iit is an app to practice web app and angular and was not intended to be 100% mobile responsive.

This app uses the Spotify API for developers. It shows you the last releases and allows you to search by artist and listen to his/her toptracks.

Click here to see

——————

Development of a cars selling test webapp with Angular and PHP (updated 2021)

2021 UPDATE: CRON JOBS added to ensure data integrity and safe usability. Now database will be restored each day to default data.

Also I have noticed in some browsers (Chrome and Edge) the cards are 100% width and it is supposed to be 1/3, to group 3 columns on each row. Will be solved when possible. In firefox works fine.

This a learning purposes webapp where the visitor can publish, edit or remove their announcements
of their supposed cars to sell.

Click here to see

——————

Development of a demo website with Angular and PHP for a spanish technologic company (updated 2021)

2021 UPDATE: For security, added cron jobs to restore users each day. You can create users but they won´t exist within 2 days.

Click here to see

——————

“Your reminder”. Diary web app with PHP, MySQL,Javascript, Jquery, Bootstrap (UPDATED 2021)

2021 UPDATE: added CRON JOBS to delete all users and tasks every day. Also obfuscated some JS files for security reasons.

On this web application, users will be able to create an account, and, through a calendar and a simple and comfortable system, they will be able to control and manage their daily tasks.
User can delete the tasks, edit them, or mark them as “done” if the user has already completed the task, all under an intuitive, easy system.

Click here to see

——————

GLASTONBURY TANTRIC TEMPLE website and shop with WordPress, PHP, CSS3, HTML5, JAVASCRIPT

Website development and design of the Glastonbury Tantric Temple in Glastonbury -England-, along with the english web developer Robert Grant

Click here to see

——————

Developing of a SOCIAL NETWORK PROTOTYPE with PHP, MySQL, Javascript, Bootstrap, AngularJS (2021 UPDATE)

Just a prototype at this moment. Code of this project on github will remain private for now. Sorry for the inconvenciences.

Click here to see

——————

Internship – Design, development, deployment, maintenance of a professional website – INTE PSYCHOLOGISTS (2021 UPDATE)

2021  UPDATE: I not only developed the website, but since 2017 I also make the maintenance as well as improving website and fixing bugs. For example, I developed manually a customized Google Maps for the website (see the contact page on the website) because Plugín was creating a lot of problems.

Click here to see

——————

Other works, designs…

Most of them are not functional or responsive yet; but they were a good chance for me to learn and get better skills.

https://retro-web-design.avanzartewebs.com/

https://moon-lounge.avanzartewebs.com/

https://literaria-design.avanzartewebs.com/

 

*Image created by Lukas Bieri found in Pixabay