React Engineer | 99+ Lighthouse Specialist | Figma-to-React & Vitest Expert. Building high-speed, unbreakable web apps.

substack

github

Amanuel Amare  • Peerlist

NuuR is a comprehensive web-based safety platform built during the Cursor Hackathon in Bahir Dar, Ethiopia, completed in just 1.5 days. The project addresses urban safety challenges by combining anti-theft protection, path tracking, and emergency issue reporting into one scalable system.My Role: I served as the Frontend Developer, leading the design and implementation of the React-based interface. I built the entire UI, connected complex components, managed routing and state, and ensured responsive, mobile-first design with TailwindCSS. I also integrated localization (Amharic/English) and accessibility features to make the platform usable in diverse Ethiopian contexts.Key Features:<ul><li>Anti-Theft Protection: SMS-triggered location tracking, discreet audio/video capture, and alerts to trusted contacts.</li><li>Path Tracker: Records GPS routes with timestamps, replay and share paths, export as GPX.</li><li>Emergency Reporting: One-tap geo-tagged incident reporting with photos, descriptions, and real-time updates.</li></ul>Hackathon Impact: Despite the short timeframe, our team delivered a working prototype with real-time tracking, reporting, and security features. The project demonstrates how technology can improve urban safety in Ethiopian cities while being optimized for low bandwidth, mobile-first environments.

NuuR – Urban Safety Platform

E‑Movie Center is a modern, high‑performance movie and TV browsing platform built with React, Vite, Tailwind CSS, Zustand, Axios, and Vitest. It delivers a fast, accessible, and visually engaging experience for exploring movies, TV shows, actors, and trending entertainment content. The project focuses on scalability, clean architecture, smooth UI interactions, and strong testing practices.<h3>⭐ Core Features</h3><ul><li>Browse trending movies, TV shows, and people (actors, directors, crew)</li><li>Dynamic routing for movies, TV shows, and actor profiles</li><li>Fully responsive UI with accessibility improvements</li><li>Smooth scrolling, animations, and optimized layout</li><li>High‑performance React + Vite setup with HMR</li><li>Clean ESLint configuration for consistent code quality</li></ul><h3>🔍 Search &amp; Discovery</h3><ul><li>Global search for movies, TV shows, and people</li><li>Instant results with dynamic routing</li><li>Keyword‑based search with smart filtering</li><li>Fast API calls with Axios</li><li>Search page optimized for speed and clarity</li></ul><h3>🎥 Application Pages</h3><ul><li>Homepage — Trending movies &amp; TV shows, featured banners, smooth scrolling, responsive layout</li><li>Movie Page — Title, release date, rating, runtime, poster, trailer, cast list, recommendations</li><li>TV Page — Seasons, episodes, thumbnails, episode details, ongoing/completed tracking</li><li>People Page — Biography, filmography, profile images, interactive cards</li><li>Search Page — Instant results for movies, TV shows, and people with dynamic routing</li><li>Interactions Page — Favorites, watchlist, rating system, smooth UI transitions</li></ul><h3>🧪 Testing &amp; Reliability</h3><ul><li>Unit &amp; integration tests using Vitest + React Testing Library</li><li>Covers component rendering, API calls, search behavior, navigation, and Zustand store logic</li><li>Strengthened skills in mocking API responses, testing dynamic routing, and validating UI interactions</li></ul><h3>🧱 Architecture &amp; Code Quality</h3><ul><li>Modular folder structure with reusable components</li><li>Zustand store for global state management</li><li>Custom hooks for API and UI logic</li><li>Clean separation of concerns</li><li>Tailwind CSS for fast, consistent styling</li><li>Vite for blazing‑fast builds and HMR</li><li>Deployed on Vercel with CI/CD automation</li></ul><h3>🚀 Performance &amp; Deployment</h3><ul><li>Optimized for fast load times</li><li>Vite bundling + code splitting</li><li>Automatic deployments on Vercel</li><li>Production URL: <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="https://e-movie-center.vercel.app">https://e-movie-center.vercel.app</a></li></ul><h3>🛠️ Challenges Solved</h3><ul><li>Implemented dynamic routing for movies, TV, and people</li><li>Improved accessibility with test‑ids and ARIA considerations</li><li>Fixed layout issues across mobile and desktop</li><li>Debugged API integration and search behavior</li><li>Ensured smooth scrolling and animation performance</li></ul><h3>🎯 Skills Demonstrated</h3><ul><li>Modern React development</li><li>State management with Zustand</li><li>API integration with Axios</li><li>UI/UX design and responsive layouts</li><li>Testing with Vitest + RTL</li><li>Performance optimization</li><li>Deployment workflows with Vercel</li></ul><h3>🔮 Future Enhancements</h3><ul><li>Add user authentication</li><li>Real watchlist persistence with backend</li><li>Advanced filters (genre, rating, year)</li><li>Infinite scrolling for search results</li><li>More detailed actor/crew analytics</li></ul><h3>📌 Summary</h3>E‑Movie Center is a polished, scalable entertainment browsing platform showcasing strong front‑end engineering, clean UI/UX, dynamic routing, API integration, and reliable testing. It highlights my ability to build real‑world, production‑ready applications with modern tools and best practices.

