All solutions

I used this challenge to learn more about NextJs. This is the second time doing the same project, having done it recently with the main difference being that on this occasion , I am fetching the data from tmdb api whilst on the first challenge, the data was hosted on mongodb.

The highlights on this challenge includes:

• fetching data on the server using the fetch method combined with async await.
• using React Suspense to display a fallback until the children elements have been populated.
• a landing page with a dummy video
• selecting explore on the landing page will take you the list of all movies. They are 3 categories all, movies and Tv series - the appropriate buttons are at the top
• a search function to search for a particular movie.
• the bookmark page is still under construction.
• a dedicated details page for a single movie.

Any feedback is welcome

You will need to register first to use the application using a fake email (it doesn't matter). The following can be used for logging in

email: [email protected]
password: 123456

This was my first project using NextJs. I followed the NextJs Docs and their learn tutorial guideline. One of my main challenge was using material-ui components in the project as the default material-ui settings overrides the NextJs project settings thereby taking away some of the advantages of using NextJs. In particular the material-ui component could not use the fonts from the project that would be optimized on production and deployment. Managed to get through it after a research and from this material-ui nextjs example Any feedback is wellcome

Hi all. This was one of the most challenging project that I have taken so far. I created the project as a fullstack app using node, express and mongodb for the backend and React for the Frontend.

Having said that, they are some grey areas that I still need to workout. The todo has a list of the tasks that are yet to be completed. One of the major task is to move focus as soon as a user selects to create a new invoice. At present, the focus remains in the Homepage.

Highlights

The invoice app is designed to fetch invoices that are stored in Mongodb. Fetching is done with axios and TanStack Query(React Query) , it was my first time using React query and took a while to grasp it. It does simplify the process of data fetching and it's management as most functions are built in. For example fetching all the invoices and a single invoice is done using useQuery, whilst the rest of the crud operations are performed with the help of useMutation.

My focus on this challenge was to practice a bit of backend staff, I needed the knowledge to enable to create my own Fullstack applications and gain some knowledge on the integration of backend and frontend.

Hence this is my first MERN application. There is some changes and improvements that still needs to be done and will welcome your feedback. Notably the dark-mode switch is not as per design - might work on it .

As it is a MERN application, the Frontend was created using obviously React. Some features that where interesting to work with include the MarkdownView from the react-showdown package. The readme file has a guideline on the implementation process. Another exciting feature to work with was the FocusTrap from focus-trap-react . FocusTrap was needed to avoid Focus being lost especially when the Modal has been open due to edit and delete features.

The Backend was exciting with a lot of things to learn. I am glad that this gave me some insights on how to hide Secret keys and data.

My focus with this project was to practice typescript. One of the main struggles when starting something includes the limitation of how, why and when to use some of the (types) in this case. There are 2 bugs that I still have to fix:

1. To replicate the first bug, start by typing a decimal point - what i wanted is have a 0. printed on the screen. Instead what i get is a zero and the decimal point will only show when another number which is not zero is entered . Eg if i type 0.003 - the first 0.00 is not shown upon typing - zero will continue to be displayed until the 3 is typed.
2. The second bug is identical to the first in that it also involves a fraction. If a am to type 2.005008 - a full display of numbers will be shown when 5 and then 8 is entered. in between it will be 2 then 2.005 when 5 is typed and lastly the full number when 8 is typed.

If there are any more bugs , please let me know as well as improvements that should be carried out.

This is a second attempt on the same project, but this time , my focus was to learn typescript and use material-ui for styling.

It is one of the complex challenges that i have taken on Frontend Mentor, which i used to learn how to work with Mongodb-realm. I have little knowledge on backend, Realm makes it easy to integrate the backend and the frontend. Some minor changes where made to simplify the project a bit - the mobile navigation in particular and the confirmation modal.

Fetching data from realm is taking about 5 seconds to load on the Frontend, I used a modal box to compensate for the time delay.

An interesting aspect that i learned was to hide fieldsets on a form until the top ones have filled and are valid - this can be done with the css below

/* Hide the fieldset after an invalid fieldset */
fieldset:invalid~fieldset {
    display: none;
}

• some omissions and improvements may be found and such feedback is welcome

Another exciting challenge which pushed me further in this coding journey. The drag-and-drop feature was my main challenge but proved easy at the end using the react-beautiful-dnd. However i realise that react-beautiful-dnd added some attributes to the html structure which is causing some issues according to the report. One notable is the li elements which have been given a role of button, in order for the drag and drop feature to happen. Any feedback is welcome

Frontend mentor challenges are built in such a way that , there is always something to learn from the challenge , even if the challenge is rated lower in the ranks.

• One of the challenges that came up during the implementation was how to use a carousel. The challenge has 4 main images that resembles a carousel, the mobile version was not that difficult to create . I had opted to hide the items that where not in view using position: absolute , the problem started to appear when the screen size grew bigger and the image had to be on the left and the sibling content on the right. The issue happened when you resize using dev tools , such that for someone using any device that would have gone unnoticed. The option that i finally settled for was to change the src attribute.

Greetings to all. The journey continues with this exciting challenge. Navigating to the next page and moving focus to the top was something that i had to relearn from my previous projects - some of those things that you need to keep on doing before they stick in. There is still some adjustments that i have to do especially with the active states on the pricing page - the card has to move slightly to the top. It was easier if i had made the card active as an anchor element but the link button is a grandchild of the parent card. Your feedback is welcome.