My work:
About this project:
Client created using React.js library. This client consumes an existing school database REST API. This Full stack application provides a way for users to administer a school database containing information about courses. Users can interact with the database by retrieving a list of courses, viewing details for a especific course, as well as creating, updating and deleting courses in the database. In addition, users are required to create an account and sign in to make changes to the database.
Technical specifications:
- ⑇ JSX and JavaScript was used to build out the components for the application in a modular fashion.
- ⑇ React Router was used to set up routes. React Context was used for distributing state (data) throughout the app. Axios was used to fetch data from the REST API .
- ⑇ Users can sign up and log in to their accounts. Basic Authentication is used to support users signing in. User´s password hashed using Bcrypt.
Technologies used:
- 🗸 React.js (JSX, React Router, React Context)
- 🗸 Axios
- 🗸 Mongo DB
About this project:
Professional portfolio of the actress Karla Garrido created with React.js library. A single page application (SPA) that allows visitor get to know more about the actress. Throughout an easy navigation the users can go over the different views and content of the application.
Technical specifications:
- ⑇ JSX and JavaScript was used to build out the components for the application in a modular fashion.
- ⑇ React Router was used to set up routes and distribute content. .
- ⑇ Form validations using regular expresions.
- ⑇ SEO optimizated.
Technologies used:
- 🗸 React.js (JSX, React Router)
- 🗸 JSX
- 🗸 CSS
About this project:
Comparison website for financial products that serves as a lead generator. Users can get to know the companies in Mexico that provide loans, they also get to know the requirements, benefits, and more information regarding the companies and the characteristics of each product. If they decide to get a loan from any of the company they will have the possibility to be redirected to the companies website and request their loan.
Technical specifications:
- ⑇ Node.js on the Express framework used for routing and serving content
- ⑇ Pug templates used as template technology for creating the content of the views
- ⑇ Constant content optimization
Technologies used:
- 🗸 Node.js
- 🗸 Express
- 🗸 Pug Templates
- 🗸 JSON
About this project:
Application for a library that helps managing the collection of books. It is possible to Create a new book entry, Update an existing book, find an existing book, and Delete it.
Technical specifications:
- ⑇ Node.js on the Express platform is used the backend for serving content, handling requests, and handling errors.
- ⑇ Sequelize is used for validation of forms submission and for communicating and handling CRUD operations with an SQLite database.
- ⑇ Pug templates are used for creating the content of the views.
Technologies used:
- 🗸 Node.js
- 🗸 Express
- 🗸 SQL
- 🗸 Sequelize ORM
- 🗸 Pug templates
- 🗸 CSS
About this project:
Analytics dashboard built with the Chart.js library.
Technical specifications:
- ⑇ Edited and animated scalable vector images (SVG).
- ⑇ Responsive layout built from scratch with HTML, CSS, and JS following a provided mockup.
- ⑇ Local storage used for storing settings selected by the ser.
Technologies used:
- 🗸 Chart.js
- 🗸 Javascript
- 🗸 CSS3
- 🗸 HTML
About this project:
Rest API for enabling users to administer a school database containing information about courses. Users can interact with the database by retrieving a list of courses, as well as adding, updating and deleting courses in the database.
Technical specifications:
- ⑇ REST API was created with Node.js on the Express framework for routing and serving content.
- ⑇ MongoDB used for storing the data. Mongoose ORM used for data modeling, validation , and persistence.
- ⑇ REST API tested using Postman
Technologies used:
- 🗸 Node.js
- 🗸 Mongo DB
- 🗸 Mongoose ORM
About this project:
Single Page Application(SPA) which retrieves images from Fliker API and displays them. It is possible to search for any kind of images that the user desires in the search bar.
Technical specifications:
- ⑇ Create React App was used for creating intial setup of the app.
- ⑇ React Router used to set up routes.
- ⑇ Axios used to fetch data from the Flickr API and for displaying the images.
Technologies used:
- 🗸 React.js
- 🗸 JSX
- 🗸 Axios
- 🗸 CSS
About this project:
Registration form enhanced with Javascript ir order to make it more user friendly by adding conditional behavior, interactivity, and validations
Technical specifications:
- ⑇ Real time validation for the most important fields is provided. Form cannot be submitted unless all required fields are filled correctly.
- ⑇ regular expressions are used to validate the input provided by the user in real time.
- ⑇ Interactivity and functionality is provided entirely with JQuery library.
Technologies used:
- 🗸 Regular expressions
- 🗸 JQuery
- 🗸 CSS3
- 🗸 HTML
About this project:
Directory of a company where personal information is available for each employee
Technical specifications:
- ⑇ Responsive layout and modal window built from scratch using CSS and JS matching a provided mockup.
- ⑇ Data obtained from the "Random User" API in JSON format using JS promise based Fetch API.
- ⑇ Data managed and displayed focusing in Object-oriented programming.
Technologies used:
- 🗸 Fetch API
- 🗸 Javascript
- 🗸 JSON
- 🗸 CSS3
- 🗸 HTML
About this project:
Fun game where you need to guess the hidden phrase by clicking on a letter in the keyboard on your computer or in the virtual keyboard present, after 5 wrong attemps the game ends. (not mobile responsive)
Project built entirely with HTML CSS and vanilla JS .
Technical specifications:
- ⑇ Project build with an Object Oriented Programming approach; using JavaScript Classes to create functionability of the game
- ⑇ Usage of event listeners for adding interaction to the game
Technologies used:
- 🗸 Javascript
- 🗸 CSS3
- 🗸 HTML
About this project:
Interactive picture gallery where you can search for the images of a landscape that you like the most.
Technical specifications:
- ⑇ Responsive layout created from scratch with HTML and CSS following a provided mockup.
- ⑇ Modal window created using a JQuery plugin.
- ⑇ Custom search function created with JavaScript;
Technologies used:
- 🗸 Javascript
- 🗸 JQuery
- 🗸 CSS3
- 🗸 HTML
About this project:
Style framework built entirely with HTML and SASS, intends to be used as a styleguide for common elements in websites such as images, buttons, etc.
Technical specifications:
- ⑇ Responsive layout built with HTML and SASS
- ⑇ Usage of mixins, extends, variables, conditionals within SASS
Technologies used:
- 🗸 SASS
- 🗸 HTML