Skip to content
OverviewSolutions
17
Comments
18
P

Jan Kotvaš

@DrakeHermitBratislava, Slovakia380 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Mortgage Repayment Calculator with React.js

    #react#sass/scss
    P
    Jan Kotvaš•380
    Submitted 18 days ago

    There are some improvements I could make like making inputs into a reusable component but I honestly didn't feel the need to do in this kind of a project. I would like someone to look over my code and tell me if it's decent on first sight?

    0 comments

  • Product list with a cart challenge using React.js

    #react
    P
    Jan Kotvaš•380
    Submitted about 2 months ago

    I would love if someone told me how to work with grid better, since I got stuck at resizing the images on desktop version of the design so they look waay too big for my liking. Also if someone could give me some pointers on how to structure my code better that would be great.

    0 comments

  • Product Summary Component with React

    #react
    P
    Jan Kotvaš•380
    Submitted 3 months ago

    I would love to hear what others think about how I structured the app, and if it is any good.

    1 comment

  • Random Password Generator

    P
    Jan Kotvaš•380
    Submitted 7 months ago

    Just general JS code advice. I tried my best to have it as organized as I could but that didn't really work all the time.

    1 comment

  • NFT preview card component

    P
    Jan Kotvaš•380
    Submitted 11 months ago

    I would love if someone could tell me how to make the image hover state work as it should, because right now it does display the overlay but it flickers as I move my mouse, and I can't for the life of me figure out why.

    1 comment

  • Tip Calculator App

    P
    Jan Kotvaš•380
    Submitted 11 months ago

    I would love if someone reviewed my code, not just JS though. I am doing my best but I know for a fact that there are a lot of features I am not aware of that can help me out structure my code better.

    1 comment
View more solutions

