×

Pokédex App

Objective

To build a small web application with HTML, CSS, and JavaScript that loads data from an external API and enables the viewing of data points in detail

Screenshots

Technologies used

• App was created with vanilla JavaScript
• Data is loaded from pokeapi.co
• Bootstrap and jQuery used for styling and navigation bar

Link to live app

See project on Github

Close window

×

Movie REST API

Objective

To build the server-side component of a “movies” web application. The web application will provide users with access to information about different movies, directors, and genres. Users can able to sign up, update their personal information, and create a list of their favorite movies.

Technologies used

• Node.js: JavaScript runtime environment
• Express: Back end web application framework for building RESTful APIs with Node.js
• MongoDB with Mongoose: NoSQL database and Object Data Modeling library for Node.js
• bcrypt: Express middleware for password hashing
• body-parser: Express middleware for parsing request bodies.
• express-validator: Middleware for input validation in Express.
• jsonwebtoken: Library for JWT ( JSON Web Token) generation and verification
• morgan: request logger middleware for Node.js
• passport: Authentication middleware for Node.js.
• passport-jwt: Passport strategy for JWT authentication.
• passport-local: Passport strategy for username/password authentication.
• swagger-jsdoc: library that reads JSDoc annotated source code and gereantes an OPen API specification
• swagger-ui-express: Express middleware for auto-generating swager-ui generated API docs

The app is currently hosted with heroku.

Endpoint documentation with swagger

Link to live project

See project on Github

Close window

×

Movie App client

Objective

Using React, build the client-side for the movie app based on its existing server-side code (REST API and database).

Screenshots

Technologies used

• React, React-DOM
• Bootstrap, React-Bootstrap
• Prop-Types
• React-Router, React-Router-DOM
• Parcel, Parcel/transformer-sass

The client side app is currently hosted on netlifly.

Link to live app

See project on Github

Close window

×

Meet App

Objective

To build 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.

Screenshots

Technologies used in project

• JavaScript
• React
• AWS Lambda functions to handle authentication process with Google
• Google Calender API
• Test Driven Development
• Test runner jest for unit and integration tests
• Jest-cucumber for acceptance tests
• Pupeteer for end-to-end tests
• gh-pages for deploying and hosting with GitHub Pages
• Web App Manifest and Service Worker was implemented to convert app into a Progressive Web Application
• Recharts for data visualization

Link to live App
To view the app, login with a google account is required.

See project on Github

Close window

×

Chat App

Objective

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

Main Features

Users are authenticated anonymously with Firebase. Conversations and images are stored in Firestore Database. Chat are stored locally on the device to allow for offline viewing. Users are able to choose pictures from their library or take new pictures and post them. Users are able to send their current location in a map.

Screenshots

Technologies used

• React Native
• Expo
• Gifted Chat
• Android Studio for testing
• Google Firebase/Firestore

See project on Github

Close window

×

Angular Movie App

Objective

Using Angular, build a client-side for an application called Movie Api based on its existing server-side code (REST API and database), with supporting documentation.

Features

The app displays a welcome page where users can register or login. After login, users can browse movies, click on genre, director or synopsis button to view more details, and add or remove movies from their favorites. Users can navigate to their profile view, where they can update their user information, deregister and see the list of their favorite movies.

The project was documented using Typedoc.

Screenshots

Technologies used

• Angular: A powerful web application framework
• Angular Material: A UI component library for Angular applications.
• RxJS: A library for reactive programming using Observables.

Link to live app.

See project on Github

Close window

×

Portfolio website

Objective

To build a website to showcase my professional portfolio.

Screenshot

Technologies used

The app is a single-page, responsive, static website that was mainly built with HTML and CSS, with a little bit of JavaScript to help with the menu and the modals.

See project on Github

Close window