Skip to content
OverviewSolutions
14
Comments
14

Amiko Elvis

@amikoelvisUganda260 points

Front-end dev.

I’m currently learning...

Nextjs

Latest solutions

  • Responsive mortgage repayment calculator with React and typescript

    #react#tailwind-css#typescript#vite#zustand
    Amiko Elvis•260
    Submitted 9 days ago

    I’d appreciate community feedback on Real-Time Validation: How can I efficiently implement instant input validation (e.g., check amount > 0 as users type) without performance issues?

    const handleNumberChange = (e, setter, field) => {
  const rawValue = e.target.value.replace(/,/g, '');
  const numValue = Number(rawValue) || 0;
  setter(numValue);
  setErrors((prev) => ({ ...prev, [field]: numValue <= 0 }));
};
    0 comments

  • Responsive product list with cart using reactjs and typescript

    #react#react-router#tailwind-css#typescript#zustand
    Amiko Elvis•260
    Submitted 12 days ago

    I would appreciate feedback on improving the overall structure and maintainability of my state management setup. While Zustand worked well for this project, I’m curious if there are best practices I might have missed—particularly for organizing more complex state logic like modal handling, cart quantity updates, and product caching.

    Additionally, any insights into optimizing performance (e.g., reducing unnecessary re-renders or enhancing accessibility) would be valuable. I tried to implement good UI/UX practices such as keyboard navigation and proper focus management, but I’d love a deeper review to ensure it meets accessibility standards.

    Finally, I'd welcome suggestions on code organization for larger projects—especially how to keep components clean, modular, and scalable as functionality increases.

    1 comment

  • Responsive results summary component using typescript and react

    #react#tailwind-css#typescript
    Amiko Elvis•260
    Submitted 17 days ago

    I would like help with the following areas of my project:

    1. Optimizing Accessibility Further: While I added ARIA roles and improved semantic structure, I'd appreciate a review to ensure it's fully accessible for screen readers and keyboard users.

    2. Improving Asset Handling: I want to better understand best practices for managing and referencing images or other static assets when working with local JSON and Vite.

    3. Performance Optimization: Suggestions for making the app more efficient—especially when scaling or preparing for deployment—would be helpful.

    4. Design and UI Feedback: I'd love feedback on how to make the UI more intuitive, engaging, and visually polished across all screen sizes.

    1 comment

  • Responsive Tip calculator app using JavaScript and tailwind CSS

    #tailwind-css
    Amiko Elvis•260
    Submitted 20 days ago

    I need help ensuring the border-red-500 class applies reliably without fallback inline styles, as it’s still not showing consistently despite Tailwind inclusion. Feedback on optimizing validation logic for edge cases would also be valuable.

    1 comment

  • Responsive time tracking dash board using JavaScript and Tailwind CSS

    #tailwind-css
    Amiko Elvis•260
    Submitted 23 days ago

    Dynamic Data Integration: I’d appreciate feedback on the best way to integrate a JSON file or API for the time data. For example, how would you structure a JSON file for the activities (Work, Play, etc.) with Daily, Weekly, and Monthly values, and what’s the most efficient way to fetch and render it in this dashboard?

    Advanced Tailwind Configuration: While I used Tailwind’s inline classes, I’m curious about best practices for organizing custom styles in output.css or a Tailwind config file, especially for a project with multiple color variants (e.g., primary-orange-300-work, primary-blue-300-play). How can I streamline this for larger projects?

    Performance Optimization: The dashboard is lightweight, but if I were to add animations or fetch data dynamically, what tools or techniques (e.g., lazy loading, debouncing) should I use to ensure smooth performance, especially on lower-end devices?

    Accessibility: I’d like guidance on implementing ARIA roles and ensuring keyboard navigation for the timeframe buttons. For instance, how can I make the active button state (e.g., text-white) clear to screen readers, and what’s the best way to test this?

    1 comment

  • Responsive newsletter-sign-up-form using JavaScript and Tailwind CSS

    #tailwind-css
    Amiko Elvis•260
    Submitted about 1 month ago

    I would like help with:

    • Improving the gradient hover effect on the submit button to better match the design spec (a smooth darker orange flowing from right to left).
    • Optimizing Tailwind class usage, especially where I had to use inline styles or approximations due to lack of custom configuration.
    2 comments
View more solutions