Latest comments

  • Quae03•110
    @Quae03
    What are you most proud of, and what would you do differently next time?

    I proud of my use of useContext after realizing that prop-drilling was not the most effective choice for all the components in this project. I hit a brick walling trying to prop drill multiple variables across multiple components, but thats a good thing because we learn through failure

    I would plan appropriately and map out the structure of my components

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

    challenges: Prop-drilling not being effective for every component, getting used to making components as opposed to several functions in plain Javascript

    I used useContext so I could import any component I want into any component necessary and broke down my application into small components to get used to using components

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

    Modularity, some of my functions are not able to be exported and added to another project without additional code

    Responsive Mortgage Calculator

    #react#sass/scss
    1
    P
    Jan Kotvaš•380
    @DrakeHermit

    Good job on finishing the project, it works as it should and that's all that matters. But that being said you didn't really follow the design file at all, and you should make it a bit more responsive, maybe on mobile devices let the content span the whole screen instead of having background color. I saw you included two h1's, in your markup, which is not recommended at all. Also I noticed you do div.[class] which is not necessary or section.[class] for that matter. Also when you want to destructure values or functions from context you made you can just do it in one line const {...} = useContext(ParameterContext) instead of destructuring each value on a different line. Also you don't need to e.preventDefault() in every if statement it's enough if you just include it at the top of the function. I suggest you go over the earlier learning paths and brush up on html, css, and js knowledge before you continue working with react. That's all if you want you can look over my github profile.

    Happy coding!!

  • P
    Jan Kotvaš•380
    @DrakeHermit

    Your solution looks solid, why you used next.js for this project though? It is honestly an overkill to use next.js for something like this.

    But I like how you created a context for the modal which I didn't think to do. You do need to work on the mobile version of the design a bit, the padding on both sides is just a tad bit too big, and that much whitespace is not necessary at all. Also the responsiveness for tablet devices is bad.

    Great job overall though, keep on working on your craft. Happy coding!

    Marked as helpful
  • P
    Jan Kotvaš•380
    @DrakeHermit

    I probably wouldn't use typescript for this project but that's completely fine. I would suggest that you don't put all the markup into the app file since that approach doesn't actually scale well, but for a simple project like this it's totally fine.

    I would honestly spend more time on the css with tailwind since the design you went for isn't all that close to what the design file specified. Also I would like if you used semantic tags to structure your markup instead of just using div's for everything. Also for your next projects go into the index.html file and change the title of the page.

    Other than that good job on finishing the project Happy coding!

    Marked as helpful
  • P
    Jan Kotvaš•380
    @DrakeHermit

    I'd suggest that you hide the password strength bars all together before the password gets generated. Also you could probably try to implement custom range slider feature.

    For some reason when you select 20 characters the last character always does not get shown. One more thing I'd like to point out is the fact that you don't generate a password if the user only selects one checkbox. But I like how you used the module system, kudos for that.

    Oh one more thing, I wouldn't necessarily put my CSS and JS inside of the assets folder, that folder is meant for static files like images and svgs

  • tediko•6,700
    @tediko
    What challenges did you encounter, and how did you overcome them?

    Hello! 👋

    MovieDB is a full-stack application written in vanilla JavaScript that serves as an interactive hub for movie and TV series enthusiasts. To provide seamless user authentication and data management I used Supabase backend-as-a-service (BaaS) solution. This integration ensures secure user registration and login process, efficient session management which enables users to build their own collection by bookmarking favorite movies and TV series as well as completing profile with data and custom avatar with all user-specific data securely stored in the database and storage. App fetches data from The Movie Database (TMDb) API to deliver up-to-date and extensive information on films and TV shows. Both API and database operations are handled on Netlify serverless functions backend to reduce the load on the frontend, leading to faster response times and a more responsive user experience. This allows for better management of sensitive data, as environment variables can be securely stored and accessed only on the server side, removing the risk of exposure in client-side code. MovieDB App allows users to explore, search, bookmark, create their own user profile and engage with a vast collection of media content as well as display information about a specific movie/TV series on sub-page.

    With the integration of user authentication I've decided to elevate app functionality and user experience by designing an landing page that serves as the introduction to MovieDB App. This landing page streamlines the user authentication process by providing registration form and login cta button redirecting respectively to register and login sub-page. Moreover showcases selection of popular movie trailers in slider that users can watch in popping lightbox modal that has trapped focus for users that require accessibility features. Additionally, there is a placeholder section with mockup image that contain video within.

    After logging in, the user is redirected to the app which is based on the single page application (SPA) architecture with custom router. For handling bookmark state across SPA I created central state management system - bookmarkManager. This allows components to subscribe to bookmark updates and receive notifications when bookmarks change without the need of fetching it from database. If logged in user navigate to route that doesn't exists router will redirect to 404 page. To improve user experience while fetching data I implemented shimmer effect which is simply visual feedback during data fetching. User can login on test account to explore app without the need to register, but test account is limited when it comes to updating profile with custom informations/avatar.

    🚀App features

    • User Authentication: Users can create an account by providing email and password and then log in to the app using their credentials, providing a secure and personalized experience.
    • Search: Functionality that allows to search for movies or TV series by title.
    • Trending: Dedicated section where users can view a list of currently trending movies or TV series.
    • Latest Trailers: Showcase of popular movie and TV series trailers in a slider. Users can watch them in a lightbox modal.
    • Recommended for You: Personalized feature that suggests movies and TV series based on the titles user have bookmarked.
    • Top rated: A list of the top 100 movies and TV series, ranked based on their overall user ratings.
    • Bookmarks: Personalized space where users can store and manage their bookmarked movies and TV series.
    • Details page: Each movie has a dedicated sub-page that provides users with a detailed informations, list of the actors involved, photos and similar titles recommendations.
    • Random title: Randomly selected movie/tv series displayed within details page.
    • Profile: Customizable account settings. Users can upload a custom avatar or update account information including name, email, and password.
    • 404 page: "Page Not Found" with a little easter egg. Instead of a standard error message, users are greeted with a funny message and a playful image. User need to be logged in.

    💡Here's some new things I used or learned:

    • Sass placeholder selector is special kind of selector known as a “placeholder”. It looks and acts a lot like a class selector, but it starts with a % and it’s not included in the CSS output.
    • The try..catch statement is a powerful tool for error handling in JavaScript. By implementing it effectively, you can create more resilient applications that provide a better experience for users.
    • JSDoc comments enhances code readability and maintainability by providing clear documentation directly within the source code.
    • Focus trap is a JavaScript utility designed to manage keyboard focus within a specified element, enhancing web accessibility by preventing focus from escaping outside of interactive components, such as modal dialogs.
    • URLSearchParams is a built-in JavaScript object that provides a convenient way to work with the query string of a URL.
    • Promise.all() allows multiple fetch operations to be executed concurrently, rather than sequentially. This can significantly improve performance, especially when dealing with independent API calls
    • How to build router in vanilla JS - Routers control the application's views based on the URL, without the need for full-page refreshes. While several libraries such as React Router for React offer robust solutions for managing routes in SPAs, you can build your own rudimentary router in Vanilla JavaScript to understand the underlying mechanics.
    • createObjectURL() static method of the URL interface creates a string containing a URL representing the object given in the parameter (Blob in my case).
    • Replacing switch statements with Object literals

    🛠️Build with: (can be found also in my others projects)

    • Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: a dev server, and build command that bundles your code with Rollup.
    • Sass CSS pre-processor is a stylesheet language that’s compiled to CSS. It allows to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
    • BEM - Block, Element, Modifier methodology, which is a popular naming convention for classes in HTML and CSS. BEM is useful when it comes to larger, more complex projects when code organization becomes crucial. The idea behind it is to speed up the development process, and ease the teamwork of developers by arranging CSS classes into independent modules.
    • Supabase is an open-source backend-as-a-service platform designed as an alternative to Firebase.
    • Serverless Netlify functions open a world of possibilities for running on-demand, server-side code without having to run a dedicated server.
    • Swiper is a JavaScript library that creates modern touch sliders with hardware-accelerated transitions.

    ❓Questions:

    • Any suggestions on how I can improve are welcome! If you want to learn more about my process - README.

    MovieDB fullstack app - Supabase, Vite, Sass, BEM, Swiper, Serverless

    #accessibility#bem#supabase#vite#sass/scss
    7
    P
    Jan Kotvaš•380
    @DrakeHermit

    My freaking god this is just awesome, I legit got goosebumps. @tediko Hats down, I aspire to become as good as you one day. I will make sure to go over all of your code and try to figure out all the ins and outs as much as I can.

    EDIT: I just love how you included a test account.

  • P
    Jan Kotvaš•380
    @DrakeHermit

    Your solution looks great, other than the fact that the background color isn't spanning across the whole screen. Also maybe the indentation looks off in your HTML markup

    Marked as helpful
View more comments