Skip to content
Loggd Onboarding

Getting Started with React

Your practical guide to learning modern React development at Loggd through prototyping.

This guide provides a structured checklist for your project. It is not a comprehensive step-by-step tutorial. Instead, it serves as a guideline and learning path. You are highly encouraged to actively learn by researching, experimenting, and utilizing external resources such as official documentation, articles, and other tutorials to deepen your understanding and solve challenges as you progress.

Your Objective

Section titled “Your Objective”

The goal of this onboarding project is to provide a practical overview of modern frontend development using React. We will develop a simple movie information page that introduces you to key concepts and tools. The application will include the following core features:

  • Movie Data from TMDB API: All movie information will be retrieved from The Movie Database (TMDB) API
  • Movie Search: A search function will allow filtering and finding specific movies.
  • Detail Page: When a movie is selected, the application navigates to a detail page displaying additional information such as the movie’s crew.
  • Data Management with Tanstack Query: Data management and synchronization with the TMDB API will be efficiently handled using Tanstack Query.
  • Filter Options: Simple filter options, e.g., by predefined genres, will be implemented, and their state will be managed. The defined queries must react to state changes to demonstrate the interplay of all technologies.

A Prototyping Approach to Learning

Section titled “A Prototyping Approach to Learning”

This guide adopts a common software engineering pattern: prototyping. Our initial goal isn’t to build a perfect, production-ready application from day one. Instead, we’ll start by creating a simple, perhaps even “ugly,” version of our movie information page.

Why prototyping? This iterative approach allows us to:

  1. Quickly grasp core concepts: Get a hands-on feel for React, its paradigms, and the chosen libraries.
  2. Identify challenges and “flaws”: We’ll inevitably encounter situations where our initial approach might not be ideal or where certain libraries reveal their complexities. This “ugly” phase helps us learn from these friction points.
  3. Learn by doing, then refining: By building something quickly, we gain practical experience. This experience then informs a more robust and well-thought-out second iteration.

What does this mean for you? Don’t be afraid to make mistakes or to implement things in a less-than-perfect way in the beginning. The idea is to get something working end-to-end. After this “prototype” phase, we’ll discuss insights, understand the limitations of our initial choices, and then, if necessary, scrap parts or even the entire project to rebuild it better, cleaner, and more robustly based on our newfound knowledge. This is a powerful learning curve in software development.

Before you start

Section titled “Before you start”

Make sure you have everything installed on your system to progress this Onboarding:

Also make sure to create a free TMDB Account to access the API key. As Application URL you can just paste in this guide or basically any valid URL.