Latest comments

  • Amiko Elvis•260
    @amikoelvis

    Great structure and clarity! A few suggestions:

    Fix typo: Change text-sslate-500 to text-slate-500 (Tailwind doesn’t recognize sslate).

    Image: Use loading="lazy" and improve alt to something like "Empty results illustration" for better accessibility.

    Text size: Prefer Tailwind classes like text-sm over custom rems (text-[0.76rem]) for consistency.

    Semantics: Consider using <section> instead of a plain <div> for better meaning.

    Accessibility: Optionally wrap in aria-live="polite" to announce content changes.

    Solid work overall clean and easy to read!

  • Amiko Elvis•260
    @amikoelvis

    Your Button component is well-structured and flexible, with clear TypeScript typings that extend native button attributes. The use of a cn utility allows easy merging of default and custom class names, making styling scalable. The default styling is clean and visually appealing, creating a consistent, clickable button with good accessibility support through spreading native props. Overall, it’s a solid, reusable button component.

  • Amiko Elvis•260
    @amikoelvis

    Great Work! Responsive Design: Awesome job with full-width mobile (w-full, rounded-none) and side-by-side desktop (md:flex-row, max-w-4xl). It matches the 375px mobile and 1440px desktop style guide.

    Tailwind CSS: Clean use of Tailwind for gradients (bg-gradient-to-b), spacing (space-y-4), and hover effects (hover:bg-gradient-to-b).

    Compact Code: Combining everything in App.tsx keeps it simple and easy to follow.

    Suggestions for Improvement:

    Fix SVG Mapping: The icons[index] array is risky if data.json order changes. Add icon to data.json and map SVGs:

    Handle Data Loading: Direct import data lacks error handling. Move data.json to public and fetch it:

    Split Components: Move Result and Summary to separate files for reusability:

    Final Thoughts: Your solution is solid and visually aligns with the style guide! Adding TypeScript, improving SVG mapping, and enhancing accessibility will make it more robust. Splitting components and handling data loading will boost maintainability. Great job, and let me know if you need help with any of these changes!

  • Amiko Elvis•260
    @amikoelvis

    The Tip component provides a clean and interactive tip selection interface with both preset buttons and a custom input, but could improve by using type="number" for the CustomTip input to prevent non-numeric entries and enhance user experience.

  • Amiko Elvis•260
    @amikoelvis

    The Profile React component for the time tracking dashboard is a clean, responsive module with Tailwind CSS styling, but it needs tweaks to fully meet requirements. To align button text left, add text-left w-full to buttons; ensure Monthly initial view by setting active='monthly' in the parent’s useState; and improve accessibility with aria-pressed and onKeyDown for keyboard support. Mapping buttons over a timeframes array reduces repetition, and updating the image’s alt to “Jeremy Robson profile picture” boosts accessibility. These changes enhance UX, maintainability, and alignment with the HTML solution’s goals, testable on a high-res laptop like the MacBook Air M4.

  • Olexii Bulhakov•300
    @bulhakovolexii
    What are you most proud of, and what would you do differently next time?

    This was my first time using Vite to automatically bundle HTML, CSS, Tailwind, and TypeScript. I am proud of the result, as the setup process turned out to be faster and more flexible compared to traditional bundlers.

    What challenges did you encounter, and how did you overcome them?

    I encountered issues with relative paths not working correctly when publishing to GitHub Pages. To fix this, I had to explicitly set the base option in the Vite config and connect Tailwind through a plugin:

    // vite.config.ts
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  base: "/newsletter-sign-up-with-success-message/",
  plugins: [tailwindcss()],
});

    Additionally, setting up GitHub Actions for automatic deployment was necessary. I used a static.yml template and added an extra build step:

    - name: Build
  run: npm run build
    What specific areas of your project would you like help with?

    Currently, I am resetting the application state by triggering a page reload via an <a href=""> element. I would like to find a more elegant solution using TypeScript, such as resetting the state without a full page reload. However, my current knowledge of TS is not sufficient to implement this yet.

    <a href="">Dismiss message</a>

    Newsletter sign-up form with success message

    #tailwind-css#typescript#vite
    1
    Amiko Elvis•260
    @amikoelvis

    Your code is clean, well-typed with TypeScript, and the validation logic is solid. However, replacing the entire main content with innerHTML isn't ideal consider toggling visibility instead. Also, the "Dismiss message" link doesn't work as expected; use a button or prevent the default behavior. Overall, great job with structure and user feedback handling.

View more comments