logo

Projects

myFlix SPA - Angular

This is a Single Page App(SPA) made using Angular CLI that will consume the API that I created, resulting in a responsive application designed for movie enthusiasts who enjoy reading information about different movies.

Technologies Used

This SPA was built using TypeScript, SCSS, Angular, Angular-Material and my external API.

Features

  • User-friendly interface with smooth navigation
  • Ability to filter movies
  • Ability to save favorite movies
  • Ability to view information about movies, genres, and directors
  • Ability to update user profile information

Screeshoots

My Flix Landing Page My Flix Signup My Flix Main My Flix Movies Details My Flix Profile
Site
See project on GitHub

Chat App - React Native

A chat app for mobile devices using React Native and Expo. The app provide users with a chat interface and options to share images and their location.

Technologies Used

This app was developed using the following technologies and tools: React Native, Expo, Firestore, Expo Client App, Android Studio and Xcode Simulator.

Features

  • A page where users can enter their name and choose a background color for the chat screen before joining the chat.
  • A page displaying the conversation, as well as an input field and submit button.
  • The chat provide users with two communication features: sending images and location data.
  • Data gets stored online and offline.

Screeshoots

Chat App Loading Chat App Start Chat App Features
See project on GitHub

Meet App - PWA

A serverless, progressive web application (PWA) with React using a test-driven development (TDD) technique. The application uses the Google Calendar API to fetch upcoming events.

Technologies Used

This PWA(Progressive Web Application) was built using TDD(Test-Driven Development) process with JavaScript, CSS, React, AWS Lambda, Jest, Cucumber, Puppeteer, OAuth2, GoogleApi, Enzyme, React Scripts, Recharts and npm.

Features

  • Filter events by city.
  • Show/hide event details.
  • Specify number of events.
  • Use the app when offline.
  • Add an app shortcut to the home screen.
  • View a chart showing the number of upcoming events by city.

Screeshoots

Meet App Home Meet App Main Meet App Mobile view
Site
See project on GitHub

myFlix SPA - React

This is a Single Page App(SPA) made using React.js that will consume the API that I created, resulting in a responsive application designed for movie enthusiasts who enjoy reading information about different movies.

Technologies Used

This SPA was built using HTML, SCSS, JavaScript, React, React-Bootstrap, Redux and my external API.

Features

  • User-friendly interface with smooth navigation
  • Ability to filter movies
  • Ability to save favorite movies
  • Ability to view information about movies, genres, and directors
  • Ability to update user profile information

Screeshoots

My Flix Login My Flix Signup My Flix Main My Flix Profile
Site
See project on GitHub

myFlix API

This is a REST API, which allows registered users to browse movies, add and remove titles from their list of favorites, and update their personal data. The app is built using Node.js, Express.js, MongoDB, and Mongoose.

Technologies Used

This API was built using Node.js, Express, MongoDb, Mongoose and ESLint.

Features

  • Return a list of ALL movies to the user
  • Return data (description, genre, director, image URL, whether it’s featured or not) about a single movie by title to the user
  • Return data about a genre (description) by name/title (e.g., “Thriller”)
  • Return data about a director (bio, birth year, death year) by name
  • Allow new users to register
See project on GitHub

PokeDex Retro

A small web application with HTML, CSS, JavaScript and Bootstrap that loads data from an external API and allows you to view the data points in detail. It is a simulation of the Pokédex from the Pokémon cartoon.

Technologies Used

This website was built using HTML, CSS, JavaScript, Bootstrap which uses an external API.

Features

  • Load data from an external source (API)
  • View a list of items
  • On user action (e.g., by clicking on a list item), view details for that item

Screeshoots

PokeDex Retro PokeDex Retro 2
Site
See project on GitHub

Here are another projects I've worked on recently.

Product Preview Card

This is a responsive product preview card demo that I created with HTML and CSS.

See project on GitHub

Interactive Component Review

I was responsible for the frontend for a Review page. It’s written in JavaScript. Additionally, I've created the HTML and CSS templates.

See project on GitHub

Order Summary

Within this project, I was responsible for the frontend. I've created the HTML and CSS.

See project on GitHub

QR Code Card

I developed a static webpage using HTML and CSS that displays a QR code. The page is designed to be responsive, which ensures that the QR code is displayed correctly on both mobile and desktop devices.

See project on GitHub

Habit Tracker(TypeScript)

I developed this project with the supervision and assistance of an experienced mentor. The project is a habit tracker web application inspired by the display of commits on Github. The frontend was built using TypeScript and React for the web, and React Native for mobile. The backend was built using Node.js.

See project on GitHub

ToDo List

I developed this simple TO-DO list to put into practice my recent knowledge about Vue.js, and I was supervised throughout the process.

See project on GitHub