e-movies-center

MY E‑commerce Store is a modern, fully responsive online shopping platform built with React, Vite, Tailwind CSS, Zustand, and Vitest. It delivers a fast, intuitive shopping experience and demonstrates strong front‑end architecture, UI/UX design, state management, testing, and deployment practices.<h3>🛍️ Core Shopping Features</h3><ul><li>Complete product browsing with images, pricing, descriptions, and categories</li><li>Keyword search and category‑based filtering</li><li>Add to cart, update quantities, remove items</li><li>Persistent cart and favorites using localStorage</li><li>Dedicated Favorites/Wishlist page</li><li>Mobile‑first responsive design for all screen sizes</li><li>Clean, modern, and accessible UI</li></ul><h3>💳 Checkout &amp; User Interaction</h3><ul><li>Multi‑step demo checkout flow</li><li>Address form, card form UI, and order confirmation</li><li>Realistic checkout logic and form validation</li><li>Contact form powered by EmailJS</li><li>Secure environment variable configuration</li><li>Order history simulation (Pending → Delivered)</li></ul><h3></h3><h3>🧪 Testing &amp; Code Reliability</h3><ul><li>Tested with Vitest + React Testing Library</li><li>Covers:<ul><li>Component rendering</li><li>Cart logic</li><li>Favorites</li><li>Filtering</li><li>Order history</li></ul></li><li>Strengthened skills in:<ul><li>Mocking Zustand stores</li><li>Handling hooks</li><li>Validating UI behavior</li></ul></li><li>All tests pass successfully</li></ul><h3>🧱 Architecture &amp; Code Quality</h3><ul><li>Clean, modular project structure</li><li>Reusable components and organized pages</li><li>Centralized state management with Zustand</li><li>Clear separation of concerns</li><li>Tailwind CSS for fast, consistent styling</li><li>Lucide React icons for a polished UI</li><li>Deployed on Vercel for global performance and fast load times</li></ul><h3>🛠️ Challenges Solved</h3><ul><li>Debugged EmailJS integration and environment variables</li><li>Fixed UI inconsistencies and layout issues</li><li>Resolved cart and payment logic bugs</li><li>Solved test failures caused by missing props and store mocks</li><li>Improved understanding of front‑end engineering and deployment workflows</li></ul><h3>🚀 Skills Demonstrated</h3><ul><li>Modern front‑end development</li><li>Component architecture and reusable UI patterns</li><li>Responsive design and accessibility</li><li>State management with Zustand</li><li>UI testing and mocking strategies</li><li>Third‑party service integration</li><li>Performance optimization</li><li>Deployment on Vercel</li></ul><h3>🔮 Future Enhancements</h3><ul><li>Real backend (Node.js or Django)</li><li>Real payments (Stripe or PayPal)</li><li>Admin dashboard</li><li>Persistent orders and favorites in a database</li><li>More advanced AI‑powered recommendations</li><li>🤖 AI‑Enhanced Experience<ul><li>AI Visibility Component that suggests products dynamically</li><li>Personalized browsing experience based on user behavior</li><li>Demonstrates integration of AI‑driven UI elements</li></ul></li></ul><h3>🎯 Summary</h3>MY E‑commerce Store is a polished, scalable, and feature‑rich front‑end application that showcases practical e‑commerce functionality, clean UI/UX, strong engineering practices, and real‑world problem‑solving. It stands as a solid demonstration of my capabilities as a front‑end developer.

MY E‑commerce Store

Professional Frontend Developer specializing in transforming Figma designs into React applications. This portfolio showcases expertise in responsive design and high-performance web development. With a focus on delivering visually appealing and efficient web solutions, the portfolio highlights the use of Figma for design and React for development, ensuring seamless user experiences across devices. Explore a range of projects that demonstrate proficiency in modern web technologies and a commitment to quality and innovation.A technical showcase focused on the critical rendering path. I optimized this project from a 78 to a 99 Lighthouse score while maintaining 100% test coverage for core components using Vitest.<ul><li>Expertise in converting Figma designs to React applications</li><li>Focus on responsive design for optimal user experience</li><li>High-performance web development techniques</li></ul>