Software Developer

Driven by community, ideas, and continual learning

• 🔭 View my special projects at : https://kaylerobson.com
• 🤝Connect with me! LinkedIn
• 📧How to reach me kayle.robson@gmail.com

Languages: Javascript, HTML5, Python, SQL, C, C#

Libraries and Frameworks: Node.js, Express.js, Tailwind, Formik, Framer Motion, MUI, Boostrap, Axios, Sass, React.js, Flutter

Databases: MongoDB, MySQL, AWS, SupaBase

Web Protocols: RESTful, JSON, HTTP

Soft Skills: Communicator, Problem-solver, Continuous Learner, Team Player, Creative, Organized, Planner, Agile Methodologies

Dev Tools: Git, Github

Project progression over the last 4 years

Frontend Backend

Full-stack application, React for the frontend, and Node for the backend.

An interactive multiplication app for all ages to work on their multiplication skills. This was inspired by by addition to Wordle!

https://math-wizardly.netlify.app/

Frontend

Having common interests can create empathy and understanding between co-workers. As companies go remote giving employees more freedom it can remove the a company’s culture by not giving the opportunity for co-workers to find common interests outside of work.

Our app helps to build that bridge. We want to repair those bonds of common interest but also bring a sense of company pride and gamification to it. As companies take the step towards going fully remote, employees can lose the banter and kinship. With our app you can share events with other employees and compete against other companies for points

Kayle Robson @revyrob
Aparna Dhara @AD9-1
Angela Kwok @angelatyk
Ainur Saduova @NuraSad
Henry Bellman @hheennrryyb

1. Each project must be deployed on Vercel and have a public demo available.
2. Each project must have a demo video. Feel free to get creative with this!
3. Each project must have a README file with details on how to run the app.

Frontend:

• Create a user and be associated with one of the selected companies within the dropdown list. You will be required to finished sections of your profile before you can proceed.
• Once your profile is created, you can join groups and events created by groups.
• The events can be help online or offline.
• Any user can create an event or a group.

Database:

• Supabase hosts all our tables.
• We used Supabase for Authorization.
• We query our backend tables from the frontend.

What it can do Login page uses Supabase Authenticate

Profile Page Their posts best liked to least Their groups Awards, dummy data, potential to work on in the future

Update your profile with the icon in the top right corner

SideBar Nav

Explore: User Posts Likes (affects the Leaderboard posts for a company, higher liked ones will go first that are from a company employee) How the # is associated with the group

Groups View all the groups See what members are in the group Read more about the group Click on a group Within the group: Join or unjoin a group Checkout the events for the group in the calendar Checkout events on the side buttons Pop-up shows info about the event Join event See who is in the event

Calendar Shows all the logged in users events Can hover over and it will show more

Leaderboard All the companies who have remote employees participating in Reconnect Big bubbles mean more points, little bubbles mean less

Leaderboard Single Checkout the company, it’s info, maybe it is looking for more employees? Top star holders The posts from it’s employees that are highly liked to lowest

Create Post

Create Group

WireFrame

Ticket board

We deployed using Vercel

Check it out 👉 HERE

https://www.loom.com/share/86dcf28cce6c4021ba549375bfb8eb76?sid=a9870daa-52c4-4c69-a7b3-ad86d45f8deb https://www.loom.com/share/cee81c0a5af84b0f80bab70295999e0a?sid=5148e5f3-4937-40c9-9a3c-bffdace6377f https://www.loom.com/share/5d84a510665b4fa88bfd34bcbf7b229c?sid=0f9857f8-b270-4156-b886-fa83969b38a1

To install and run locally, you may follow these steps:

