Skip to content
Submitted 3 months ago

Prime Stream using React, TypeScript, Tailwind and Express

Mokalbari•180
@Mokalbari
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Entertainment web app
  • HTML
  • CSS
  • JS
4advanced

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I developed this as a "semi"-fullstack application. The API endpoints were created using Express and JavaScript in a separate repository hosted on Netlify. The front end was built using React, TypeScript, and Tailwind CSS. The data persistence is managed with the server. For simplicity, I chose not to include the login functionality, as it isn't easily deployable in a serverless environment.

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

The biggest challenge I faced was implementing horizontal scrolling. I had to conduct extensive research to find a solution. At the end of the day, it was as simple as using a grid with overflow hidden.

What specific areas of your project would you like help with?

Feel free to provide some feedback.

Community feedback

  • Teodor Jenkler•3,740
    @TedJenklerPosted 3 months ago

    Hi @Mokalbari,

    Nice job on the project! I especially liked the hover effects on the cards; they added a great touch to the user experience.

    However, I did notice a couple of issues that might need your attention. First, the API loading CSS caused the entire site to glitch during the initial load. Additionally, when I reloaded the page, the site crashed. It seems like there's an API error on reload that could be worth looking into. You might also want to consider implementing a more robust loading design (like, for example, a loading page) to prevent the CSS from glitching.

    It also seems like you've hidden the backend code, which is a shame because it would have been interesting to see how you built it.

    If you're not using Redux or Zustand for state management, I recommend putting all your fetch API calls into a custom hook. This can help with code organization and reuse.

    I felt that your folder structure was a bit messy, but that might just be my preference. A more organized approach could involve separating your code into folders like components, hooks, utils, etc., and avoiding deep nesting where possible.

    As a bonus suggestion, you might want to look into using SCSS. It can significantly improve modularity in your styling.

    Hope this was helpful!

    Best, Teodor

    Marked as helpful
    0
    Mokalbari•180
    @MokalbariPosted 3 months ago

    Hi @TedJenkler

    Thank you for taking the time to review my project and for your constructive feedback. I'll definitely mark this as helpful, as your insights are invaluable for my growth. I’ll make sure to address the points you've highlighted, especially the API issues and the folder structure. I appreciate your suggestions, and I’ll take some time to refactor my code in the future.

    Thanks again for your time and support!

    Best regards, Mokalbari

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord