Project structure overview in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the main component from the root of a Remix app.

Remix

import [1] from '~/root';

Drag options to blanks, or click blank then click option'

AApp

BRoot

CMain

Droot

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'root' or 'Root' instead of 'App'.

Importing from './root' instead of '~/root'.

In Remix, the root component is imported from '~/root' using the conventional name 'App'.

2fill in blank

medium

Complete the code to define a route component inside the Remix 'routes' folder.

Remix

export default function [1]() {
  return <div>Hello Remix!</div>;
}

Drag options to blanks, or click blank then click option'

AIndex

BApp

CRoute

DRoot

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the component 'Root' or 'App' instead of 'Index'.

Forgetting to export the component as default.

The default route component in Remix is named 'Index' for the root path.

3fill in blank

hard

Fix the error in the Remix loader function to fetch data.

Remix

export async function loader() {
  const data = await fetch('/api/data').then(res => res.[1]());
  return { data };
}

Drag options to blanks, or click blank then click option'

Atext

Bjsonify

Cjson

Dparse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'jsonify()' which does not exist.

Using 'parse()' which is not a method on the response.

The fetch response object has a method 'json()' to parse JSON data.

4fill in blank

hard

Fill both blanks to create a Remix form that submits data with POST method.

Remix

<form method=[1] action=[2]>
  <button type="submit">Send</button>
</form>

Drag options to blanks, or click blank then click option'

A"post"

B"POST"

C"/submit"

D"submit"

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'post' which may still work but uppercase is standard.

Using 'submit' as action which is not a URL.

The form method should be uppercase 'POST' and the action is the URL path like '/submit'.

5fill in blank

hard

Fill all three blanks to create a Remix loader that returns JSON data with a status code.

Remix

import { json } from '@remix-run/node';

export async function loader() {
  const data = { message: 'Hello' };
  return json(data, { status: [1], headers: { 'Content-Type': [2] } });
}

// Use this in the component:
// const response = useLoaderData(); // returns [3]

Drag options to blanks, or click blank then click option'

A200

B"application/json"

Cdata

D"text/html"

Attempts:

3 left

💡 Hint

Common Mistakes

Using status 404 or other error codes.

Using 'text/html' as content type for JSON data.

Expecting the loader to return raw response instead of parsed data.

The loader returns JSON with status 200 and content type 'application/json'. The component receives the 'data' object.

Practice

1. Which folder in a Remix project contains the files that define the app's pages and URLs?

easy

A. app/routes/

B. public/

C. app/components/

D. app/styles/

Solution

1. Step 1: Understand Remix folder roles

   The app/routes/ folder is where you put files that map to pages and URLs in Remix. Since pages and URLs are controlled by route files, app/routes/ is the correct folder.

2. Final Answer:

   app/routes/ -> Option A

3. Quick Check:

   Pages and URLs = app/routes/ [OK]

Hint: Remember: routes folder controls pages and URLs [OK]

Common Mistakes:

• Confusing public folder with routes
• Thinking components folder controls URLs
• Mixing styles folder with routing

2. Which of the following is the correct way to organize static assets like images in a Remix project?

easy

A. Place them inside app/assets/

B. Place them inside public/

C. Place them inside app/routes/

D. Place them inside app/styles/

Solution

1. Step 1: Identify where static files go

   Static assets like images should be accessible directly by the browser, so they go in the public/ folder. The public/ folder is served as-is, making it the right place for images and other static files.

2. Final Answer:

   public/ -> Option B

3. Quick Check:

   Static assets = public folder [OK]

Hint: Static files go in public folder for direct access [OK]

Common Mistakes:

• Putting images inside routes folder
• Confusing assets folder with public
• Placing static files inside styles folder

3. Given this Remix project structure snippet:

app/
  routes/
    index.tsx
    about.tsx
  components/
    Header.tsx
  styles/
    global.css
public/
  logo.png

Which file controls the home page content?

medium

A. app/styles/global.css

B. app/components/Header.tsx

C. public/logo.png

D. app/routes/index.tsx

Solution

1. Step 1: Understand home page routing in Remix

   The home page is controlled by the index.tsx file inside app/routes/. app/routes/index.tsx defines the root URL page, so it controls the home page content.

2. Final Answer:

   app/routes/index.tsx -> Option D

3. Quick Check:

   Home page = routes/index.tsx [OK]

Hint: Home page is always routes/index.tsx [OK]

Common Mistakes:

• Choosing component files for page content
• Confusing public files with pages
• Picking styles files as page controllers

4. You accidentally placed a page file inside app/components/ instead of app/routes/. What will happen when you try to visit that page URL?

medium

A. You will get a 404 Not Found error.

B. The page will load but without styles.

C. The app will crash with a syntax error.

D. The page will load normally as expected.

Solution

1. Step 1: Understand routing folder role

   Only files inside app/routes/ define pages and URLs in Remix. Files in app/components/ are not routes, so the URL won't find the page and returns 404.

2. Final Answer:

   404 Not Found error -> Option A

3. Quick Check:

   Page file outside routes = 404 error [OK]

Hint: Pages must be inside routes folder or get 404 [OK]

Common Mistakes:

• Expecting page to load from components folder
• Thinking app crashes on wrong folder
• Assuming styles affect routing errors

5. You want to add a new page at URL /contact. Which is the correct way to add this page in your Remix project structure?

hard

A. Create app/components/contact.tsx and import it in app/routes/index.tsx.

B. Add contact.html inside public/ folder.

C. Create app/routes/contact.tsx with the page component inside.

D. Create app/styles/contact.css and link it in app/routes/index.tsx.

Solution

1. Step 1: Know how to add new pages in Remix

   New pages are added by creating files inside app/routes/ matching the URL path. For URL /contact, create app/routes/contact.tsx with the page component.

2. Final Answer:

   Create app/routes/contact.tsx with page component -> Option C

3. Quick Check:

   New page URL = new file in routes folder [OK]

Hint: New URL = new file in app/routes folder [OK]

Common Mistakes:

• Adding page files in components folder
• Placing HTML files in public for pages
• Only adding CSS without page component