1. To start using this app you first need to clone the repository: git clone git@github.com:NuraSad/reconnector-frontend.git
2. Then you will need to install all the required packages for the application. Run this command (if you're using npm): npm i
3. Run the frontend by the following command npm run dev
4. Create a .env file in the root folder and add the following to the file: VITE_SUPABASE_URL and VITE_ANON_KEY and VITE_GOOGLE_API_KEY in your local .env file.

https://intergalactic-planetary.netlify.app/

Backend | Frontend

Intergalactic Planetary was meticulously crafted as an ambitious endeavor for a thrilling week-long hackathon. The team, consisting of three highly skilled and passionate developers, united through the dynamic Hackathon discord channel. With their unwavering dedication and boundless creativity, they embarked on an exhilarating journey, meticulously shaping a captivating idea. The team's meticulous planning involved the creation of tickets and tasks, seamlessly organized through a Trello board. Furthermore, they maintained daily communication via Discord, fostering a harmonious synergy that propelled the project forward.

The hackathon presented a unique challenge: to create a full-stack application that would enable students to delve into the awe-inspiring realm of the solar system. As an added twist, the team was required to style all the planets using CSS alone, showcasing their mastery of front-end design. Moreover, each planet was given its own distinctive page, brimming with captivating and distinct information, offering a comprehensive learning experience for students. To bring this vision to life, the team employed cutting-edge technologies. The React framework was chosen to power the dynamic front-end, ensuring a seamless and interactive user interface. For the back-end infrastructure, a robust MySQL database was meticulously designed and implemented, leveraging the power of AWS for hosting and scalability. Amidst fierce competition from five exceptional teams, we humbly stand as the triumphant victors.

Tech Stack Frontend

• React JS

• Sass – All planets were created only use Sass, images and image laying was not allowed.

Backend

• NodeJS, Express - Entire backend was built to handle charts/ genre data, user accounts, shareable links, and many more features.

• AWS

• MySQL

https://brianconfantomes.com

Frontend

Briancon Fantomes is an exceptional audio tour business nestled in the charming locale of Briancon, France. As a fully functional business page, it offers visitors an immersive experience through captivating audio tours available in both French and English, complemented by a comprehensive map highlighting all the tour stops.

To maximize its online presence and reach, the website cleverly utilizes cross-referencing with popular platforms such as Google, Facebook, Instagram, TripAdvisor, and Spotify. This strategic integration not only enhances the visibility of Briancon Fantomes but also amplifies its Search Engine Optimization (SEO), ensuring that it garners the attention it deserves.

To enhance the user experience, the page leverages the power of remarkable npm libraries such as Framer-motion and React-audio-player. These libraries contribute to the seamless navigation and immersive audio playback, elevating the overall quality of the audio tour experience.

Aesthetically, the website exudes elegance and modernity with its stylish design, thanks to the utilization of the Tailwind CSS framework. This choice of styling enhances the visual appeal and ensures a delightful browsing experience for visitors. Effortlessly catering to the needs of a diverse audience, the website incorporates separate JSON files to store text content in both French and English. This intelligent design allows for easy language switching, facilitated by React useContext. Visitors can select their preferred language within the navbar, and the application dynamically adapts to their choice. Furthermore, to streamline the experience, the selected language preference is conveniently saved within the user's browser settings, providing a personalized and seamless browsing experience upon subsequent visits.

Briancon Fantomes stands as a shining example of a meticulously crafted audio tour business, seamlessly blending technology, captivating storytelling, and innovative design. It not only showcases the beauty and history of Briancon but also serves as a gateway for visitors to immerse themselves in an unforgettable journey through time and culture.

Tech Stack Frontend

• React JS

• Framer Motion

• Tailwind

• React useContext - to manage language change which refers to a json file where the french and english version of the website are kept.

• React-audio-player - a npm library which plays the audio files

https://operation-mother-earth.netlify.app/

Backend | Frontend

Operation Mother Earth is an innovative and comprehensive full-stack application designed to educate children about the pressing issue of electronic waste. Rooted in React, this multi-page application seamlessly leverages MongoDB as its robust and reliable database.
The application features three engaging sections, each with a unique purpose. The Storyboard Game section invites children on an interactive journey, allowing them to explore the world of electronic waste through captivating storytelling. The Electronic Waste Recycling Center Finder uses Google APIs to locate recycling centers within a 10km radius of the user. The results are then mapped onto the interactive map and listed below the map. The user can also add an e-waste recycling center to the map, using Google API Geocode. The Education section further enhances learning through a combination of engaging videos and informative Q&A sessions. Users can add their questions to the database, which will be answered at a later time.

Tech Stack Frontend

• React JS

• Framer Motion

• Sass

• Formik

• MUI

Backend

• MongoDB

• Express

• Node

• Google APIs

• RESTful APIs

• Mongoose

Instock was a group assignment where we were tasked with creating a full-stack application that enables users to perform CRUD operations on multiple pages connected to a single database. The application allows users to add, remove, and edit warehouses in an existing warehouse list, as well as manage items stocked within each warehouse. The frontend was developed using React, while the backend was built with Node.js and Express. For data storage, we utilized a JSON file stored on the backend, which was accessed through the RESTful APIs we developed.

Backend | Frontend

Tech Stack Frontend

• React JS

• Sass – All planets were created only use Sass, images and image laying was not allowed.

Backend

• NodeJS

• Express

• Axios

• RESTrul APIs

https://revyrob.github.io/bikeBriancon/

Frontend

Bike Briancon is a biking application for Serre Chevalier which is located near Briancon, France. This application was created by recording my own data and scraping bike trail data. I built this application by sel-learning different tools, such as HTML, CSS, Bootstrap, and QGIS.

Tech Stack Frontend

• HTML5

• CSS

• Boostrap

• Javasript

• QGIS - built with the Open Source program QGIS. Added the gps data for the trails, added the geolocation for the user, and the click-able trail index. The QGIS map had a conversion to web.