Japan-based full stack developer
Robert Grayson
Keeping pace with new technologies.
Scaling the heights of creativity.
Breathing fresh air into your online experience.
About Me
As a self-taught full stack developer, I have spent the past year passionately learning and perfecting my skills. My background in teaching and creating courses brings a unique perspective to my projects, and I am always striving to make my sites engaging and user-friendly.
I am now seeking a role as a web developer where I can continue to learn and contribute to meaningful projects in an exciting and dynamic environment. I am dedicated to constantly developing my skills and believe I would make a valuable addition to any team.
Living in Japan for the past 10 years has given me a deep appreciation for the culture and love for the country. When I'm not coding, I enjoy pushing myself physically by running marathons and hiking the beautiful mountains of Japan, including the 'hyakumeizan'.
Skills and Tools
I am equipped with the following languages, libraries and technologies to help get your project over the finish line:
The following are some of the key professional and soft skills I have developed along my journey:
- Taught ESL to young and adult learners
- Performed basic JP to EN translation
- Collaborated with a diverse, international team
- Organized and hosted Meetup events in Tokyo
- English level: Native
- Japanese level: Conversational
- Developed/ managed eLearning content through LMS (Moodle)
- Designed and hosted training sessions for instructors
- Utilized original research and background in linguistics to create courses for test preparation, academic skills, and humanities subjects
- Authored a program to automate experiments with no previous experience and little documentation (Praat)
- Harnessed AI (ChatGPT) to vastly accelerate the process of producing learning material
- Created marathon training plans, multi-day hiking routes and barrier-free travel itineraries for myself and others
Projects
Quiz App
Brief
A web app for creating, editing and taking quizzes. Users can use voice commands to control the flow of the quiz.
Visit site
Story
While studying for the Japanese Language Proficiency Test (JLPT) it occurred to me that it would be helpful to be able to test myself on questions from the exam while doing something else, such as housework. My solution was to build a web app that would allow users to take a quiz using their voice.
The actual quiz portion is very simple, presenting users with multiple-choice questions and tracking their scores. It is possible to display incorrectly-answered questions at the end of the quiz. I integrated the react-speech-recognition node package to allow voice controls, though as of writing this functionality is only considered stable in the Chrome browser.
To handle the management of quizzes and users, I built a backend using Node.js, Express and MongoDB. I created various endpoints to allow the addition, editing and deletion of quizzes and individual questions, plus a system for registering and logging in users. I also added the ability for users to 'like' quizzes and thus add them to their list of favorites.
The simple frontend uses styled-components as a means of applying CSS. I enjoyed experimenting with this approach and appreciated how it allows for modular design that groups form and function in an intuitive way. For advanced state management, such as tracking the logged-on user, I used Redux Toolkit.
Little Lemon Restaurant (WIP)
Brief
A homepage for a fictional Mediterranean restaurant in Chicago. Users can place orders for delivery or make a reservation to eat in.
Visit site
Story
The capstone project of the Meta Front-End Developer Professional Certificate, a 7-course online specialization covering front-end fundamentals, advanced react, UI/ UX concepts and more, requires students to submit a simple website for a restaurant. I was provided a brief and style guide, and had to use the skills I picked up during the specialization to complete the task.
THe original brief was fairly simple, requiring a main homepage and a reservation page. I made sure to include proper validation for the reservation form, and implemented unit tests to check the setup was correct. I added components such as cards for the specials and a carousel for testimonials on the homepage, and used vanilla CSS for all styling.
Once I met all the requirements for the course, I decided to take the opportunity to add more features and learn some simple backend concepts. I added a node.js server to interface with a database that would store menu items and categories. This allowed me to build a food ordering system. For payments, I used the Stripe API, which allows mock payments for testing purposes.
With the payment system implemented, with orders being recorded in the database, I used Firebase for user authentication. While a registration/ login system currently exists, I would like to link it to the order and reservation systems in future so users can see their past activity and save their personal details. The project is currently hosted on Netlify for the front-end and Render for the back-end. As the base tier of Render only activates the server when called, the 'Specials' and 'Menu' sections may take some extra time to load on initialization.
TOEFL Speaking App
Brief
A web app for practicing TOEFL independent speaking questions. The user can select a question from a list, choose a question at random, or input their own question. The question will appear on screen along with a (customizable) timer. Users have the option of allowing the app to access their microphone, recording their answer and displaying the three most recent recordings for them to download.
Visit site
Story
As a TOEFL teacher, I often have students practice timed speaking exercises in the classroom, but the usual method of setting up a timer and writing a question on the board is inefficient. I wanted to create a tool that would allow teachers to use a classroom PC and projector to quickly load a question or compose their own.
As motivated students often ask how they can improve their speaking skills at home, I decided to extend the project so it would be student-friendly. I designed the interface to be simple to understand and use. I also added a 'tips' section to give students advice on how to complete the task.
I learned a lot through making this project. At first, refreshing the page when it displayed a question would return users to the question select page, requiring them to choose a question from scratch. I implemented react-router to deal with this issue and allow back-button functionality. I also made use of session-storage to keep the currently-selected question in memory.
To gain experience with APIs I choose to move the question data to a separate static API that I could add questions to at a later date. I am currently in the process of increasing the number of stock questions by feeding appropriate prompts to ChatGPT and curating the results.