Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
15
Comments
3

Can Cömertpay

@cancomertpayTurkey/Adana440 points

Dedicated front-end developer passionate about React, Redux, and Next.js. Crafts user-friendly web applications. Open to collaborations.

Latest solutions

  • Frontend Quiz App | Vue.js | Vite | TailwindCSS | Pinia

    #accessibility#tailwind-css#vite#vue#pinia

    Can Cömertpay•440
    Submitted 10 months ago

    0 comments
  • Audiophile E-commerce Website | Next.js | Tailwind | Framer Motion

    #next#react#tailwind-css#framer-motion

    Can Cömertpay•440
    Submitted 12 months ago

    0 comments
  • Devlinks Full Stack App | Next.js | Firebase | TailwindCSS

    #firebase#next#tailwind-css#react

    Can Cömertpay•440
    Submitted about 1 year ago

    0 comments
  • Dictionary Web App | Next.js | Framer Motion | Tailwind

    #next#react#tailwind-css#framer-motion

    Can Cömertpay•440
    Submitted about 1 year ago

    0 comments
  • Project Tracking Intro Component | Next.js | Framer Motion | Tailwind

    #framer-motion#next#react#tailwind-css

    Can Cömertpay•440
    Submitted about 1 year ago

    0 comments
  • Space Tourism Company Website | Next.js | Framer Motion | Tailwind

    #framer-motion#next#tailwind-css#react

    Can Cömertpay•440
    Submitted about 1 year ago

    0 comments
View more solutions

Latest comments

  • Ayça Gürler•180
    @aybegu
    Submitted over 1 year ago

    Recipe Page using React

    #react
    1
    Can Cömertpay•440
    @cancomertpay
    Posted over 1 year ago

    Selam Ayça, böyle bir proje için CSS kütüphanesi kullanmaman iyi olmuş fakat kodun okunabilirliği açısından ve stil çakışmalarını önleme açısında React'ın React CSS Modules özelliğini kullanabilirsin, bu işini daha da çok kolaylaştıracaktır. Başarılar!

  • Josh Michael•1,070
    @joshmichael23
    Submitted over 1 year ago

    E-commerce using Next.JS

    #react#next
    1
    Can Cömertpay•440
    @cancomertpay
    Posted over 1 year ago

    Hi Josh,

    You can try more basic carousel logic like this:

    ...
    
    const [currentImgIndex, setCurrentImgIndex] = useState(0);
    
      const nextImage = () => {
        if (currentImgIndex < images.length - 1) {
          setCurrentImgIndex((prev) => prev + 1);
        } else {
          setCurrentImgIndex(0);
        }
      };
    
      const prevImage = () => {
        setCurrentImgIndex((prev) => prev - 1);
        if (currentImgIndex === 0) {
          setCurrentImgIndex(images.length - 1);
        }
      };
    
      const handleThumbnailClick = (index) => {
        setCurrentImgIndex(index);
      };
    
    ...
    
        return images.map((item,index) => (
        <div
          style={{
            opacity: index === currentImgIndex ? 1 : 0,
            transition: "opacity 1s ease",
            width: index === currentImgIndex ? "100%" : "auto",
          }}
        >
          <img
            src={item}
            alt={"..."}
          />
        </div>
    ))
    
    

    This was just an example to explain the logic, I hope it helped. :)

    Marked as helpful
  • JJacobPR•240
    @JJacobPR
    Submitted over 1 year ago

    Advice Generator using React + TS

    #react#typescript
    1
    Can Cömertpay•440
    @cancomertpay
    Posted over 1 year ago

    Hey Jacob, great work! But, when you send a random number between 1 and 224, if it happens to be 67, you encounter an error because the API isn't perfect. You could try using the 'do while' method like this :

    do {
            let randomNumber = Math.floor(Math.random() * 224) + 1;
    
            const response = await fetch(
              `https://api.adviceslip.com/advice/${randomNumber}`
            );
    
            if (response.ok) {
              const result = await response.json();
              if (result?.message?.type !== "error") {
                setAdvice(result);
                break;
              }
            } else {
              throw new Error("Something went wrong, please refresh the page");
              break;
            }
          } while (true);
    
    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub