NextJS | React | Angular | NodeJS | 🐍 Python | C# | REST API | MySQL | MongoDB | Full Stack Developer | Open Source

github

projects

youtube

medium

adplist

Esther White  • Peerlist

I developed this SPA oversized theme switcher that toggles between light (day) mode and dark (night) mode, with a sun and clouds for day and a moon and stars for night. Every element, from visuals to functionality, was coded entirely from scratch by me using SCSS, Angular animations, and custom Angular code.The idea came from a YouTube Short where a designer showcased an interactive theme switcher. I thought it was cool and decided to code my version that afternoon.Since I could only extract a partial image from the low-code, no-code Wix implementation, I carefully observed the design and manually recreated the rest to match it as closely as possible. I also corrected an issue where the day and night labels were reversed in the Wix version.I built the app using Angular v16, Angular Material, SCSS, later migrating it to Angular v17. I also made the site fully responsive to adapt to different devices.From a technical perspective, I wouldn’t consider this project particularly complex, especially since I’ve developed much more advanced applications and have also successfully tackled similar tasks many times before. Rather than being a challenge, it felt more like a creative exercise - an opportunity to practice and have fun with something I enjoy.This app was primarily about transforming an existing design into a fully coded application. It was a simple, enjoyable project I took on because I felt inspired and had the time.

Huge Theme Switcher

Shared IDEShared IDE is an advanced, browser-based collaborative coding platform designed to replace traditional, limited tech interview editors. It provides real-time collaboration between two users, allowing them to run code with terminal-like output and leverage AI assistance. The platform is built to support pair programming and makes technical interviews more dynamic and interactive.<h2>Key Features</h2><ul><li>Real-time Collaboration: Two users can work together on the same codebase in real time, with changes reflected instantly for both participants.</li><li>Code Editor: Replaces traditional tech interview notepad-like editors with a fully-featured, browser-based code editor.</li><li>Run Code: Includes a "Run Code" option to execute code directly in the editor, with terminal-like output for debugging and troubleshooting.</li><li>AI Assistance: Integrated AI available for code suggestions and enhancements. AI can be enabled or disabled by the session creator, but it applies equally to both participants, ensuring a consistent and fair experience.</li><li>Seamless Pair Programming: Built to support pair programming workflows for interviews, coding sessions, and debugging in an intuitive, shared environment.</li></ul>

Shared IDE - Partially Open Source

<h2>About</h2><h3>I created WomenInSoftwareDev - an open-source project dedicated primarily to software developers and hands-on programmers.</h3>The phrase ‘Women in Tech’ often encompasses a wide range of digital and real-life tech roles, making it challenging to identify which fields are truly represented.While the website includes a submenu highlighting other fields, the primary focus is on celebrating and supporting women who are deeply involved in programming.WomenInSoftwareDev offers a space where women in software development can connect, share knowledge, inspire one another, and collaborate on open-source projects.<h2>Features</h2><ul><li>Showcase Directory: Highlighting women in software development across various roles and levels of expertise.</li><li>Resources Hub: Articles, tutorials, and guides covering software development, engineering, and career growth.</li><li>Women in Tech Submenu: Featuring additional tech fields beyond software development.</li><li>Community Connections: Links to join our growing network of women in tech.</li><li>Open Contribution: Encourages contributions from anyone willing to help the cause.</li></ul>

WomenInSoftwareDev - Open Source

Discover My Professional Showcase/ Portfolio Site Explore a dynamic site that goes beyond a traditional portfolio, highlighting my skills, achievements, and contributions as a software developer, open source maintainer, and mentor. It showcases not only my projects but also my journey in tech.<ul><li>Technologies Utilized:<ul><li>Angular, Angular Material, Angular CLI</li><li>TypeScript &amp; RxJS for reactive programming</li><li>GitHub for version control</li><li>Netlify for efficient and seamless deployment</li></ul></li><li>Innovative Features:<ul><li>3D parallax entrance card (desktop only)</li><li>Full theming support with light and dark modes</li><li>Interactive project images that adapt to theme changes</li><li>Filtering options to easily navigate and find projects by category or technology</li></ul></li><li>Professional Highlights:<ul><li>Over 6 years of experience in full-stack software development</li><li>Open source lead developer and maintainer of impactful repositories</li><li>Tech creator on YouTube, offering real-time coding tutorials and insights</li><li>Mentor to aspiring developers, fostering growth and collaboration</li></ul></li></ul>Discover a space where my technical expertise and creative vision come to life, making it easy to explore the projects and experiences that define my career.

EstherSoftwareDev - Portfolio-Showcase

<h3>The HashnodeWithAngular Open Source Project</h3>Seamlessly connects your Angular or Analog application to the Hashnode GraphQL API, providing a template integration with a headless Hashnode setup.In other words - this project is very much like the starter kit that Hashnode provides, except that this project uses Angular / Analog.<h2>Existing Setup &amp; Features</h2><ul><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-500 rich-link break-all link-break" href="https://angular.dev/">Angular</a> - v17 and up</li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-500 rich-link break-all link-break" href="https://analogjs.org/">Analog</a> - v1.0.2 and up</li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-500 rich-link break-all link-break" href="https://material.angular.io/">Angular Material</a> - UI Library</li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-500 rich-link break-all link-break" href="https://primeng.org/">PrimeNG</a> - UI Library</li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-500 rich-link break-all link-break" href="https://the-guild.dev/graphql/apollo-angular/docs">Appolo Angular</a> - GraphQL Client for Angular</li></ul>