@Veteranalpha
Submitted
@RedMwp
@Veteranalpha
Submitted
@RedMwp
Posted
this is well done
What are you most proud of, and what would you do differently next time?
I completed this project using Flask for the backend, with the frontend built using vanilla CSS, HTML, and JavaScript. I also developed a custom JavaScript script to parse the DOM and update it client-side, mimicking some React-like behavior, although it’s not a true React implementation. This approach avoids full page reloads and performs quite efficiently.
I used pure CSS for this project as an experiment to challenge myself, but I've since realized that Tailwind would have been much more enjoyable and efficient. Working solely with vanilla CSS proved to be more cumbersome than I anticipated. Additionally, managing state and interactions with just vanilla JS was somewhat frustrating. For my next project, I plan to use Flask along with Preact, TypeScript, and Tailwind to improve development efficiency and functionality.
@RedMwp
Posted
This is amazing, I would like to know how you prepare before you start coding..
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
💡Here's some new things I used or learned:
🛠️Build with: (can be found also in my others projects)
❓Questions:
@RedMwp
Posted
This is amazing, hope to get to this level too
@SandyAstorga
Submitted
What are you most proud of, and what would you do differently next time?
I am learning to use Bootstrap more quickly, there are still details to reinforce. It would improve the quality of the code.
What challenges did you encounter, and how did you overcome them?
My biggest challenge is still Javascript.
What specific areas of your project would you like help with?
Javascript 🥹
@RedMwp
Posted
This is nice...in which area of js specificaly do u need help
@tugcekizildg
Submitted
@RedMwp
Posted
Beautifully done
What challenges did you encounter, and how did you overcome them?
Hello! 👋
That was another entertaining challenge in which I learned a lot of new things! Right from the start I decided it would be a great idea to use GSAP library to create a parallax effect for sections, rather than creating subpages. Each section has tabs through which user can display new content. New content is dynamically added in JavaScript so I needed find a way to prevent images from loading each time tab has changed. For this purpose I used the Intersection Observer API which helps me detect visibility of a section that appears in the user's viewport. When this happens the preloadImages()
function is called and creates new HTMLImageElement
instance with Image()
constructor to which I attach the src of each image from the section. In the "crew" and "technology" sections, the user can change tabs and content by moving the mouse/touch horizontally. Since the page has a lot of animations ScrollTrigger animations using GSAP are disabled for users who have set prefers-reduced-motion
. Learned how to share variables between JavaScript and Sass since I needed to use media query breakpoint variable value for matchMedia
but I didn't want to do it with copy and paste. I found a way to synchronize my css and js so that my CSS is the source of truth and share values with JavaScript. I used CSS Modules for this purpose. CSS Modules with ICSS specification introduces the :export
directive to act as a way to export defined values. Coupled with Sass variables, it allows you to export them.
🐞Bugs:
position: sticky
and GSAP, there are several bugs that I cannot eliminate at the moment. When a user uses the keyboard to navigate a page, the viewport often does not show the active element. The second mistake is responsiveness. On some small screens (in terms of height), sections are cropped and navigation does not lead to the appropriate section. If I find a way to eliminate these bugs and maintain the animations, I will update the project but for now I'm satisfied with how it looks and what I achieve creating this.💡Here's some new things I used or learned:
prefers-reduced-motion
is used to detect if a user has enabled a setting on their device to minimize the amount of non-essential motion. The setting is used to convey to the browser on the device that the user prefers an interface that removes, reduces, or replaces motion-based animations.🛠️Build with: (can be found also in my others projects)
❓Questions:
@RedMwp
Posted
This is great♥️♥️ surely a good example of this project
@Kajal1408
Submitted
@RedMwp
Posted
Your link is not working
@mapopo2
Submitted
Finally cut down code using css focus styling to change colours of rating buttons when clicked, turning selected elements into an array in javascript, getting the innerHTML(number) and using forEach() to show the clicked number on the thank you message
@RedMwp
Posted
The rating state is broken , opened it in chrome. Try giving it a width
Marked as helpful
@RahulShesh
Submitted
@RedMwp
Posted
Looking good though not responsive
Marked as helpful
@ughvop
Submitted
First time working with scss, i liked how bem makes my code organized. but i believe i could have better use with scss functions, specially with desktop display.
you didn't think i would post a solution without asking for help, right? my stars need spacing between them, but i still want to have them using background-image
background-repeat
how can i do that?
@RedMwp
Posted
This was very well done