Steven Bautista,
Fullstack Developer
Steven
Matthew
Bautista
Fullstack
Developer
Ecommerce CMS
Description
A React App that uses apollo-client, apollo-server, graphql, prisma, and CockroachDB (MySQL) to store and edit items on file. Backend is written with express.js and done so in typescript. Front end uses React, TailwindCSS, webpack and React-router-dom to display pages. Deployed as a docker image on Fly.io
Ecommerce Frontend
Description
A Nextjs Typescript App that uses apollo-client, apollo-server, graphql, prisma, and CockroachDB (MySQL) to display items that can be added to the user's account. Google OAuth is used with next Auth to sign in users and then creates an account on the backend. TailwindCSS, webpack and React-router-dom to display pages. Deployed to vercel.
Kafka Demo
Description
A React, Typescript app that uses socket.io to communicate with a Node.js, kafka consumer backend. The Textual python app sends info via a post request to a go gin kafka producer backend. The docker compose sets up the kafka.
Apex Air Electric
Description
An Angular App that uses angular router, forms, tailwind and rxjs. Done as a freelance project in collaboration with a friend for a HVAC company in the local area. The website was deployed on Vercel.
Angular Clips
Description
An Angular App for uploading and sharing videos that was made throughout a udemy course. The app uses angular router, forms, video-js, Ffmpeg, tailwind and rxjs. Files and authentication is implemented through using firebase.
Udemy Machine Learning (AI) Course
Description
Developed three distinct models covering classification and regression. Processed data for training and utilized techniques such as hyperparameter tuning for model optimization. Used a Logistic Regression model for heart disease prediction and implemented a time series regression model using RandomForestRegressor to forecast bulldozer prices. Leveraged transfer learning with MobileNetV2 and TensorFlow to construct a classification model on google colab.
Pokedex Android App
Description
An android app written in java that utilizes the pokemon api to get information and display it in a recycler view. Retrofit is used to make the api calls, glide is used to attach images to the image view, lombok is used to prevent boilerplate code.
Electron Scraping App
Description
An electron desktop app created with Typescript/TailwindCSS. Creates and scrapes webViews with chromium browser to get data from job postings. Uses the contextBridge to send function from ipcMain to ipcRenderer.
Next Music
Android Firebase App
Description
An Android app made with java that lets users sign in or register with Firebase Auth. When authenticated, the user can edit details connected to a Firestore Database for their profile.
Javalin-Java Bank Backend
Description
A bank backend app made with the javalin framework in Java that interacts with a postgresql database. Uses Docker-Compose and Docker to run the application and the PostgreSQL database. Uses JWT tokens and hashing for authentication and storing passwords. Users and accounts have a one-to-many relationship.
Java Bank Cli
Description
A bank CLI app made with java that interacts with a postgresql database. Has the following features login, register, withdraw, deposit, viewBalance. Passwords are hashed and stored within the database.
WebGL Demos
Description
A React/Typescript application deployed on gh-pages that exhibits the usages of WebGL graphics api along with the gl-matrix library. Tailwind CSS is used for the navigation sidebar. I'm slowly adding on to the project as I make more demos.
React Native Clock
Description
A Typescript, React Native, expo app that uses react native Skia and reanimated library to create a canvas component with movement. Clock hands are rotated after every second in order to display the current time.
Clickable Three Demo
Three.js Demo
Description
A Vite React app that uses Three.js, react-three/drei, react-three/fiber, and gsap to create a 3D Environment with multiple lights, an orbital camera, and motion using gsap. A model (car) was imported and converted into .glb file and placed into the scene. App was deployed with netlify.
Webworker Animation
Fibonacci Calculator
Description
A python flask app that serves a webpage and calculates the fibonacci value on another endpoint. Uses pytest on the backend to test if functions work. Uses playwright to test functionality of the frontend app.
Warp Convert
Description
A Next.js app that uses serverless functions to process images to resize and change file format. The MantineUI library is used to make components paired with Tailwind CSS. Code was written in Typescript and deployed on Vercel.
Tflite Obj.Detection
Description
An Android App that uses a tensorflow lite model made with the tensorflowlite model maker library on python. Code is writen in Kotlin on Android Studio. The user selects an image and it gets pasted onto the image view with bounding boxes appended on the image.
d3.js regression plot
Nasa Project (Udemy)
Description
A React/Express.js app that is deployed in a docker container on an AWS EC2 instance. MongoDB is used to store data and the initial information was pulled/cached from the spaceX rest API. Express router is used for versioning and organizing the code. (EC2 currently down)
Smoothies Recipes React Native App
Description
A React native app with a postgreSQL database on Supabase. Has a searchbar that makes throttled api calls to the database which is filtered using a database function on Supabase. The pg_trgm extension is used to search data. Uses React native navigation between screens.
Nextjs Zayarenovations
Description
A Typescript/Next.js app made for a small home renovation business. Some of the libraries used on the site is TailwindCSS and vercel serverless functions. A domain name was bought and set up to connect with the website. Using the Lighthouse plugin, I was able to improve the speed and functionality of the website. Code is in a private repo.
Drawing App
Description
A Nextjs app that utilizes the canvas element for drawing. Stylized components were used for the navigation component. Redux was used to share information from the inputs to the canvas context to allow for customization. The app was deployed using vercel and currently only works on the desktop.
Ionic React App
Description
An Ionic application I made for my friend's small renovation business. Written in Typescript, the site has a form that uses regular expressions to validate input from users. The backend is a python flask app that sends the data as an email to the owner. The flask app was deployed as a docker container onto google cloud run. The site itself is deployed on firebase. The app can be made into mobile app for IOS and Android.
Tags
React Assessment
Description
Utilizes the redux-toolkit and the createAsyncThunk function to make an API call to display a searchable list of profile cards. Tags can also be added and then searched through. The point of the asssessment was to test my frontend skills. The site was made to be responsive application that will adjust to window size. A serverless function deployed on vercel acts as the backend.
Mandarin HSK1 Training
Description
A react typescript app that uses a random number to continously display flash cards for HSK level 1 vocabulary. Context is used to share information between components. The backend is an express app that accesses a MongoDB server to retrieve the chinese character list. Tailwind CSS is used to style the components
Crwn Clothing Ecommerce App
Description
A react app made while following a udemy course. This site utilizes Firebase admin to handle users loging in and out of the site. Firebase firestore is used to hold the data of items listed. Stylized components are used for the styling and Redux/Redux-Saga is used to share information between components. Stripe is used as a payment system to carry out transactions.
React Square Game
Description
This app has 6 levels where your goal is to get the red circle to reach the yellow square while avoiding the purple square. Framer motion library is used to move the div element, useContext shares state between the game and score cards, useEffect/useRef is used to keep track of the time per stage, and the useEffect hook keeps track of any changes to the state in order to progress the game.
Robofriends Testing
Description
An app of functional and class components made throughout the udemy course that utilizes jest for unit testing react components with enzyme. The application also makes use of redux and redux-thunk for state management and is a progressive web app. Making use of an api call, the profile card information is uploaded and can be searched through using the search bar at the top. The counter button was added only to show how to test it on jest.