Welcome to my portfolio.

E-commerce shop

An anime figures shop. Some pages are private and are protected: the user needs to login in order to see them. Is web responsive, you can signin/out and signup as is connected to the database, add products to the cart or wishlist (if you are a user, it will be saved to the database), buy by using a test card (424242...). The orders page contains all the products you have bought. Check the ReadMe in my repo for more information.

Technologies used:

React (state, hooks (custom ones as well)), Node.js, Express, API's, Bootstrap, Stripe (for the payment functionality), Firebase (for authentication and database), some npm packages: moment, react-currency-format, dotenv, Vercel for hosting and Photoshop.

Netclone

Responsive Netclone streaming website. Has four main pages: home, signin, signout and browse (this one is protected to allow users only). There is one video to play as well.

Technologies used:

React (custom hooks, compound components, styled components), Firebase for the database and hosting, React testing library for the tests, Fuse.js for the search bar.

Instagram clone

Responsive Instagram clone. Has four pages: login, signup, dashboard and profile page.

Technologies used:

React(custom hooks), Firebase for the database and vercel for hosting and TaiwindCSS.

Amazon clone

An amazon clone where we can add and remove products from basket. Create users, login/out, and purchase (with a test card, 424242...).

Technologies used:

React, Axios for HTTP requests, Firebase as database and Stripe for payments.

Random quote machine

A website that generates random quotes everytime the 'New quote' button is clicked. The font colour and the background color changes at the same time as the quotes.

Technologies used:

HTML, CSS, Javascript, jQuery.

Markdown previewer

A markdown previewer text area where we can write our input and a preview area where the converted text will appear.

Technologies used:

HTML, CSS, Javascript, 'Marked' Npm package.

Pomodoro clock

A pomodoro clock where we can set the work time and the break time. When 'play' is pressed the countdown of the work time starts, when this finishes, the countdown of the break starts. It's a cycle. Everytime a countdown reaches 00:00, it beeps. We can play, pause, stop, increase and decrease the time.

Technologies used:

React (using state hook).

Javascript calculator

A calculator that sum, deduct, multiply and divide.

Technologies used:

React (class components), Math.js npm package.

Drum machine

A drum machine where each button plays a different sound, and shows the name of it at the same time. It also has a volume toggle.

Technologies used:

React (functional components, state hook), Bootstrap.

Data Visualization with Bar Chart

Data visualization of the United States gross domestic product.

Technologies used:

HTML, CSS, Javascript, D3.js library.

Data visualization with a scatterplot graph

Doping in Professional Bicycle Racing scatterplot graph.

Technologies used:

HTML, CSS, Javascript, D3.js library.

Visualize data with a heat map

Monthly global land-surface temperature (1753 - 2015) data visualization with a heat map.

Technologies used:

HTML, CSS, Javascript, D3.js library.

Visualize data with a choropleth map

Choropleth map with the United States Educational Attainment.

Technologies used:

HTML, CSS, Javascript, D3.js library.

Visualize data with a treemap diagram

Treemap diagram with the top 100 most sold video games grouped by platform.

Technologies used:

HTML, CSS, Javascript, D3.js library.

Timestamp Microservice

A timestamp microservice that can take utc format data or unix and returns both of them as a json.

Technologies used:

HTML, CSS, Javascript, Node.js, Express.

File Metadata Microservice

A file metadata microservice where we can submit a file, and we receive the file name, type, and size in bytes within the JSON response

Technologies used:

HTML, CSS, Javascript, Node.js, Express, MongoDB, Multer npm package.

Request Header Parser Microservice

A headparser that returns a json with our ip address, our system language and the software we are using.

Technologies used:

HTML, CSS, Javascript, Node.js, Express.

Url shortener

A url shortener that validates the link and then creates an ID for this link. This ID would redirect to the desired website.

Technologies used:

HTML, CSS, Javascript, Node.js, Express, MongoDB, Mongoose, Url-Validator and Short-Id npm packages.

Exercise tracker

An exercise tracker where we can create a user and add exercises with the user id. We can also get the exercises log.

Technologies used:

HTML, CSS, Javascript, Node.js, Express, MongoDB, Mongoose.

Sudoku solver

A sudoku solver. Periods are blank spaces and numbers are the sudoku starting numbers. An error will show up if a sudoku cannot be solved, if there is a invalid character/value or the length of the puzze is incorrect.This project was specially difficult. A recursive function and the use of matrix were needed.

Technologies used:

Node.js, API's, Mocha, Chai.

Metric imperial converter

A metric imperial converter that converts gallons, liters, miles, kilometers, pounds and kilograms. The aim of this project was more centered in Mocha test framework and Chai assertion library. There is two tests: unit tests (used to test the function that converts the unit measurement) and functional tests (used to test the API's).

Technologies used:

Node.js, Express, Mocha, Chai.

Issue tracker

A project issue tracker where we can create, update and delete an issue. We can also group them by project name. It returns errors when a required field is empty, when we update/delete and an ID that does not exist, etc.

Technologies used:

Node.js, Express, MongoDB, Mongoose, Mocha, Chai, Bson-objectid npm package to generate object ID's.

Personal library

A personal library where we can create/delete books and add comments.

Technologies used:

Node.js, Express, MongoDB, Mongoose, Mocha, Chai, Bson-objectid npm package to generate object ID's.

American-British translator

An american-british translator that returns the translated words highlighted. It also returns error if there is missing fields, or a message if translation is not needed.

Technologies used:

Javascript, Node.js, API's, Mocha, Chai.

Tribute page

A simple tribute page with my cat's photo on it and some funny facts of cats.

Technologies used:

HTML, CSS.

Survey form

A simple survey form about our resources if we are learning programming.

Technologies used:

HTML, CSS.

Product landing page

A product landing page about slaps (yes, slaps, this page was inspired by my mood the day I did it 😂)

Technologies used:

HTML, CSS.

Technical documentation page

A basic documentation page that explains some HTML tags.

Technologies used:

HTML, CSS.