@BT453567
Submitted
What are you most proud of, and what would you do differently next time?
This was created by following Kevin Powell's guide on Scrimba.
@echocode1
@BT453567
Submitted
What are you most proud of, and what would you do differently next time?
This was created by following Kevin Powell's guide on Scrimba.
@echocode1
Posted
i have test run all aspect of this project on all screen sizes and its a good one
@BT453567
Submitted
What specific areas of your project would you like help with?
Any feedback would be welcome.
@echocode1
Posted
A nice project
@alvarozama
Submitted
What are you most proud of, and what would you do differently next time?
Not much to be proud this time around. Getting the desgn part done was rather easy although I made some silly mistakes that kept me stuck for a while.
What challenges did you encounter, and how did you overcome them?
The most challenging thing was to come up with intresting ways to animate/transition between slide changes. I ultimately ended up making the slides work as a lightbox or a slideshow, but didn't add anything fancy to it.
What specific areas of your project would you like help with?
Any ideas as to how the switching of slides could be improved to be more visually interesting would be greatly appreciated.
@echocode1
Posted
i think the course before this project gave two resourse go check it out .over all its a nice project .the desktop carousel icon can be positioned better
@SDprasanth0012
Submitted
@echocode1
Posted
it a good project worth of commendation except that the hover effect on the main section,the images is not effected
@marcel-schmidt-dev
Submitted
@echocode1
Posted
a good code .the hover effect is awesome
@cristianccgg
Submitted
@echocode1
Posted
your design is astonishing I hope to reach this level
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:
@echocode1
Posted
I love your work 100% mentor. I will work and pray i get to this level. its flawless 🙏🙏
@Caelus111
Submitted
What are you most proud of, and what would you do differently next time?
I am proud in how the layout turned out, I will redo the JS better later when I can make it more readable and efficient with other technologies.
What challenges did you encounter, and how did you overcome them?
the JS of the light box was the hardest, but with some searching I got some snippets that I can use for this project.
What specific areas of your project would you like help with?
I think I need help with how to make the js code more readable, because even it's working, the readability is low.
@echocode1
Posted
it a good project and more success. to solve the light box issue you can view my code if you don't mind bas i did that aspect .i have viewed your js code its readable and reusable except that's you nee need to simplify every aspect of code even if it takes longer that should make it more readable
@Control222
Submitted
@echocode1
Posted
the solution includes semantic HTML, observe the entire layout and work on yours. go through the read me file.it state you create one that is 100% accessible with the arrow keys. you need to include an event handler to handle the keydown event handler.if you are unsure how to go about then, click my profile check my recent works or you acquire resourses on that or better still visit the mdn documentation.
there is more room for improvement;
@Si1entERA
Submitted
What are you most proud of, and what would you do differently next time?
The completion of the project.
What specific areas of your project would you like help with?
Any and all feedback is appreciated.
@echocode1
Posted
the goal of the challenge from the readme file is to enable the arrow key navigate the questions and if either an enter key or space key is clicked it displays the answers as well as the mouse does .please work on that as it is desire to assist the disabled as described in the article before your project.
if you are unclear as to achieve the above .view my profile and check this project as i did a work on the . and if the review was helpful 🙏🙏 kindly follow me ,mark review as helpful and i will surely follow you ,so we grow together.
aside the above your project was a success . dont forget to always work on your sizing to closely match the design
@Aaliyan10
Submitted
@echocode1
Posted
making an attempt is plus sir and a job well done. .Yes ,sematic HTML was use.
more effort can be made in the areas bellow;
.The background icon for each section is missing and need to be worked on .the designed can be centered as the starter file suggested. .you should take note of creating your own read me file as allow others learn from your code steps .since most often you will faced data to develop in real time jobs,i feel you should make attempt to use the api-fetch promise or the import module to get and loop through your json file as it saves you from more html and javscript codes. you can view either of the 3 resource provided before this challenge by front-end-mentors. see you at greater height.
@lukeSchwade
Submitted
What are you most proud of, and what would you do differently next time?
I'm pretty happy with how I solved the problem of a button hover effect that uses a gradient. Once I realised I couldn't animate a transition from a background-color to a background-image:gradient in vanilla CSS without it flickering, as the gradient pops in and out, especially when quickly moving mouse over the element, I discovered I could just change the blending mode: the gradient is always loaded but the :hover transition only changes its blending mode from Darken (which results in 0% visibility as the entire gradient is lighter than the initial button) to multiply, making it visible.
(this is built with Sass and the $variables are not vanilla CSS)
.email-submit-button {
transition: all 150ms ease-out;
background-image: $orange-red-gradient ;
background-blend-mode: darken;
}
.email-submit-button:hover {
background-blend-mode: multiply;
}
What challenges did you encounter, and how did you overcome them?
I had a lot of issues thinking about Mobile-first, and my css is disorganised as I added more exceptions. I think this is probably an issue that requires more of my attention in the planning stage
What specific areas of your project would you like help with?
So my solution for the success message involved changing the pop-up message from display:none to display:initial, which felt not great as I did it. I didn't find much about best practices online, should I be loading an entire new element into the DOM somehow when the success fires instead of toggling visibility in js? Should I be looking into frameworks or is there another jump-off point for how to do that?
@echocode1
Posted
. it has semantic HTML to a point. The success design could have been in the main as used. The main design can be made a section why the success can be made the 2nd second section. that should have made your styling easier and make it semantic order more unique
.with mobile first all other design will fall well in place: you can design the mobile first design and consider turning the design display to none as to allow you design the mobile success. when you are done with the mobile success you can turn the success display to none so as to redisplay your main design. -your next step will be to set your media query and adjust to fit the desktop design .with same approach set the design display to none as to allow you design your desktop success (note to set the mobile success display to flex, block or what ever you used previously. also set it counterpart main mobile design display to none .this should help you redesign the mobile success to desktop success with same CSS file with lesser codes).once you are done with designing your mobile & mobile success .ensure to switch to media query to design both the desktop main and it success message.
.if you give the above pattern a try ,then the confusion as to mobile first cant be delt with aside it would be easier designing all with single style file with lesser code.
.either to use frame work or plain languages is choice .I will advice attempting it with the languages first before making advance for framework.
.And please note that the above advice is prior to check and balance .please don't forget to make your findings and cross check.