Hey there! Thanks for visiting my GitHub profile. 🙋♂️
I am a web dev from Germany with master's degrees in Information Systems and Computer Science. I am located in the Bay Area, CA, and I am working as a Software Engineer at LinkedIn! I am passionate about all things web and love learning, writing, and speaking about all things web. In my free time, I tutor up-and-coming developers, attend and organize tech meetups, and build cool web apps.
Please hit me up on Twitter or LinkedIn to get in touch!
Find my blog and more about me at andre-landgraf.dev.
I am the developer and maintainer of:
- velapilates.de - Your German pilates online studio.
- react-datalist-input - A React combobox component with ease-of-use in mind.
I am actively working with React, TypeScript, HTML5, and CSS3. On top of that, I am currently really passionate about Tailwind CSS and Remix.run. 💜
You can find a more detailed list of all the technologies I like and work with at andre-landgraf.dev/uses.
In the following, you can find a description to most of my public GitHub repositories. Feel free to get inspired, reuse my code, and please provide feedback or contribution if you are interested in any of the projects!
The following repositories are also available on npm!
My first ever npm package! I created react-datalist-input both to learn more about packaging on npm and to fit my own dropdown use cases. Over time, I have constantly updated the package based on my own changing use cases and feedback. You can find the package here on npm. 🚀
Deprecated
A non-styled version of react-datalist-input. When I created react-datalist-input, I bundled a css file with it. The plain version comes without the css file and does support server-side-rendering and static-site-generation. You can find the package here on npm. 🚀
I love voice UIs 💜. I believe that voice will only become more prominent over time. However, today's voice UI and speech sdks are vendor-dependent and provide more an interface to platform APIs than tools to build sophisticated UIs. Amazon developers build lambda functions and use the Alexa Console while Google Assistant developers develop on Dialogflow or Actions on Google and use different sdks. react-ssml-dom is a research project that aims to take advantage of React and its component-based UI development for voice UIs. It also provides a middleware engine to parse any request from any vendor to a unified runtime payload and then revert back the response to the vendor-based response JSON. You can find the package here on npm. I wrote more about my motivation here on Medium.com. 👀
=> Package: react-ssml-dom => Demo project: covid-stats-ssml
The following repositories are skeleton apps, portfolio projects, and university exercises, I built over time.
Flash Me - Learn through rehearsal. Create and study with flashcards online.
Ever since my studies, I learn most productively with flashcards. Flash Me is a small weekend project that I actively use myself to learn with flashcards. It comes with markdown support and a self-made sign in/up logic with GitHub.
I gave my first talk at a remote Meetup about "full stack web development with Remix" and used Flash Me as an example. Check it out!
Flash Me is developed with React, TypeScript, Tailwind Css, and Remix.
=> Code: flash-me => Website: Flash Me
My personal website!
It uses React, TypeScript, Tailwind CSS, and Remix and also includes the README.md that you are currently reading!
=> Code: andrelandgraf => Website: andre-landgraf.dev
I started using Gatsby in the beginning of 2020. I developed my first real-world project - velapilates - using the framework. I learned a lot over time about styling, theming, a11y, and more. Gatsby-X was my first run at creating my own design system. It implements a full-fetched online store with OAuth 2 user logic, purchasing, animations, and reusable UI components.
This is both a portfolio project and a work-in-progress attempt to create a skeleton app for future sites. Please feel free to use my code!
=> Frontend: gatsby-x => Backend: gatsby-x-backend => Live on Netlify 💚: Gatsby-X demo => Storybook 📖: Gatsby-X design-system
My favorite university project. Foodo - a recipe optimization application and your ultimate health buddy - really improved my React and web development skills. It consists of a React frontend, Express.js backend, and an Alexa skill. The Alexa skill requires account linking, which we implemented from scratch using our own OAuth 2 implementation! We were a team of five students and spent a whole semester to create Foodo and I could not be prouder! 🤓
=> Documentation: foodo-documentation => Frontend: foodo-frontend => Backend: foodo-backend => Alexa skill: foodo-alexa-skill
Unfortunately, both Google and Alexa do not allow third-party information about covid on their voice platforms. I created covid-stats-ssml as a demo app to try out react-ssml-dom! Covid-stats-ssml is a React-rendered voice application! 🚀
A collection of my solutions/attempts to leetcode exercises from Leetcode.com and other sites.
=> leetcode
A small skeleton application that uses a self-made OAuth 2 flow. It is definetly outdated at this point.
=> Frontend: react-oauth2-skeleton => Backend: express-oauth2-skeleton
How I got introduced to React and met my best friends from Munich 💜. High-5-Learning is the result of a seminar project at the second semester of my master's degree. A teacher-student application that allows the creation of single-choice exercises, student invitations, exercise feedback for students, and resulting stats for the teachers.
=> Frontend: high5-learning-frontend => Backend: high5-learning-backend
Just some HTML, CSS, and JavaScript exercises.
=> web-snippets
Super outdated. A laravel docker skeleton application that I built at my first working student position.
Some exercises that helped me prepare for my exam in discrete structures.